three.js-model

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