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