Three.js入门学习笔记07：外部模型导入-C4D转成json文件供网页使用-fbx导入
上一篇用的obj導(dǎo)入，轉(zhuǎn)成json發(fā)現(xiàn)有些材質(zhì)加載不進(jìn)去，不知是什么原因。
比如blender導(dǎo)入obj模型的時(shí)候，只要obj和mtl材質(zhì)文件在同一個(gè)文件夾內(nèi)，正常情況，導(dǎo)入obj的同時(shí)就能直接導(dǎo)入同文件夾下的mtl。
在blender中可以看到有完整材質(zhì)的obj模型，但是用three.js插件轉(zhuǎn)成json放在網(wǎng)頁(yè)里時(shí)，材質(zhì)有缺失。
這個(gè)問(wèn)題還沒(méi)解決。
于是我換成用c4d轉(zhuǎn)fbx，fbx導(dǎo)入blender，用blender的three.js插件轉(zhuǎn)成json的方式，放在網(wǎng)頁(yè)中，這樣材質(zhì)可以比較好的保留。
fbx導(dǎo)入Blender轉(zhuǎn)成json有幾個(gè)需注意問(wèn)題和沒(méi)解決問(wèn)題記錄一下：
以下不知道對(duì)不對(duì)，也沒(méi)找到問(wèn)題原因，只是這么做效果好像好點(diǎn)
1.C4D導(dǎo)出fbx時(shí)，需要可以編組導(dǎo)出，每個(gè)對(duì)象有一個(gè)材質(zhì)，不要把所有層級(jí)都連接對(duì)象加刪除，避免一個(gè)對(duì)象上有很多材質(zhì)
2.C4D連接對(duì)象加刪除時(shí)，相鄰相近的合并在一起，合并不好可能會(huì)在網(wǎng)頁(yè)里出現(xiàn)破面
3.C4D里重置坐標(biāo)，blender中對(duì)齊3d游標(biāo)，上一篇里有
4.材質(zhì)需要加雙面繪制
待解決：
1.有些編組分開(kāi)，也注意材質(zhì)問(wèn)題了，還是加載不出想要的材質(zhì)效果，原因不明
2.有些材質(zhì)導(dǎo)出成fbx和json都很大，不明原因
3.軸向翻轉(zhuǎn)問(wèn)題，有何規(guī)律，為何會(huì)有翻轉(zhuǎn)，原因不明
4.Blender導(dǎo)出three.js時(shí)候，需要快捷鍵a一次，全選之后再選中對(duì)象，然后導(dǎo)出才沒(méi)有報(bào)錯(cuò)，這是是為啥
5.加載多個(gè)json對(duì)象有什么簡(jiǎn)便方法？
圖示
C4D中全部連接對(duì)象加刪除，多個(gè)材質(zhì)不行
上圖blender里看是類似這種
不加雙面的效果不太行
組里有單獨(dú)對(duì)象，每個(gè)對(duì)象分別有材質(zhì)，可以整組導(dǎo)出
C4D相鄰的連接對(duì)象+刪除
整組無(wú)法重置軸心的時(shí)候，可以只影響軸，把軸的原點(diǎn)位置改成0，0，0就好了。
整個(gè)導(dǎo)出還是有很多問(wèn)題，不知原因是什么
代碼
<!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">//renderervar renderer = new THREE.WebGLRenderer();renderer.setSize(800, 600);document.getElementsByTagName("body")[0].appendChild(renderer.domElement); //scenevar 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); //objectvar 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倍大小 mesh = obj; obj.position.set(0,0,0);obj.rotation.z = -Math.PI;//旋轉(zhuǎn)180度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倍大小 mesh = obj2; obj2.position.set(0,0,-4);obj2.rotation.z = -Math.PI;//旋轉(zhuǎn)180度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;//旋轉(zhuǎn)180度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;//旋轉(zhuǎn)180度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;//旋轉(zhuǎn)180度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;//旋轉(zhuǎn)180度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;//旋轉(zhuǎn)180度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;//旋轉(zhuǎn)180度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;//旋轉(zhuǎn)180度obj8.rotation.y = -Math.PI;//旋轉(zhuǎn)180度scene.add(obj8);}); //light var light = new THREE.DirectionalLight(0xffffff);light.position.set(10,20,30);light.intensity=1.5;//強(qiáng)度scene.add(light); // scene.add( new THREE.DirectionalLightHelper( light ) );//平行光位置id = setInterval(draw, 20); function draw() {renderer.render(scene, camera); }</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的Three.js入门学习笔记07：外部模型导入-C4D转成json文件供网页使用-fbx导入的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 基于adb和shell命令的Androi
- 下一篇： 多线程应用---使用WaveOut* A