javascript - Three.js Collada - 在 Three js 中加载多个 Collada 对象

Question

我无法使用 collada 加载多个对象，堆栈溢出中的几个答案对我不起作用。我用 three.js 导出但用 collada 不工作。这是我的代码。如果有人知道如何拯救生命。谢谢!

function o(){
    var loader = new  THREE.ColladaLoader();
    scene = new THREE.Scene();
    loader.options.convertUpAxis = true;
    loader.load('nn.dae', function (collada){
        dae = collada.scene;
        dae.scale.x = dae.scale.y = dae.scale.z = 3;
        //dae.updateMatrix();
        scene.add(dae);
        //console.log(scene);
    }); 
    loader.load('erer.dae', function (collada){
        dae1 = collada.scene;
        dae1.scale.x = dae1.scale.y = dae1.scale.z = 3;
        //dae1.updateMatrix();
        //scene.add(dae1);
        //console.log(scene);
    }); 

    init();
    animate();

}
o();
function init(){
    /*creates empty scene object and renderer*/
    camera =  new THREE.PerspectiveCamera(45, 600/400, .1, 500);
    renderer = new THREE.WebGLRenderer({antialias:true});

    renderer.setClearColor(0x000000);
    renderer.setSize(600, 400);
    renderer.shadowMapEnabled= true;
    renderer.shadowMapSoft = true;

    /*add controls*/

    camera.position.x = 5;
    camera.position.y = 9;
    camera.position.z = 42; 
    camera.lookAt(scene.position);

    /*datGUI controls object*/
    guiControls = new function(){
        this.rotationX  = 0.0;
        this.rotationY  = 0.0;
        this.rotationZ  = 0.0;

        this.lightX = 19;
        this.lightY = 47;
        this.lightZ = 19;
        this.intensity = 2.5;       
        this.distance = 373;
        this.angle = 1.6;
        this.exponent = 38;
        this.shadowCameraNear = 34;
        this.shadowCameraFar = 2635;
        this.shadowCameraFov = 68;
        this.shadowCameraVisible=false;
        this.shadowMapWidth=512;
        this.shadowMapHeight=512;
        this.shadowBias=0.00;
        this.shadowDarkness=0.11;       

    }
    /*adds spot light with starting parameters*/
    spotLight = new THREE.SpotLight(0xffffff);
    spotLight.castShadow = true;
    spotLight.position.set (20, 35, 40);
    spotLight.intensity = guiControls.intensity;        
    spotLight.distance = guiControls.distance;
    spotLight.angle = guiControls.angle;
    spotLight.exponent = guiControls.exponent;
    spotLight.shadowCameraNear = guiControls.shadowCameraNear;
    spotLight.shadowCameraFar = guiControls.shadowCameraFar;
    spotLight.shadowCameraFov = guiControls.shadowCameraFov;
    spotLight.shadowCameraVisible = guiControls.shadowCameraVisible;
    spotLight.shadowBias = guiControls.shadowBias;
    spotLight.shadowDarkness = guiControls.shadowDarkness;
    scene.add(spotLight);

    /*adds controls to scene*/

           $("#webGL-container").append(renderer.domElement);
    /*stats*/

}


function render() {    

    spotLight.position.x = guiControls.lightX;
    spotLight.position.y = guiControls.lightY;
    spotLight.position.z = guiControls.lightZ;

}

编辑:我想做的是在用户输入表单值时操纵对象的比例。我发现了这个技术，我在其中加载了一个 colada 文件，其中包含两个名称不同的搅拌器对象，使用下面的代码我可以更改 Cube 的比例，但 Cube.001 的比例不会改变。另外，如果我给出一个像“dsds”这样的名字，colada 文件甚至不会加载。这是代码

loader.options.convertUpAxis = true;
loader.load('vaddsi.dae', function (collada){
    dae = collada.scene;
    dae.scale.x = dae.scale.y = dae.scale.z = 3;
    dae.traverse(function (child){
        if (child.colladaId == "Cube.001"){
            child.traverse(function(e){
                e.castShadow = true;
                e.receiveShadow = true;
                e.scale.x=0.4;
                if (e.material instanceof THREE.Mesh){
                    //e.material.needsUpdate = true;
                }                  
            });
        }
        if (child.colladaId == "Cube"){
            child.traverse(function(e){
                e.scale.x=2;
                if (e.material instanceof THREE.Mesh){
                    e.material.needsUpdate = true;
                }  
            });
        }   
    });
    dae.updateMatrix();
    init();
    animate();
    console.log(scene);
}); 

Answer 1

function o(){
var loader = new  THREE.ColladaLoader(),
    loader2 = new THREE.ColladaLoader(),
    dae, dae1;
scene = new THREE.Scene();
loader.options.convertUpAxis = true;
loader.load('nn.dae', function (collada){
    dae = collada.scene;
    dae.scale.x = dae.scale.y = dae.scale.z = 3;
    //dae.updateMatrix();
    scene.add(dae);
    //console.log(scene);
}); 
loader2.load('erer.dae', function (collada){
    dae1 = collada.scene;
    dae1.scale.x = dae1.scale.y = dae1.scale.z = 3;
    //dae1.updateMatrix();
    scene.add(dae1);
    //console.log(scene);
}); 

init();
animate();

}

不要将 requestAnimationFrame() 放在更新凸轮和场景的渲染器中。

如果您无法获得比例集，请使用此设置:

    function o(){
var loader = new  THREE.ColladaLoader(),
    loader2 = new THREE.ColladaLoader(),
    dae, dae1;
scene = new THREE.Scene();
loader.options.convertUpAxis = true;
loader.load('nn.dae', function (collada){
    var StartTime = new Date();
    dae = collada.scene;
    scene.add(dae);
}, function(xhr){
   if(xhr.loaded >= xhr.total){
     var EndTime = new Date(), TotalTime;
     EndTime = StartTime - EndTime;
     TotalTime = Math.abs(EndTime);
     console.log("Object 1 loaded\nLoaded in: " + TotalTime + "ms.");
     setTimeout(function(){
       dae.scale.x = 3;
       dae.scale.y = 3;
       dae.scale.z = 3;
       console.log("Object 2 adjusted scales");
     }, TotalTime);
   }
}); 
loader2.load('erer.dae', function (collada){
    var StartTime = new Date();
    dae1 = collada.scene;
    scene.add(dae1);
}, function(xhr){
   if(xhr.loaded >= xhr.total){
     var EndTime = new Date(), TotalTime;
     EndTime = StartTime - EndTime;
     TotalTime = Math.abs(EndTime);

     console.log("Object 2 loaded\nLoaded in: " + TotalTime + "ms.");
     setTimeout(function(){
       dae1.scale.x = 3;
       dae1.scale.y = 3;
       dae1.scale.z = 3;
       console.log("Object 2 adjusted scales");
     }, TotalTime);
   }
}); 

init();
animate();

}