lero

随着AR、VR的火爆，3D技术也逐渐被人们所广泛使用。随着浏览器，手机性能的提高，随着用户对炫酷页面追求，许多3D效果也日渐诞生在web领域。

在2011年上半年公开发布的WebGL技术就是这样一门技术，它可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏。

WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

而3D开发的本身是复杂的，是具有高成本，低回报的。为了解决这种复杂性，诞生了许多底层开发的引擎。而今天要分享的Three.js就是其中一个，他是开源并且被众多浏览器广泛支持的技术。

接下了我们来制作一个3D立方体旋转动画。

1.开发环境准备

调试建议使用 Chrome 或者 Firefox 浏览器，仅此而已。不需要额外的插件支持。（建议升级到最新版本）

2.下载Three.js

传送门：github.com/mrdoob/three.js/tree/master

下载好后我们可以在源码中找到three.js，在使用 Three.js 之前，我们需要在 HTML 文件中引用该文件。

伪代码片段如下：

<script type="text/javascript" src="three.js"></script>

然后就能通过全局变量THREE访问到所有属性和方法了。

3.开发第一个3D立方体网格旋转动画

开发一个Three.js至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。

场景（Scene）

在 Three.js 中添加的物体都是添加到场景中的，因此它相当于一个大容器。相当于HTML中canvas中的画布。

伪代码：var scene = new THREE.Scene();

接下来需要一个相机（Camera）。

Camera 是三维世界中的观察者，为了观察这个世界，首先我们要描述空间中的位置

X,Y,Z.

在三维世界里：

如果我们正对着电脑而坐，以电脑屏幕中心点为参考：

那么 x轴正方向：水平向右

那么Y轴正方向：垂直于x轴向上

那么z轴正方形：垂直于屏幕向外

伪代码：

Var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );

camera.position.z = 1000;

说明：其中PerspectiveCamera代表正交相机,它的5个参数分别代表：

第一个参数： fov 指明相机的可视角度,可选参数,如果未指定,初始化为50°

第二个参数：aspect指明相机可视范围的长宽比,可选参数,如果未指定,初始化为1

第三个参数： near指明相对于深度剪切面的近的距离，必须为正数,可选参数,如果未指定,初始化为0.1

第四个参数： far指明相对于深度剪切面的远的距离，必须为正数,可选参数,如果未指定,初始化为2000

注意：以上单位除了第一个参数为度以外，其余的均为米。

再接下来我们需要创建一个物体（Object），物体是场景中可以通过相机观察到的事物。

物体具有形状，材质。

物体形状的定义有很多种，其中立方体的定义

伪代码：var geometry = new THREE.BoxGeometry( 200, 200, 200 );

代表定义了一个200米长宽深的立方体

物体材质的定义：

伪代码：var material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

接下来需要描述物体的模型并添加到场景中：我们用了一个3D经典模型网格模型。这个模型需要物体的形状和材质作为参数

伪代码：var mesh = new THREE.Mesh( geometry, material );

Scene.add(mesh)

再次：我们需要浏览器渲染这种模型，因此需要一个渲染器（Renderer）

伪代码为：

renderer = new THREE.WebGLRenderer();

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

document.body.appendChild( renderer.domElement );

最后，想要看动画：我们需要使用js提供的一个动画API来完成动画的渲染：

function animate() {

requestAnimationFrame( animate );

mesh.rotation.x += 0.01;

mesh.rotation.y += 0.02;

renderer.render( scene, camera );

}

在这个动画渲染中，我们让模型绕X，y旋转。

最后的动画效果如下所示：

该项目的源码为：

至此 一个入门级3d动画就完成了，后续将继续深入讲解该系列。喜欢的就关注吧。