-

Three.js介绍

WEB前端

Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。Three.js(类似于JQuery)在浏览器提供的 WebGL 接口之上又做了一层封装。WebGL 是在浏览器中实现三维效果的一套标准。WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染,这样 Web 前端开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。下面雷雪松就简单介绍一下Three.js。

three.js
1、创建一个 Three.js 程序步骤
a. 初始化 场景(scene)–包含所有需要显示的3D物体以及其他相关元素的容器
b. 初始化 相机(camera)–决定3D场景如何投影到2D画布之上
c. 初始化 渲染器(renderer)–用于最后绘制的画笔
d. 场景中创建物体

1
2
3
4
5
6
7
8
9
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 1. 75设置的是视角(field of view)。
// 2. 设置的是相机拍摄面的长宽比(aspect ratio)。我们几乎总是会使用元素的宽除以高,否则会出现挤压变形。
// 3. 是近裁剪面(near clipping plane)
// 4. 远裁剪面(far clipping plane)。
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

2、Three.js 之相机
在网页显示出三维的效果,就要借助于视觉效果来实现,比如阴影、光照等。Camera相当于人的眼睛,从坐标的那个视点去观察目标,相当于投影出立体感。Three.js的架构支持多种camera,这里使用最常见的远景相机(PerspectiveCamera),也就是类似于人眼观察的方式。

3、Three.js 之渲染器
渲染器决定了渲染的结果应该画在页面的什么元素上面,并且以怎样的方式来绘制。

1
2
3
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的大小为窗口的内宽度,也就是内容区的宽度
document.body.appendChild(renderer.domElement);

注意,渲染器renderer的domElement元素,表示渲染器中的画布,所有的渲染都是画在domElement上的,所以这里的appendChild表示将这个domElement挂接在body下面,这样渲染的结果就能够在页面中显示了。

4、Three.js 之场景

1
2
3
4
5
6
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
// Mesh 好比一个包装工,它将『可视化的材质』粘合在一个『数学世界里的几何体』上,形成一个『可添加到场景的对象』。
// 当然,创建的材质和几何体可以多次使用(若需要)。而且,包装工不止一种,还有 Points(点集)、Line(线/虚线) 等。
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

CubeGeometry是一个正方体或者长方体,究竟是什么,由它的3个参数所决定,cubeGeometry的原型。

1
2
CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
// width:立方体x轴的长度; height:立方体y轴的长度; depth:立方体z轴的深度,也就是长度

5、Three.js之渲染
渲染应该使用渲染器,结合相机和场景来得到结果画面。渲染分两种:离线渲染、实时渲染。渲染函数的原型如下:render( scene, camera, renderTarget, forceClear )。各个参数的意义是:
scene:前面定义的场景
camera:前面定义的相机
renderTarget:渲染的目标,默认是渲染到前面定义的render变量中
forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。
(1)离线渲染
比如特效动画是用电脑做出然后渲染一帧一帧的高质量图片,然后再把图片用视频处理软件拼接成电影的。这就是离线渲染。如果不事先处理好一帧一帧的图片,那么电影播放得会很卡。CPU和GPU根本没有能力在播放的时候渲染出这种高质量的图片。
(2)实时渲染
就是需要不停的对画面进行渲染,即使画面中什么也没有改变,也需要重新渲染。下面就是一个渲染循环:

1
2
3
4
5
6
function render() {
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(render);
}

其中一个重要的函数是requestAnimationFrame,这个函数就是让浏览器去执行一次参数中的函数,这样通过上面render中调用requestAnimationFrame()函数,requestAnimationFrame()函数又让rander()再执行一次,就形成了我们通常所说的游戏循环了。

来源:Three.js介绍

发表评论

电子邮件地址不会被公开。 必填项已用*标注