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

发布时间:2017年11月08日评论数：抢沙发阅读数： 9199

概述

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

立体模型构建

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

设置渲染器renderer

设置相机camera

设置光源light

设置场景scene

设置物体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);
}