第一章 用three.js创建你的第一个3D场景

第一章 用three.js创建你的第一个3D场景

到官网下载three.js的源码和示例。

创建HTML框架界面

第一个示例的代码如下： 01-basic-skeleton.html 位于

Learning Three.js- The JavaScript 3D Library for WebGL\chapter-01

---

Three.js 有两个版本：

• Three.min.js:压缩版本，去掉了空格和换行，大小变小了，加载时占用系统资源小。

• Three.js:未压缩版本，易于阅读和调试，但加载时占用系统资源较大。

渲染和展示一个三维物体

我们接下来将会创建我们的第一个场景并添加一系列的物体。其中包括：

• Plane :有两个面的矩形，作为我们场景的地面，将会在场景中部渲染成一个灰色的矩形。

• Cube :正方体，我们将渲染成红色。

• Sphere ：球体，我们将渲染成蓝色。

• Camera ：相机决定了看到了什么。

• Axes ：坐标轴，x,y,z轴。一个很好的调试工具，能够让你知道物体渲染在哪里。

第二个示例的代码如下 02-first-scene.html 位于

Learning Three.js- The JavaScript 3D Library for WebGL\chapter-01

---

可知有如下几个步骤：

1. 创建并设置scene、render、camera。

2. 创建对象，指定Geometry和Material，设置position并加入到scene中

3. 把渲染的结果显示在 $('div#WebGL-output')对象中。

4. 开始渲染。

加上材质、灯光和阴影

第三个示例的代码如下： 03-materials-light.html 位于

Learning Three.js- The JavaScript 3D Library for WebGL\chapter-01

---

分析示例二和示例一可以发现不同之处。

首先，示例二添加的灯光 ，类型是点光源，并且打开了阴影效果。

// add spotlight for the shadows
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
spotLight.castShadow = true;
scene.add( spotLight );

然后，示例一采用的是BasicMaterial材质（效果为三角网格），而示例二采用的是LambertMaterial
材质（效果为一般的纸质效果）。

用动画拓展你的第一个场景

示例四的源码如下： 04-materials-light-animation.html 位于

Learning Three.js- The JavaScript 3D Library for WebGL\chapter-01

---

分析源码可知与示例三的不同有：

function initStats() {

var stats = new Stats();

stats.setMode(0); // 0: fps, 1: ms

// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';

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

return stats;
}

这里这个函数创建了一个Stats，也就是左上角的显示帧数的方框。方法就是创建一个Stats，并设置
参数，然后将结果显示在$('#Stats-output')中。

然后看这段代码：

var step=0;
render();

function render() {
stats.update();
// rotate the cube around its axes
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
cube.rotation.z += 0.02;

// bounce the sphere up and down
step+=0.04;
sphere.position.x = 20+( 10(Math.cos(step)));
sphere.position.y = 2 +( 10Math.abs(Math.sin(step)));

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

这里更改了cube和sphere的角度和位置，然后调用requestAnimationFrame函数，该函数就是调用传入的参数render，然后就进入渲染循环，就产生了动画。

运用 dat.GUI库使得实验更简易

创建一个GUI 接受rotationSpeed和bouncingSpeed，值在0~0.5之间。

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

创建一个javascript对象用来包含rotationSpeed和bouncingSpeed。

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

然后改变的角度和位置可以采用controls的值。