当前位置：网站首页>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>
边栏推荐
- MongoD管理数据库的方法介绍
- Getting started with webgl (3)
- How to build your own super signature system (yunxiaoduo)?
- AB package details in unity (super detail, features, packaging, loading, manager)
- Cut ffmpeg as needed, and use emscripten to compile and run
- 【数字IC验证快速入门】26、SystemVerilog项目实践之AHB-SRAMC（6）（APB协议基本要点）
- Create lib Library in keil and use lib Library
- [quick start of Digital IC Verification] 25. AHB sramc of SystemVerilog project practice (5) (AHB key review, key points refining)
- Learn good-looking custom scroll bars in 1 minute
- Monthly observation of internet medical field in May 2022
猜你喜欢
Starting from 1.5, build a microservice framework link tracking traceid
webgl_ Graphic transformation (rotation, translation, zoom)
![[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)
![[follow Jiangke University STM32] stm32f103c8t6_ PWM controlled DC motor_ code](/img/8d/a6d477a8679ca4f3885b1a7b542437.png)
[follow Jiangke University STM32] stm32f103c8t6_ PWM controlled DC motor_ code
![Super signature principle (fully automated super signature) [Yun Xiaoduo]](/img/b8/5bafbada054b335568e64c7e1ac6bb.jpg)
Super signature principle (fully automated super signature) [Yun Xiaoduo]
unnamed prototyped parameters not allowed when body is present
![[quick start of Digital IC Verification] 26. Ahb-sramc of SystemVerilog project practice (6) (basic points of APB protocol)](/img/7e/188e57ee026200478a6f61eb507c92.png)
[quick start of Digital IC Verification] 26. Ahb-sramc of SystemVerilog project practice (6) (basic points of APB protocol)
Whole process analysis of unity3d rendering pipeline
How to create Apple Developer personal account P8 certificate
[quickstart to Digital IC Validation] 20. Basic syntax for system verilog Learning 7 (Coverage Driven... Including practical exercises)
随机推荐
Briefly describe the working principle of kept
[quick start for Digital IC Validation] 26. Ahb - sramc (6) for system verilog project practice (Basic Points of APB Protocol)
Do you know the relationship between the most important indicators of two strong wind control and the quality of the customer base
Android -- jetpack: the difference between livedata setValue and postvalue
【数字IC验证快速入门】29、SystemVerilog项目实践之AHB-SRAMC（9）（AHB-SRAMC SVTB Overview）
Introduction of mongod management database method
摘抄的只言片语
./ Functions of configure, make and make install
[Data Mining] Visual Pattern Mining: Hog Feature + cosinus Similarity / K - means Clustering
Unity's ASE achieves full screen sand blowing effect
有钱人买房就是不一样
避坑:Sql中 in 和not in中有null值的情况说明
How to deploy the super signature distribution platform system?
webgl_ Graphic transformation (rotation, translation, zoom)
【数字IC验证快速入门】22、SystemVerilog项目实践之AHB-SRAMC（2）（AMBA总线介绍）
MongoDB数据库基础知识整理
Getting started with webgl (4)
Shader Language
MongoD管理数据库的方法介绍
numpy---基础学习笔记