THREE.JS 2.0 场景及场景中的对象

Posted 2023-04-19

参考技术A 场景中的三要素
camera 相机
spotLight 光源
object (plane、cube...)物体
一个只有一个平面的简单场景中已经包含了几个对象
其中包括使用 Scene.add(object) 加载进场景的几个对象
场景渲染的时候camera对象会自动添加进来
从几个函数来理解THREE.Scene()对象
1、在场景中添加物体 Scene.Add()

2、移除物体 Scene.Remove()

3、获取场景中所有子对象列表 Scene.children

4、利用name 属性，获取场景中某个特定的物体 Scene.getChildByName()
5、这是一个回调函数返回所有子对象列表 scene.traverse()
在这里的效果同使用for 循环遍历children这个属性

6、雾化属性 在添加完场景后即可添加，可以使整个场景有一种雾化的效果
scene.fog = new THREE.Fog(0xffffff,0.015,100);
7、使场景中的所有物体都使用相同的材质
scene.overrideMaterial = new THREE.MeshLambertMaterial(color:0xffffff);

var geom = new THREE.Geometry()

geom.vertices = vertices vertices数组定义了构成几何体的点；
geom.faces = faces 将vertices里面的点连接起来，创建成三角面片，就形成了faces数组；
geom.verticesNeedUpdate = true 告诉geom对象 上面的属性需要更新；

geom.computeCentroids() 计算geom中face数组里每一个面的重心；
geom.computeFaceNormals() 该函数用来重新计算侧面，从而完成整个模型的更新
geom.mergeVertices() 从字面上的意思可以理解为将几何体的面融成一个立体；
geom.clone() 创建出一个geom对象的副本，赋予不同的材质后，就可以使用这个副本创建不同的网格对象。

mesh.position
mesh.rotation
mesh.scale
mesh.translateX
mesh.translateY
mesh.translateZ

cube.position.set(10,3,1)

cube.position = new THREE.Vector3(10,3,1)

1、在controls 中添加方法变量
属性变量是这样的： this.positionX = 1;
方法变量：

2、把对象传递给gui （无取值范围）
gui.add(controls,'translate')
这样在gui中点击的时候就可以调用 translate 方法

var mesh = THREE.SceneUtils.createMultiMaterialObject(geom,materials)//其中materials是设置材料的对象数组
这个方法创建出来的不是一个THREE.Mesh实例，而是materials数组里面的每一个材质都会创建一个实例 所以要像使用Scene对象一样使用这个(THREE.Mesh)

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

【中文标题】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();