02.ThreeJs開發指南-第二章-場景

第二章

建立中的基本元件：

1.相機

2.光源

3.物體

建立渲染的時候，相機會自動加載到場景中。當然啦，你也可以手動添加。

相機，光源等，隻要添加到場景中都算是物體。

scene.add(obj);

scene.children 數組，元素是obj

obj instanceof THREE.MESH 當然還有光源和相機

Scene.getChildByName(name)

scene.remove(obj);

物體的屬性：

name 唯一辨別物體

周遊場景中的物體：

scene.traverse(function(e){
    if(e instanceof THREE.MESH && e!=plane){
        ...
    }
});
           

霧：

//顔色  near  far
scene.fog = new THREE.Fog(,,);

//顔色   霧的濃度
scene.fog = new THREE.FogExp2(, );
           

材質覆寫：

添加到場景中的物體都會使用目前的材質。

幾何對象

手動建立幾何對象：

var vertices = [
    new THREE.Vector3(,,),
    new THREE.Vector3(,,-),
    new THREE.Vector3(,-,),
    new THREE.Vector3(,-,-)
    ...
];

var faces = [
    new THREE.Face3(,,),
    new THREE.Face3(,,),
    new THREE.Face3(,,),
    new THREE.Face3(,,)
    ...
];

var geom = new THREE.Geometry();
geom.vertices = vertices;
geom.faces = faces;
geom.computeCentroids;
geom.mergeVertices();
           

出于性能的考慮，Three.js庫假設一個網格的幾何體在其聲明周期内不會改變。但是，如果我們希望實時修改場景中渲染的物體，我們需要在renderer循環中額外設定：

mesh.geometry.vertices = vertices;
mesh.geometry.verticesNeedUpdate = true;//告知Three.js頂點需要更新
mesh.geometry.computeFaceNormals();//重新計算側面的法線
           

使用多重材質：

var materials = [

    new THREE.MeshLMaterial({opacity:,color:,transparent:true}),

    new THREE.MeshBasicMaterial({color:,wireframe:true})
];

var mesh = new THREE.SceneUtils.createMultiMaterialObject(geom,materials);
           

這行代碼，不是場景一個mesh對象，而是建立了包含兩個mesh對象(一個使用了MeshLambertMaterial材質，一個使用了MeshBasicMaterial材質)的組。這個組的使用方法，和mesh的使用方法類似。

mesh.children.forEach(function(e){
    e.castShaow  = true;
});
           

clone函數：

this.clone = function(){

    var cloned = mesh.children[].geometry.clone();

    var materials = [

        new THREE.MeshLMaterial({opacity:,color:,transparent:true}),

        new THREE.MeshBasicMaterial({color:,wireframe:true})
    ];

    var mesh2 = THREE.SceneUtils.createMultiMaterialObject(cloned,materials);

    mesh2.children.forEach(function(e){e.castShaow = true;});

    mesh.translateX();
    mesh.translateZ();

    mesh2.name = "clone";
    //移除之前的name叫 clone 的 物體。
    scene.remove(scene.getChildByName('clone'));

    scene.add(mesh2);

}
           

Mesh對象屬性和函數：

一個Mesh對象的位置和是相對于其父對象來講的。

定位：

cube.position.x =;
cube.position.y =;
cube.position.z =;

cube.position.set(,,);

cube.position = new THREE.Vector3(,,);
           

旋轉：

cube.rotation.x = *Math.PI;

cube.rotation.set(*Math.PI,,);

cube.rotation = new THREE.Vector3(*Math.PI,,);
           

平移：

相機：

PerspectiveCamera(fov,aspect,near,far);
OrthographicCamera(left,right,top,bottom,near,far);


camera.lookAt(new THREE.Vector3(x,y,z));

camera.lookAt(scene.position);