<Three.js>（第二节）添加长方体

一、实验内容

上一节已经搭好了实验的框架。这一节我们将在屏幕上显示一些几何图形。如下图所示，我们将在屏幕上显示一个正方体。

二、实验步骤

1、创建场景

正像上一节所说，首先我们需要建一个场景，场景就是类似舞台，有了舞台演员才有地方表演嘛。新建场景很简单，通过Three.js库提供的Scene类，我们可以新建一个场景对象。正如一下的代码：

//创建场景

scene = new THREE.Scene();

2、新建相机

类似拍电影。有了场景后，我们需要一台摄像机，对场景上的表演进行拍摄。有的场景很大，我们不可能把场景上的所有事物都同时显示在出来。可以根据自己的需要，调整相机的角度、区域等拍摄想展示的区域。

我们通过PerspectiveCamera（透视相机）新建一个相机对象。需要的参数fov, aspect, near, far。如下图[引用ISUX]所示。

THREE.PerspectiveCamera(fov, aspect, near, far)

fov: 表示相机的夹角;

aspect:水平长度和竖直长度的比值;

near:拍摄最近距离

far:拍摄最远距离

    //创建一个摄像机

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//fov, aspect, near, far

    camera.position.set(15, 16, 13);//位置

    camera.lookAt(scene.position);//对准的焦点

lookAt函数：相机对准的点。类似聚焦的概念。

附：有投影相机、正交相机，后面会详细讲。

3、创建渲染器

THREE.WebGLRenderer()

通过WebGLRenderer()创建渲染器。当然有多种渲染器。

    //添加一个渲染器

    renderer = new THREE.WebGLRenderer();//渲染

    renderer.setClearColor(0x000000, 1.0);

    renderer.setSize(window.innerWidth, window.innerHeight);

渲染器的作用就是把场景上的3维，显示到2维屏幕上去。

setClearColor：设置渲染颜色（背景底色）

setSize：渲染面大小（在二维平面上的窗口大小）

4、添加长方体

    //添加长方体

    var geometry = new THREE.BoxGeometry(6, 4, 6);

    var matarial = new THREE.MeshLambertMaterial({color: 'red'});

    var cube = new THREE.Mesh(geometry, matarial);

    scene.add(cube);

要显示一个长方体。首先我们要做的是创建一个几何图形。我们通过BoxGeometry创建一个长方体。需要的参数分别是长、宽、高。

创建了几何图形后，接下来，我们需要给这个几何图形添加一个具体的材质。这里我们使用MeshLambertMaterial给该长方体添加一个具体的材质。

材质的不同，直接影响到灯光照后看到的效果。类似我们现实生活中。有一些材质反光性很强，看起来很光滑，而有一些材质散光。通过MeshLambertMaterial，我们需要给该材质指定一种颜色，在这里，我们使用了红色作为长方体的材质颜色。正如我们前面看到的效果。

（材质、贴图，我们会在后面的内容详细讨论）

有了几何图形和指定的材质，我们可以通过Mesh创建一个我们所能看到的长方体。

5、添加灯光

前面我们完成了创建场景、向场景中添加物品，也有了摄像机。但我们还缺少一个-灯光。与我们的世界一样，原本是黑暗的，我们需要灯光的照射，物体通过反射，把场景上的事物反馈到我们的大脑。

下面我们通过SpotLight创建灯光效果。

    var light = new THREE.SpotLight(0xffffff);

    light.position.set(20, 30, 20);

    scene.add(light);

THREE.SpotLight(color);

通过color,我们给灯光指定了颜色。

灯光有多种灯光效果，类似我们显示生活，有环境光，平行光，点光源等，我们会在后面详细讨论。

三、总结

这一节，我们主要讨论的是怎样显示一个长方体。我们通过创建scene，向scene中添加要显示的元素cube，要想看到场景上的事物，得给场景添加light。场景上的事物都具备了后，我们需要添加一个camera。

四、完整代码

js：

var renderer;

var scene;

var camera;

function init() {

    //创建场景

    scene = new THREE.Scene();

    //创建一个摄像机

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//相机

    camera.position.set(15, 16, 13);

    camera.lookAt(scene.position);

    scene.add(camera);

    //添加一个渲染器

    renderer = new THREE.WebGLRenderer();//渲染

    renderer.setClearColor(0x000000, 1.0);

    renderer.setSize(window.innerWidth, window.innerHeight);

    //添加长方体

    var geometry = new THREE.BoxGeometry(6, 6, 6);

    var matarial = new THREE.MeshLambertMaterial({color: 'red'});

    var cube = new THREE.Mesh(geometry, matarial);

    scene.add(cube);

    var light = new THREE.SpotLight(0xffffff);

    light.position.set(20, 30, 20);

    scene.add(light);

    document.body.appendChild(renderer.domElement);

    render();

}

function render() {

    requestAnimationFrame(render);

    renderer.render(scene, camera);

}

window.onload = init;