three.js使用clone去处理多个模型的资源加载

clone技术加载模型.png

1、添加模型

在场景创建好的基础上可以添加多个模型对象，mesh网格初始化为null。

        // 添加多个模型
        var models = {
            zombie: {
                obj: "./Models/zombie.obj",
                mtl: "./Models/zombie.mtl",
                mesh: null
            },

            zombieBlue: {
                obj: "./Models/zombie_blue.obj",
                mtl: "./Models/zombie_blue.mtl",
                mesh: null
            }
        }

2、创建网格索引

在后面资源加载完成后，利用网格索引去给模型设置一些属性。
let meshes = {}

3、加载多个模型资源

利用立即执行函数，将_key给赋值到参数key传入到里面去，最后通过models[key].mesh = mesh将网格进行添加到models对象中属性上去。

      for (var _key in models) {
            (function (key) {
                //加载模型和材质, 将加载管理器以参数的形式传入
                var mtlLoader = new THREE.MTLLoader(loadingManager);
                mtlLoader.load(models[key].mtl, function (materials) {
                    materials.preload();
                    var objLoader = new THREE.OBJLoader();
                    objLoader.setMaterials(materials);
                    objLoader.load(models[key].obj, function (mesh) {
                        //给加载的人物模型加上阴影
                        mesh.traverse(function (node) {
                            if (node instanceof THREE.Mesh) {
                                node.castShadow = true;
                                node.receiveShadow = true;
                            }
                        });
                        models[key].mesh = mesh;
                    });
                });
            })(_key)
        }

4、资源加载完成函数

资源加载完成后，执行resourceLoad()函数，这个函数自定义的，也就是会利用到网格索引，对模型的一些位置或者是大小等属性进行设置

        // 加载完成
        loadingManager.onLoad = function () {
            Resource_Loader = true;
            resourceLoad();
        }

5、资源加载完成函数

资源加载完成后对资源的一些属性进行设置，将模型克隆到网格中

        function resourceLoad() {
            meshes['zombie'] = models.zombie.mesh.clone();
            meshes['zombie2'] = models.zombie.mesh.clone();
            meshes['zombie3'] = models.zombie.mesh.clone();
            let size = 0.01;
            meshes['zombie'].position.set(-5,0,4);
            meshes['zombie'].scale.set(size,size,size);
            meshes['zombie'].rotation.y += Math.PI/3;
            scene.add(meshes['zombie']);

            meshes['zombie2'].position.set(5,0,-4);
            meshes['zombie2'].scale.set(size,size,size);
            meshes['zombie2'].rotation.y += Math.PI/6;
            scene.add(meshes['zombie2'])

            meshes['zombie3'].position.set(3,0,2);
            meshes['zombie3'].scale.set(size,size,size);
            meshes['zombie3'].rotation.y += Math.PI/6;
            scene.add(meshes['zombie3'])
        }