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);