Threejs場景中的基本組件

總序

相機：決定哪些東西將要在屏幕上渲染
光源：決定對材質會如何顯示和生成陰影的使用
物體: 相機中被渲染的對象

Scene場景的幾個方法

1. Scene.add(object);//往場景中添加物體
2. Scene.remove(object);//場景中去除物體
3. Scene.children;//Scene的子對象列表；數組吧,包括相機和光源
4. Scene.getChildByName()//通過物體的name屬性訪問該物體
   在var cude=…時候可以設定cude.name爲“方塊1”
5. Scene.traverse(function);//函數參數對每個子對象都調用一次函數

Scene.traverse(function(e){
    //將一個函數作爲參數傳進來，對Scene的每個子對象都調用一次
    if(e instanceof THREE.Mesh && e!=plane){
        ...如果e是網格對象且不是地面,則做旋轉處理等
    }
}) //可以用for循環children達到同樣的效果

注： 場景渲染的時候THREE.Camera會被自動添加進來，如果喜歡也可以手動添加
scene.add(camera);

場景的兩個屬性 fog(霧化)和overrideMaterial(材質覆蓋)

Fog

scene.fog=new THREE.Fog(0xffffff,0.015,100)

參數：白色霧化效果，近處屬性值，遠處屬性值，霧化開始和結束的地方，以及加深的程度

Another Way Fog:

scene.fog= new THREE.FogExp2(0xffffff,0.015)//後一個參數爲濃度

材質覆蓋

用來設置所有物體的材質>意思是所有添加到場景中的物體都使用一樣的材質

scene.overrideMaterial= new THREE.MeshLambertMaterial({color:0xffffff});//所有的都是白色的

網格對象的函數和屬性

• position:決定該對象相對其父對象的位置,一般父對象爲THREE.Scene
• rotation:rotation.x|y|z 繞着某一個軸旋轉一定的角度
• scale:比例，可以沿着xyz軸縮放對象
• translateX|Y|Z(amount)//將對象平移amount位置

Material材質

MeshLambertMaterial 和MeshPhongMaterial 這兩種材質會對光源產生反應

• MeshLambertMaterial :可以用來創建顏色暗淡不光亮的物體
• MeshPhongMaterial :可以用來創建光亮的物體 如金屬

Camera相機

正投影相機和透視相機

• 透視投影 距離相機越遠的物體被渲染得越小

• 正投影 同一物體渲染的大小一樣，對象和相機的距離不會影響渲染結果,可以達到模擬城市的效果

  ===>更多使用透視相機，更貼近真實世界
  相機的點聚焦 一般指向camera.lookAt(new THREE.Vector3(x,y,z)) // 0 0 0

window.requestAnimationFrame

window.requestAnimationFrame(callback)使用一個回調函數作爲參數，主要用途是按幀對網頁進行重繪.不過有一點需要注意，requestAnimationFrame是在主線程上完成。這意味着，如果主線程非常繁忙，requestAnimationFrame的動畫效果會大打折扣。並不是所有的瀏覽器都支持requestAnimationFrameAPI 最好的方法是模擬這個方法如下

 window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

 function renderScene(){
        requestAnimationFrame(renderScene);
        renderer.render(scene,camera);
    }

在renderScene中又調用了一次requestAnimationFrame(renderScene)，這樣是保證動畫的持續運行,在代碼中調用這個函數來啓動動畫。

陰影

製造產生陰影的幾個步驟,讓球體和方塊將陰影投影到地上，哪些物體投射陰影，哪些物體接受陰影

1. render.shadowMapEnabled=true;//告訴render我們需要陰影(允許陰影隱射)
2. plane.receiveShadow=true;//地面接受陰影
3. cude.castShadow=true;//cast投射，就是方塊投射陰影
4. spotLight.castShadow=true;不是所有的光源都可以投射陰影 ,這裏使用聚點光源可以產生陰影