01.ThreeJs開發指南-第一章

第一章

不同的材質對光源的反應並不相同。

材質：
(1)MeshBasicMaterial，簡單的給物體着色。
(2)MeshLambertMaterial
(3)MeshPhongMaterial

(2)(3)可以根據光源進行着色。

默認情況下，ThreeJs不產生陰影，需要進行大量計算。

renderer.shadowMapEnabled = true;

需要指定接受投影的物體，和產生投影的物體。

不是所有的光源都可以產生投影，其中，點光源可以產生投影。

光源：
聚光燈光源：SpotLight

幀循環：

requestAnimationFrame()

---

統計FPS的js庫：stats.js

使用方法：
1.添加一個div

<div id="Stats-output"></div>

2.初始化統計對象

function initStats(){
    var stats = new Stats();
    stats.setMode(0);//0表示檢測FPS   1表示檢測渲染時間（ms）
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';

    $("#Stats-output").append(stats.domElement);
    return stats;
}

3.告訴stats統計對象，每次渲染開始的時間。

function renderer(){
    stats.update();

    ....
    requestAnimationFrame(renderer);
    renderer.render(scene,camera);
}

物體屬性：
1.rotation屬性
2.position屬性

通過在幀循環中動態修改這些屬性的值，達到動畫的目的。

dat.GUI

js庫：dat.gui.js

使用方法：
1.定義一個js對象，保存dat.gui想要修改的變量們

var controls = new function(){
    this.rotationSpeed = 0.2;
    this.bouncingSpeed = 0.2;
}

2.將定義好的js對象傳遞給dat.gui對象，設置變量的取值範圍

var gui = new GUI();
gui.add(controls,'rotationSpeed',0,0.5);
gui.add(controls,'bouncingSpeed',0,0.5);

3.在幀循環中使用js對象中定義好的變量

function renderer(){
    cube.rotation.x += controls.rotationSpeed;
    cube.rotation.y += controls.rotationSpeed;
    cube.rotation.z += controls.rotationSpeed;

    step += controls.bouncingSpeed;
    ...
}

AscII效果(文本畫)

//更改爲arcii渲染風格
effect = new THREE.AsciiEffect(renderer);
effect.setSize(window.innerWidth,window.innerHeight);
$("#WebGL-output").append(effect.domElement);

effect.render(scene,camera);

更改屏幕大小場景自適應：

function onResize(){
    //alert("屏幕大小改變嘍...");
    camera.aspect = window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight);
}

window.addEventListener('resize',onResize,false);