Three.js 入门: 构建一个立方体
Three.js 是一个 JavaScript 库,用于在 Web 浏览器中创建 3D Web 图形。前面介绍过一些基本的知识和实现简单的效果,本文从简单的构建立方体出发,介绍一些基础概念。
预览效果:https://codepen.io/quintiontang/full/WNZBmrM
完整的代码如下:
这是每个 Three.js 应用程序一种常见模式,包括 WebGLRenderer
、 Scene
、 Camera
,如下:
场景
首先使用 Scene
创建一个场景(场景是一个容器,用于保存、跟踪所要渲染的物体和使用的光源)。
相机
创建相机 Camera
,这里选用 PerspectiveCamera
创建透视投影相机。这一投影模式被用来模拟人眼所看到的景象,它是 3D 场景的渲染中使用得最普遍的投影模式。
PerspectiveCamera
有四个参数:
fov
— 摄像机视锥体垂直视野角度,这里参数值为75
;aspect
— 摄像机视锥体长宽比,这里根据页面的可视长宽进行计算window.innerWidth/window.innerHeight
;near
— 摄像机视锥体近端面,值为0.1
;far
— 摄像机视锥体远端面,值为1000
WebGLRenderer
WebGL 渲染器,这个渲染器比 Canvas 渲染器(CanvasRenderer
)有更好的性能,语法如下:
parameters
是一个可选对象,用来定义渲染器行为的属性,没有设置该参数时,将使用默认值。
BoxGeometry
BoxGeometry
是用来构建四边形的几何立方体或者不规则四边形,语法如下:
width
— X 轴上面的宽度,默认值为 1。height
— Y 轴上面的高度,默认值为 1。depth
— Z 轴上面的深度,默认值为 1。widthSegments
— (可选)宽度的分段数,默认值是 1。heightSegments
— (可选)高度的分段数,默认值是 1。depthSegments
— (可选)深度的分段数,默认值是 1。
本文设置构建了一个长宽高度为 2 的立方体:
MeshBasicMaterial
一个以简单着色(平面或线框)方式来绘制几何体的材质,语法如下:
parameters
- (可选)用于定义材质外观的对象,具有一个或多个属性。材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。
本文定义了一个红色的立方体:
Mesh
网格表示基于以三角形为 polygon mesh
(多边形网格)的物体的类,语法如下:
Mesh=Geometry+Material
geometry
:(可选)BufferGeometry
的实例,默认值是一个新的BufferGeometry
。material
:(可选)一个Material
,或是一个包含有Material
的数组,默认是一个新的MeshBasicMaterial
。
接下来就将定义好的 cube
添加到场景:
render
渲染器最重要的方法,使用相机渲染一个场景。
语法格式为:
render(scene, camera, renderTarget, forceClear);
scene
是要绘制的场景camera
指定相机,相机照射的区域会转换成 2D 绘制到屏幕renderTarget
如果不让渲染的内容直接绘制到屏幕,则存放到renderTarget
,否则渲染到通常的 canvas 上forceClear
为 true 时则颜色、深度和模板绘制缓冲将在渲染前被清除,即使渲染器的autoClear
属性为false
到此,一个简单的立方体就构建完成了。
版权声明: 本文为 InfoQ 作者【devpoint】的原创文章。
原文链接:【http://xie.infoq.cn/article/90a87a6f7184e74efadd0954c】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论