当前位置：网站首页>Three. JS introductory learning notes 07: external model import -c4d to JSON file for web pages -fbx import
Three. JS introductory learning notes 07: external model import -c4d to JSON file for web pages -fbx import
2022-07-07 15:48:00 【Jiang Duoduo_ Mostly Harmless 】
Used in the last article obj Import , Turn into json I found that some materials cannot be loaded , I don't know why .
such as blender Import obj When modeling , as long as obj and mtl Material files are in the same folder , Normal condition , Import obj At the same time, you can directly import mtl.
stay blender You can see the complete material obj Model , But with three.js Plug in conversion json When placed on the web , The material is missing .
This problem has not been solved yet .
So I switched to c4d turn fbx,fbx Import blender, use blender Of three.js Plug in conversion json The way , Put it on the web , In this way, the material can be better preserved .
fbx Import Blender Turn into json There are several problems that need attention and unresolved problems to be recorded ：
I don't know whether the following is true , I didn't find the cause of the problem , It's just that the effect seems better
1.C4D export fbx when , You need to be able to group and Export , Each object has a material , Don't add or delete all levels of connected objects , Avoid having many materials on an object
2.C4D When adding or deleting connection objects , Adjacent and close ones are merged , A bad merger may break the page
3.C4D Reset coordinates in ,blender Middle alignment 3d The cursor , The last one had
4. The material needs to be painted on both sides
To be solved ：
1. Some groups are separated , Also pay attention to the material , Still can't load the desired material effect , Unknown cause
2. Some materials are exported as fbx and json It's big , For unknown reasons
3. Axial overturn problem , What are the rules , Why does it flip , Unknown cause
4.Blender export three.js When , Shortcut key required a once , Select all and then select objects , Then export without error , Why is this
5. Load multiple json What are the simple methods for objects ？
Icon
C4D Add or delete all connection objects in , Multiple materials cannot 
Upper figure blender It looks like this 
The effect of not adding two sides is not good 
There are individual objects in the Group , Each object has its own material , You can export a whole set 
C4D Adjacent connection objects + Delete 
When the whole group cannot reset the axis , It can only affect the axis , Change the origin position of the axis to 0,0,0 Just fine .
There are still many problems with the whole export , I don't know why
Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d_camera</title>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/DirectionalLightHelper.js"></script>
<script type="text/javascript" src="js/OBJLoader.js"></script>
<script type="text/javascript" src="js/ObjectLoader.js"></script>
<script type="text/javascript" src="js/FBXLoader.js"></script>
<script type="text/javascript" src="js/inflate.min.js"></script>
<script type="text/javascript" src="js/JSONLoader.js"></script>
</head>
<body>
<script type="text/javascript">
//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 600);
document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
//scene
var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(30, 800 / 600, 0.1, 100);
camera.position.set(30, 35, 30);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
//object
var loader = new THREE.ObjectLoader();
loader.load("json/cfbx3.json", function(obj) {
obj.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
obj.scale.multiplyScalar(5);//3 Multiple size
mesh = obj;
obj.position.set(0,0,0);
obj.rotation.z = -Math.PI;// rotate 180 degree
scene.add(obj);
});
var loader = new THREE.ObjectLoader();
loader.load("json/cfbx3.json", function(obj2) {
obj2.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
obj2.scale.multiplyScalar(5);//3 Multiple size
mesh = obj2;
obj2.position.set(0,0,-4);
obj2.rotation.z = -Math.PI;// rotate 180 degree
scene.add(obj2);
});
var loader = new THREE.ObjectLoader();
loader.load("json/cfbx3.json", function(obj3) {
obj3.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
obj3.scale.multiplyScalar(5);
mesh = obj3;
obj3.position.set(0,0,-7);
obj3.rotation.z = -Math.PI;// rotate 180 degree
scene.add(obj3);
});
var loader = new THREE.ObjectLoader();
loader.load("json/cfbx3.json", function(obj4) {
obj4.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
obj4.scale.multiplyScalar(5);
mesh = obj4;
obj4.position.set(0,0,-10);
obj4.rotation.z = -Math.PI;// rotate 180 degree
scene.add(obj4);
});
var loader = new THREE.ObjectLoader();
loader.load("json/untitled2.json", function(obj5) {
obj5.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
obj5.scale.multiplyScalar(5);
mesh = obj5;
obj5.position.set(0,0,-13);
obj5.rotation.z = -Math.PI;// rotate 180 degree
scene.add(obj5);
});
var loader = new THREE.ObjectLoader();
loader.load("json/untitled5.json", function(obj6) {
obj6.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
obj6.scale.multiplyScalar(500);
mesh = obj6;
obj6.position.set(0,-2,-10);
obj6.rotation.x = -Math.PI;// rotate 180 degree
scene.add(obj6);
});
var loader = new THREE.ObjectLoader();
loader.load("json/cfbx3.json", function(obj3) {
obj3.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
obj3.scale.multiplyScalar(5);
mesh = obj3;
obj3.position.set(0,0,-13);
obj3.rotation.z = -Math.PI;// rotate 180 degree
scene.add(obj3);
});
var loader = new THREE.ObjectLoader();
loader.load("json/che10.json", function(obj7) {
obj7.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
obj7.scale.multiplyScalar(100);
mesh = obj7;
obj7.position.set(10,5,-5);
// obj7.rotation.x = -Math.PI;// rotate 180 degree
scene.add(obj7);
});
var loader = new THREE.ObjectLoader();
loader.load("json/tool_new.json", function(obj8) {
obj8.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material = new THREE.MeshLambertMaterial({
color: 0xffffff,
side: THREE.DoubleSide
});
}
});
obj8.scale.multiplyScalar(100);
mesh = obj8;
obj8.position.set(0,10,-8);
obj8.rotation.z = -Math.PI;// rotate 180 degree
obj8.rotation.y = -Math.PI;// rotate 180 degree
scene.add(obj8);
});
//light
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(10,20,30);
light.intensity=1.5;// Strength
scene.add(light);
// scene.add( new THREE.DirectionalLightHelper( light ) );// Directional light position
id = setInterval(draw, 20);
function draw() {
renderer.render(scene, camera);
}
</script>
</body>
</html>
边栏推荐
- 【數字IC驗證快速入門】26、SystemVerilog項目實踐之AHB-SRAMC（6）（APB協議基本要點）
- leetcode 241. Different ways to add parentheses design priority for operational expressions (medium)
- ./ Functions of configure, make and make install
- postman生成时间戳，未来时间戳
- The "go to definition" in VS2010 does not respond or prompts the solution of "symbol not found"
- XMIND frame drawing tool
- Window环境下配置Mongodb数据库
- [quick start of Digital IC Verification] 26. Ahb-sramc of SystemVerilog project practice (6) (basic points of APB protocol)
- VS2005 strange breakpoint is invalid or member variable value cannot be viewed
- Write sequence frame animation with shader
猜你喜欢
一大波开源小抄来袭
MySQL bit type resolution
![[quick start of Digital IC Verification] 20. Basic grammar of SystemVerilog learning 7 (coverage driven... Including practical exercises)](/img/d3/cab8a1cba3c8d8107ce4a95f328d36.png)
[quick start of Digital IC Verification] 20. Basic grammar of SystemVerilog learning 7 (coverage driven... Including practical exercises)
Write a ten thousand word long article "CAS spin lock" to send Jay's new album to the top of the hot list
Window环境下配置Mongodb数据库
写一篇万字长文《CAS自旋锁》送杰伦的新专辑登顶热榜
Cut ffmpeg as needed, and use emscripten to compile and run
【兰州大学】考研初试复试资料分享
numpy--疫情数据分析案例
JS array foreach source code parsing
随机推荐
Implementation of crawling web pages and saving them to MySQL using the scrapy framework
[follow Jiangke University STM32] stm32f103c8t6_ PWM controlled DC motor_ code
XMIND frame drawing tool
It's different for rich people to buy a house
[quick start of Digital IC Verification] 20. Basic grammar of SystemVerilog learning 7 (coverage driven... Including practical exercises)
Actually changed from 408 to self proposition! 211 North China Electric Power University (Beijing)
How to deploy the super signature distribution platform system?
2. Heap sort "hard to understand sort"
2.Golang基础知识
Wechat applet 01
Vite path alias @ configuration
Cut ffmpeg as needed, and use emscripten to compile and run
Steps to create P8 certificate and warehousing account
Cocos creator collision and collision callback do not take effect
有一头母牛，它每年年初生一头小母牛。每头小母牛从第四个年头开始，每年年初也生一头小母牛。请编程实现在第n年的时候，共有多少头母牛？
[make a boat diary] [shapr3d STL format to gcode]
MySQL bit type resolution
【Markdown语法高级】让你的博客更精彩(四：设置字体样式以及颜色对照表)
【數字IC驗證快速入門】26、SystemVerilog項目實踐之AHB-SRAMC（6）（APB協議基本要點）
TS typescript type declaration special declaration field number is handled when the key key