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

Posted 2023-03-23

【中文标题】Three.js Collada - 在三个 js 中加载多个 Collada 对象

【英文标题】：Three.js Collada - Load multiple Collada objects in Three js

【发布时间】：2016-03-26 05:58:45

【问题描述】：

我无法使用 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);
); 

【问题讨论】：

也许 renderer.render( camera, scene ) 在您的 render() 函数中？

Nop.. 我收到这个错误：Uncaught TypeError: Cannot read property 'x' of undefined

哪里（在哪一行）？

inthree.min.js.... 467. 我必须说当我使用组 Object3D 时会显示此错误

代码中的哪一行？

【参考方案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();