Three.js入门——五步构建立体模型

概述

Three.js是一款webGL框架，webGL可以让我们在canvas上实现3D效果。

立体模型构建

Three.js立体模型构建需要五个步骤：

1. 设置渲染器renderer
2. 设置相机camera
3. 设置光源light
4. 设置场景scene
5. 设置物体object

第一步 渲染器设置

三维空间里的物体映射到二维平面的过程被称为三维渲染。一般来说我们都把进行渲染操作的软件叫做渲染器。具体来说要进行下面这些处理。

• 声明全局变量（对象）；
• 获取画布容器的宽高；
• 生成渲染器对象（属性：抗锯齿效果为设置有效）；
• 设定渲染器的高宽（和画布框大小一致）；
• 追加canvas元素到画布容器中；
• 设置渲染器的清除色(clearColor)。

var myCanvas = document.getElementById("mycanvas");
// 渲染器
var renderer, //声明全局变量（对象）
    mycanvasW,
    mycanvasH;

function initRender() {
    mycanvasW = myCanvas.clientWidth; //获取画布容器宽
    mycanvasH = myCanvas.clientHeight; //获取画布容器高
    renderer = new THREE.WebGLRenderer({
        antialias: true
    }); //生成渲染器对象（属性：抗锯齿效果为设置有效）
    renderer.setSize(mycanvasW, mycanvasH); //设置渲染器的高宽（和画布框大小一致）
    myCanvas.appendChild(renderer.domElement); //追加canvas元素到画布容器mycanvas中；
    renderer.setClearColor(0xfffffff, 1.0); //设置渲染器的清除色
}

第二步 设置相机

Three.js中有透视相机和正投影相机，设置步骤如下：

• 声明全局变量（对象）；
• 设置透视投影的相机；
• 设置相机的位置坐标；
• 设置相机的上为z轴方向；
• 设置视野的中心坐标。

// 相机
var camera;

function initCamera() {
    camera = new THREE.PerspectiveCamera(45, mycanvasW / mycanvasH, 1, 100000);
    camera.position.y = 10; //设置相机的位置坐标；
    camera.position.z = 10;
    camera.up.z = 1; //设置相机的上为z轴方向;
    camera.lookAt({x: 0, y: 0, z: 0 }); //设置视野的中心坐标
}

第三步 设置场景scene

场景就是一个三维空间。用[Scene]类声明一个叫[scene]的对象。

var scene;

function initScene() {   
    scene = new THREE.Scene();
}

第四步 设置光源light

OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行[环境光]等设置。作为对应，Three.js中可以设置[点光源(Point Light)]、[聚光灯(Spot Light)]、[平行光源(Direction Light)]和[环境光(Ambient Light)]。和OpenGL一样，在一个场景中可以设置多个光源。基本上，都是环境光和其他几种光源进行组合。如果不设置环境光，那么光线照射不到的面会变得过于黑暗。本文中首先按照下面的步骤设置平行光源，在这之后还会追加环境光。

• (0) 声明全局变量(对象)
• (1) 设置平行光源
• (2) 设置光源向量
• (3) 追加光源到场景

这里我们用「DirectionalLight」类声明一个叫[light]的对象来代表平行光源。

var light;

function initLight() { 
    light = new THREE.DirectionalLight(0xff0000, 1.0, 0); //设置平行光源
    light.position.set(200, 200, 200); //设置光源向量
    scene.add(light); // 追加光源到场景
}

第五步 设置物体object

这里声明一个球。

var sphere;

function initObject() {  
    sphere = new THREE.Mesh(
        new THREE.SphereGeometry(20, 20),                //width,height,depth
        new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
    );
    scene.add(sphere);
    sphere.position.set(0, 0, 0);
}