Three.js入门学习笔记07:外部模型导入-C4D转成json文件供网页使用-fbx导入

上一篇用的obj导入,转成json发现有些材质加载不进去,不知是什么原因。
比如blender导入obj模型的时候,只要obj和mtl材质文件在同一个文件夹内,正常情况,导入obj的同时就能直接导入同文件夹下的mtl。

在blender中可以看到有完整材质的obj模型,但是用three.js插件转成json放在网页里时,材质有缺失。

这个问题还没解决。

于是我换成用c4d转fbx,fbx导入blender,用blender的three.js插件转成json的方式,放在网页中,这样材质可以比较好的保留。

fbx导入Blender转成json有几个需注意问题和没解决问题记录一下:
以下不知道对不对,也没找到问题原因,只是这么做效果好像好点

1.C4D导出fbx时,需要可以编组导出,每个对象有一个材质,不要把所有层级都连接对象加删除,避免一个对象上有很多材质

2.C4D连接对象加删除时,相邻相近的合并在一起,合并不好可能会在网页里出现破面

3.C4D里重置坐标,blender中对齐3d游标,上一篇里有

4.材质需要加双面绘制

待解决
1.有些编组分开,也注意材质问题了,还是加载不出想要的材质效果,原因不明

2.有些材质导出成fbx和json都很大,不明原因

3.轴向翻转问题,有何规律,为何会有翻转,原因不明

4.Blender导出three.js时候,需要快捷键a一次,全选之后再选中对象,然后导出才没有报错,这是是为啥

5.加载多个json对象有什么简便方法?

图示
C4D中全部连接对象加删除,多个材质不行
Three.js入门学习笔记07:外部模型导入-C4D转成json文件供网页使用-fbx导入_第1张图片
上图blender里看是类似这种
Three.js入门学习笔记07:外部模型导入-C4D转成json文件供网页使用-fbx导入_第2张图片
不加双面的效果不太行Three.js入门学习笔记07:外部模型导入-C4D转成json文件供网页使用-fbx导入_第3张图片
组里有单独对象,每个对象分别有材质,可以整组导出
Three.js入门学习笔记07:外部模型导入-C4D转成json文件供网页使用-fbx导入_第4张图片
C4D相邻的连接对象+删除
Three.js入门学习笔记07:外部模型导入-C4D转成json文件供网页使用-fbx导入_第5张图片
整组无法重置轴心的时候,可以只影响轴,把轴的原点位置改成0,0,0就好了。
Three.js入门学习笔记07:外部模型导入-C4D转成json文件供网页使用-fbx导入_第6张图片
整个导出还是有很多问题,不知原因是什么

代码

<!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倍大小 
        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,webgl,前端,javascript)