当前位置：网站首页>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>
边栏推荐
- Cocos makes Scrollview to realize the effect of zooming in the middle and zooming out on both sides
- When opening the system window under UE4 shipping, the problem of crash is attached with the plug-in download address
- Introduction of mongod management database method
- [follow Jiangke University STM32] stm32f103c8t6_ PWM controlled DC motor_ code
- Monthly observation of internet medical field in May 2022
- Vite path alias @ configuration
- [markdown grammar advanced] make your blog more exciting (IV: set font style and color comparison table)
- Wechat applet 01
- Virtual memory, physical memory /ram what
- How to deploy the super signature distribution platform system?
猜你喜欢
Async and await
Typescript release 4.8 beta
HW primary flow monitoring, what should we do
Streaming end, server end, player end
![[data mining] visual pattern mining: hog feature + cosine similarity /k-means clustering](/img/a4/7320f5d266308f6003cc27964e49f3.png)
[data mining] visual pattern mining: hog feature + cosine similarity /k-means clustering
Yunxiaoduo software internal test distribution test platform description document
Asynchronous application of generator function
Keil5 does not support online simulation of STM32 F0 series
LeetCode2_ Add two numbers
2. Heap sort "hard to understand sort"
随机推荐
postman生成时间戳，未来时间戳
It's different for rich people to buy a house
[quick start of Digital IC Verification] 29. Ahb-sramc (9) (ahb-sramc svtb overview) of SystemVerilog project practice
leetcode 241. Different ways to add parentheses design priority for operational expressions (medium)
How to understand that binary complement represents negative numbers
Super signature principle (fully automated super signature) [Yun Xiaoduo]
Ida Pro reverse tool finds the IP and port of the socket server
Typescript release 4.8 beta
Vertex shader to slice shader procedure, varying variable
Do you know the relationship between the most important indicators of two strong wind control and the quality of the customer base
What is Base64?
Webgl texture
[quick start of Digital IC Verification] 26. Ahb-sramc of SystemVerilog project practice (6) (basic points of APB protocol)
Function: JS Click to copy content function
Vite path alias @ configuration
避坑:Sql中 in 和not in中有null值的情况说明
Postman generate timestamp, future timestamp
居然从408改考自命题！211华北电力大学(北京)
unnamed prototyped parameters not allowed when body is present
Connecting FTP server tutorial