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);
});
}
给模型添加阴影
我们在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。
