three.js:JavaScript 3D 库

threejs

这个项目的目标是创建一个轻量级的简单3D库,换句话说,即使初学者也能使用。这个库提供了<canvas>,<svg>,CSS3D以及 WebGL渲染器。

创建第一个场景

本节的目标是简要介绍Three.js。接下来我们会建立一个其中有一个旋转的立方体的场景。页面底部会提供完整代码供你在需要时参考。

开始之前

在开始使用Three.js之前,你需要有能呈现它的地方。请确保three.js的库已经放入js/目录下,保存下面的HTML代码,同时在你的浏览器中打开它。
第一步完成。下面步骤中所有的代码都将写在上述的空<script>标签范围内。

创建场景

使用Three.js去呈现任何事物,我们需要三样东西:一个场景,一个镜头,以及一个能利用镜头渲染场景的渲染器。

让我们先解释下上述代码做了什么。在这里我们设置了场景,镜头和渲染器。Three.js提供了一些不同的镜头,在这里我们使用了透视镜头(PerspectiveCamera)。透视镜头的第一个属性是视角(field of view)

第二个属性是纵横比(aspect ratio)。在几乎所有的情况下纵横比都是用元素的宽除以高,不然呈现出来的图像就会像用宽屏电视播放老电影一样比例失调。

接下来的两个属性是近平面(near)远平面(far)。即距镜头距离远于远平面或近于近平面的物体将不会被渲染。现阶段不用太担心这个问题,但你可能会在自己的应用中使用不同的值以获取更好的效果。

 

接下来讲讲渲染器。是渲染器使得3D场景能够被呈现出来。除了我们在本例中使用的WebGL渲染器外(WebGLRenderer),Three.js还提供了其他的渲染器。针对使用较低版本浏览器或没有WebGL支持的用户,这些渲染器常常被用作替代方案。

除了需要创建一个渲染器的实例外,我们也需要设置渲染的尺寸。使用我们想要呈现的自身应用的区域的宽和高是一个不错的主意——在这种情况下,即浏览器窗口的宽和高。针对一些对性能要求较高的应用来说,你也可以将setSize的值调低,比如window.innerWidth/2window.innerHeight/2,这样的设置将使用浏览器窗口一半的大小来渲染应用。

如果你想要保持你的应用的尺寸但以更小的分辨率去渲染它,你可以将setSize的第三个属性updateStyle设置为false。比如setSize(window.innerWidth/2, window.innerHeight/2, false) 就会以一半的分辨率来渲染你的应用,前提是你的<canvas>标签的宽和高(width and height)已经设置为100%。

 

最后同样重要的是,我们将renderer元素嵌入了HTML文档中。这是一个<canvas>元素,渲染器将使用它来向我们呈现场景。

“看起来不错,但是你说的立方体呢?”现在我们就来添加。

为了创建一个立方体,我们需要一个BoxGeometry。BoxGeometry是一个包括了一个立方体所有的点(vertices)填充内容(faces)的对象。

除了几何体之外,我们还需要材质去给它着色。Three.js提供了多种材质,本示例中只使用MeshBasicMaterial。所有的材质都使用一个包含各种属性的对象来进行设置。为了保持示例简单,我们只将颜色属性设置为0x00ff00,即绿色。这种颜色设置的方式和CSS以及Photoshop中的方式一样(hex colors)

接下来我们需要一个网格(Mesh)。网格是一个将几何体框架贴上材质后的对象,我们可以将其放入创建的场景中并随意移动它。

如果我们执行scene.add()函数,新加入的对象会被默认放置在坐标(0,0,0)处。这将导致镜头和立方体在彼此的内部。为了避免这种情况,我们将镜头移出来了一些。

场景渲染

如果你将以上代码复制并粘贴进我们之前创建的HTML文档并执行,你将看不到任何东西。因为到目前为止我们并没有渲染任何东西。所以我们需要一个渲染循环(render loop)

这段代码会创建一个循环,这个循环会导致渲染器每秒钟重绘场景60次。如果你是一个页游开发的新人,你可能会说,“为什么不创建一个setInterval?”问题是——我们的确可以这么做,但使用requestAnimationFrame有许多的优势。最重要的一个可能是当用户切换浏览页的时候它可以暂停渲染循环,从而不浪费宝贵的处理能力以及耗损电池寿命。

让立方体动起来

如果你将以上所有的代码插入我们最初创建的文档中,你将会看到一个绿色的方盒。让我们把它变得更有趣——让它转起来。

将以下代码加到你的render函数中的renderer.render命令之前:

这一段代码在每一帧都会被执行(每秒60帧)并使得立方体旋转起来。基本上来说,在应用中任何你想要移动或改变的东西都应该放在渲染循环中。在渲染循环中你当然可以执行其他各种函数,这样就可以避免渲染(render)函数中出现过多的代码。

成果

恭喜你!你现在完成了你的第一个Three.js应用。这很简单,当然你需要练起来。
完整的代码如下。可随意修改钻研以加深理解。

开发资源

官方网站:http://threejs.org/
开源地址:https://github.com/mrdoob/three.js

3 11 收藏

资源整理者简介:linacre

简介还没来得及写 :) 个人主页 · 贡献了3个资源


直接登录
最新评论

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1440 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer