当前位置：网站首页>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验证快速入门】22、SystemVerilog项目实践之AHB-SRAMC（2）（AMBA总线介绍）
- Annexb and avcc are two methods of data segmentation in decoding
- Connecting FTP server tutorial
- HW初级流量监控，到底该怎么做
- Ue4/ue5 multi thread development attachment plug-in download address
- C Alibaba cloud OSS file upload, download and other operations (unity is available)
- Android -- jetpack: the difference between livedata setValue and postvalue
- Use of SVN
- Vertex shader to slice shader procedure, varying variable
- [target detection] yolov5 Runtong voc2007 data set
猜你喜欢
The bank needs to build the middle office capability of the intelligent customer service module to drive the upgrade of the whole scene intelligent customer service
有一头母牛，它每年年初生一头小母牛。每头小母牛从第四个年头开始，每年年初也生一头小母牛。请编程实现在第n年的时候，共有多少头母牛？
![[Data Mining] Visual Pattern Mining: Hog Feature + cosinus Similarity / K - means Clustering](/img/a4/7320f5d266308f6003cc27964e49f3.png)
[Data Mining] Visual Pattern Mining: Hog Feature + cosinus Similarity / K - means Clustering
【数字IC验证快速入门】25、SystemVerilog项目实践之AHB-SRAMC（5）（AHB 重点回顾，要点提炼）
银行需要搭建智能客服模块的中台能力，驱动全场景智能客服务升级
TS as a general cache method
LeetCode3_ Longest substring without duplicate characters
Actually changed from 408 to self proposition! 211 North China Electric Power University (Beijing)
【数字IC验证快速入门】24、SystemVerilog项目实践之AHB-SRAMC（4）（AHB继续深入）
Unity's ASE realizes cartoon flame
随机推荐
What are the safest securities trading apps
2022 all open source enterprise card issuing network repair short website and other bugs_ 2022 enterprise level multi merchant card issuing platform source code
[quick start of Digital IC Verification] 24. AHB sramc of SystemVerilog project practice (4) (AHB continues to deepen)
【数字IC验证快速入门】20、SystemVerilog学习之基本语法7（覆盖率驱动...内含实践练习）
Whole process analysis of unity3d rendering pipeline
Clang compile link ffmpeg FAQ
Function: JS Click to copy content function
Webcodecs parameter settings -avc1.42e01e meaning
AB package details in unity (super detail, features, packaging, loading, manager)
After UE4 is packaged, mesh has no material problem
[data mining] visual pattern mining: hog feature + cosine similarity /k-means clustering
[quick start of Digital IC Verification] 29. Ahb-sramc (9) (ahb-sramc svtb overview) of SystemVerilog project practice
Configure mongodb database in window environment
MongoDB数据库基础知识整理
Yunxiaoduo software internal test distribution test platform description document
Ue4/ue5 multi thread development attachment plug-in download address
[quick start of Digital IC Verification] 18. Basic grammar of SystemVerilog learning 5 (concurrent threads... Including practical exercises)
Super simple and fully automated generation super signature system (cloud Xiaoduo minclouds.com cloud service instance), free application in-house test app distribution and hosting platform, maintenan
Whether runnable can be interrupted
OpenGL's distinction and understanding of VAO, VBO and EBO