第一章
不同的材質對光源的反應並不相同。
材質:
(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);