three.js-model

最新推荐文章于 2024-04-23 16:34:16 发布

weixin_30825581

最新推荐文章于 2024-04-23 16:34:16 发布

阅读量220

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chenjy1225/p/9640515.html

版权

Three.js学习笔记本篇介绍model（模型）及相关问题。
OBJ格式的模型较为通用，较为适合用于3D软件互导。所以我们以OBJ模型以及其材质文件mtl为例。
STL、CTM、VTK等其他格式模型均类似。只需要替换对应的加载js文件。

添加OBJ模型

    
    <script type="text/javascript"  src="../js/three/DDSLoader.js"></script> 
    <script type="text/javascript"  src="../js/three/MTLLoader.js"></script>
    <script type="text/javascript"  src="../js/three/OBJLoader.js"></script> 

    //这里的`test.obj`是我从3Dmax新鲜导出的一个简陋的`OBJ`模型 
    //比较基本，没有材质
    
    function loadObj() {
    
                // model

                var onProgress = function(xhr) {
                    if(xhr.lengthComputable) {
                        var percentComplete = xhr.loaded / xhr.total * 100;
                        console.log(Math.round(percentComplete, 2) + '% downloaded');
                    }
                };

                var onError = function(xhr) {};

                THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
                
                //导入mtl材质
                var mtlLoader = new THREE.MTLLoader();
                mtlLoader.setPath('../js/three/obj/');
                mtlLoader.load('test.mtl', function(materials) {

                    materials.preload();
                    
                    //导入obj文件
                    var objLoader = new THREE.OBJLoader();
                    objLoader.setMaterials(materials);
                    objLoader.setPath('../js/three/obj/');
                    objLoader.load('test.obj', function(object) {

                        scene.add(object);

                    }, onProgress, onError);

                });

            }

outPut

给模型添加阴影

我们在scene.add(object);之后通过控制台打印出object。


    console.log(object);

导入三维场景中的model会被封装成一组mesh。
以test.obj为例，结构如下


    THREE.Group
          || children:Array[1]
             || THREE.Mesh
                || geometry:THREE.BufferGeometry   
                || material:THREE.MeshPhongMaterial

所以你也会发现THREE.Mesh包含castShadow：fals只要设为true即可。当然THREE.Group也是包含castShadow属性的，但是设置无效。
所以你要循环遍历将所有子节点都设为true。

outPut