Three.js 中,要渲染物体到网页中,必备3个组件:场景 scene、相机 camera、渲染器 renderer。
场景 scene
场景是所有物体的容器。在Threejs中,场景只有一种,用 THREE.Scene 表示,构建场景如下:
var scene = new THREE.Scene();
场景组件包括:
相机 — 决定哪些东西要渲染到屏幕上
光源 — 对材质如何显示,及阴影生成产生影响
物体 — Mesh对象,在相机视图里主要的渲染对象,如方块、球体等
注:Mesh对象 是区分相机和光源对象的方法。--> if( lastObject instanceof THREE.Mesh )
场景的两个属性 -- fog 雾化 和 overrideMaterial 材质覆盖
//雾化效果 //1-线性雾,密度随着距离的增加呈线性增长。参数为:雾的颜色,开始的地方,浓度的加深程度。 scene.fog = new THREE.Fog(0xffffff, 0.015, 100); //2-指数雾,密度随距离呈指数级增长。参数为:雾的颜色,浓度 scene.fog = new THREE.Fog(0xffffff, 100); //材质覆盖:所有物体设置为同样的材质 scene.overrideMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
场景函数
变量 scene.children.length; //场景中物体的个数 函数 scene.add(obj); //向场景中添加物体 scene.remove(obj); //删除场景中的物体 scene.children(); //获取场景中的所有子对象 scene.getChildByName(name); //通过名称获取场景中的物体对象 scene.traverse(function (e){}); //遍历场景中的每个物体,对物体进行操作
相机 camera
相机决定了场景中哪个角度的景色会被渲染出来。
在Threejs中用 THREE.Camera( ) 表示相机,它是相机的抽象基类。
属性:
.matrixWorldInverse — matrixWorld的逆矩阵。matrixWorld包含相机的世界变换矩阵。
.projectionMatrix — 投影变换矩阵。
方法:
.getWorldDirection( vector ) — 参数可选,返回代表相机方向的一个在世界空间中的矢量。
.lookAt( vector ) — vector为观察点,设定相机在全局空间中的位置。
.clone( camera ) — 返回一个相机的克隆。
注:camera 的 position、up、lookAt的区别:position表示相机的位置,up表示相机以哪个方向为上方,lookAt表示相机看向哪个坐标。
Threejs提供的相机有正交相机 OrthographicCamera、透视相机 PerspectiveCamera、全景相机 CubeCamera 和 3D相机 StereoCamera。主要介绍正交相机和透视相机。
正交相机 OrthographicCamera
正交相机重在表现物体的实际尺寸,没有近大远小的效果;一般是用在制图、建模上面。
构造函数:
var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
参数:
left — 可被渲染空间的左平面,比这个左侧边界更远的对象不会被渲染
right — 可被渲染空间的右平面
top — 可被渲染空间的最上面
bottom — 可被渲染空间的最下面
near — 基于相机所在的位置,从这一点开始渲染场景
far — 基于相机所在的位置,一直渲染到场景中的这一点
这六个参数分别代表正交相机拍摄到的空间的六个面的位置,这六个面围成一个长方体,我们称为视景体 (Frustum)。只有在视景体内部的物体才可能显示在屏幕上,而视景体外的物体会在显示之前被裁减掉。
属性:
.zoom — 获取和设置相机缩放因子。
.left, .right, .top, .bottom, .near, .far — 相机视椎体左面,右面,上面,下面,前面,后面。
方法:
.setViewOffset( fullWidth, fullHeight, x, y, width, height )
fullWidth — 多视图设置的全宽
fullHeight — 多视图设置的全高
x — 副摄像头的水平偏移
y — 副摄像头的垂直偏移
width — 副摄像头的宽度
height — 副摄像头的高度
该方法用于在一个较大的视椎体中设置视图偏移。这对于多窗口或多监视器/多机设置是有用的。
比如,有一组3x2显示屏,每个屏幕分辨率为 1920x1080,显示屏位于一个网格中,如下:
然后对于每个显示屏,可以如下调用:
var w = 1920; var h = 1080; var fullWidth = w * 3; var fullHeight = h * 2; // A camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 0, w, h ); // B camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 0, w, h ); // C camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 0, w, h ); // D camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 1, w, h ); // E camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 1, w, h ); // F camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );
注意,没有任何理由在一个网格中的显示屏必须具备同样的尺寸。.clearViewOffset( ) — 清除视图偏移。
.updateProjectionMatrix( ) — 更新相机投影矩阵,必须在参数发生变化后调用。
.clone( ) — 返回一个 OrthographicCamera 对象的克隆。
.toJSON( ) — 把相机数据转换成JSON格式。
透视相机 PerspectiveCamera
构造函数:
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);参数:
fov 视角 — 人差不多有180度的视角,但计算机显示器一般会选择一块儿较小的区域。对于游戏来说,大多数情况下会用60-90度左右的视角。推荐默认值:45。
aspect 长宽比 — 渲染区域的长宽比。一般会使用整个窗口作为输出界面。推荐默认值:window.innerWidth/window.innerHeight。
near 近面 — 相机开始渲染场景的地方,通常会设一个很小的值,从而可以看到所有物体。推荐默认值:0.1。
far 远面 — 相机结束渲染场景的地方,如果值太低,场景中的一部分可能不会被渲染;如果值太高,某些情况下会影响渲染效率。推荐默认值:1000。
属性:
.fov — 相机视椎体垂直视角,从下到上的观察角度。
.zoom — 获取或设置相机缩放因子。
.near, .far — 相机视椎体近裁剪面,远裁剪面。
.focus — 焦点,用于立体视觉和场深度效果的目标距离。
.aspect — 相机视椎体宽高比。
.view — 视椎体窗口规格或null。
.filmGauge — 用于较大坐标轴的胶片尺寸。默认为35毫米。
.filmOffset — 水平偏离中心偏移量。和 .filmGauge 同单位。
方法:
.getEffectiveFOV( ) — 返回考虑了缩放系数 .zoom 的当前视角,单位为角度。
.getFocalLength( ) — 返回当前和 .filmGauge 有关的 .fov 的焦距。
.getFilmWidth( ) — 返回胶片上图像的宽度。如果 .aspect >= 1(景观格式 landscape format),结果等于 .filmGauge。
.getFilmHeight( ) — 返回胶片上图像的高度。如果 .aspect <=1(肖像格式 portrait format),结果等于 .filmGauge。
.setFocalLength( focalLength ) — 设置当前和 .filmGauge 有关的 .fov 的焦距。默认为35mm。
.setViewOffset( fullWidth, fullHeight, x, y, width, height ) — 同 OrthographicCamera。
.clearViewOffset( ), .updateProjectionMatrix( ), .clone( ), .toJSON — 同 OrthographicCamera。
渲染器 renderer
渲染器决定了渲染的结果应该画在元素的什么元素上面,并且以怎样的方式来绘制。
Threejs中提供了很多的渲染方式,主要介绍 CanvasRenderer 、WebGLRenderer两种。
注:CanvasRenderer 和 WebGLRenderer 都是使用HTML5的 <canvas> 直接内嵌在网页中。Cavas渲染器中的“Canvas”表示使用Canvas 2d而不是WebGL。
WebGLRenderer
WebGL渲染器使用WebGL来绘制场景(如果设备支持),使用WebGL能够利用GPU硬件加速从而提高渲染性能。
构造函数:
var renderer = new THREE.WebGLRenderer(parameters);参数:
parameters — 是一个可选对象,包含用来定义渲染器行为的属性。没有设置该参数时,使用默认值。
parameters对象里可包含以下属性:
antialias — Boolean,默认为false。是否开启反锯齿。
precision — highp/mediump/lowp,默认为highp。着色器的精度。
alpha — Boolean,默认为false。是否可以设置背景色透明。
premultipliedAlpha — Boolean,默认为true。是否允许渲染器中的颜色具有alpha预乘的效果。
preserveDrawingBuffer — Boolean,默认为false。是否保存绘图缓冲,直到手动清除或覆盖。
stencil — Boolean,默认为true。绘图缓冲区是否具有至少8位的模板缓冲区。
depth — Boolean,默认为true。绘图缓冲区是否具有至少16位的深度缓冲区。
logarithmicDepthBuffer — Boolean,默认为false。是否使用对数深度缓冲区。
属性:
.domElement — 用来绘制输出的Canvas对象。通过构造函数中的渲染器自动创建,添加到网页中即可。
.context — 从HTML5 canvas 中获取的用来绘图的WebGL渲染上下文。
.autoClear — 定义渲染器是否应该在渲染之前自动清除其输出。
.autoClearColor — 如果autoClear为true,该属性用来定义渲染器是否需要清除颜色缓存,默认为true。
.autoClearDepth — 如果autoClear为true,该属性用来定义渲染器是否需要清除深度缓存,默认为true。
.autoClearStencil — 如果autoClear为true,该属性用来定义渲染器是否需要清除模板缓存,默认为true。
.sortObjects — 定义渲染器是否需要对象排序,默认为true。
注:排序是用来试图正确的渲染具有一定程度透明度的对象。根据定义,排序对象可能在所有情况下都不工作。根据应用程序的需要,可能需要关闭该排序功能,使用其他方法处理透明渲染,比如手动确定物体的绘制顺序。
.clippingPlanes — 用户定义的在世界空间中的裁剪平面对象。这些平面是全局范围可用的。空间中的点和该平面的点积为负的将被裁剪掉。默认为[]。
.localClippingEnabled — 定义渲染器是否考虑对象级别的裁剪平面。默认为false。
.gammaInput — 所有纹理和颜色是否使用预乘的gamma值来输入。默认为false。
.gammaOutput — 所有纹理和颜色是否使用预乘的gamma值来输出。默认为false。
.shadowMap — 实现阴影贴图(或阴影映射)的组件的引用。
.shadowMap.enabled — 是否启用在场景中的阴影贴图。默认为false。
.shadowMap.type — 阴影贴图类型定义(未经过滤,百分比接近过滤,带着色器双线性过滤的百分比接近过滤)。
— 可选值:THREE.BasicShadowMap,THREE.PCFShadowMap,THREE.PCFSoftShadowMap。
— 默认为THREE.PCFShadowMap。
.shadowMap.renderReverseSided — 默认为true。是否将材质所指定的反面渲染到阴影贴图中。如果禁用,必须在表面光源上设置适当的shadow.bias,可以同时投射和接收阴影以正确渲染。
.shadowMap.renderSingleSided — 默认为true。是否将指定的材料视为双面,而在渲染阴影贴图时使用正面(front-side)。如果禁用,必须在表面光源上设置适当的shadow.bias,可以同时投射和接受阴影以正确渲染。
.maxMorphTargets — 默认为8。着色器中允许的最大MorphTargets数量。标准材料只允许8个MorphTargets。
.maxMorphNormals — 默认为4。着色器中允许的最大MorphNormals数量。标准材料只允许8个MorphNormals。
.info — 关于显卡内存和渲染过程统计信息的对象。便于调试和分析。该对象包含以下字段:memory(geometries、textures)、render(calls、vertices、faces、points)、programs。
方法:
.getContext( ) — 返回WebGL渲染上下文。
.getContextAttributes — 返回描述WebGL上下文创建时所设置属性的对象。
.supportsVertexTextures( ) — 返回Boolean值,如果该上下文支持顶点纹理,则为true。
.getPixelRatio( ) — 返回当前设备的像素比。
.setPixelRatio( value ) — 设置设备像素比。通常用于HiDPI设备防止模糊输出canvas。
.getSize( ) — 返回包含渲染器输出canvas宽高的对象,以像素为单位。
.setSize( width,height,updateStyle ) — 调整输出canvas尺寸,要考虑设备像素比,并设置视口匹配该尺寸。如果设置updateStyle为true,则显示添加像素到输出canvas的样式中。
.setViewport( x,y,width,height ) — 设置视口,从(x,y)到(x+width,y+height)。
.setScissor( x,y,width,height) — 设置剪裁区域,从(x,y)到(x+width,y+height)。
注:setViewport 和 setScissor 方法中的(x,y)是该区域的左下角。该区域被定义从左到右的宽度,以及从底部到顶部的高度。该垂直方向的定义和HTML canvas元素的填充方向相反。
.setScissorTest( ) — Boolean,启用或禁用裁剪测试。被激活时,只有裁剪区域内的像素会被进一步的渲染行为所影响。
.setClearColor( color,alpha ) — 设置清除的颜色和透明度。
.getClearColor( ) — 返回使用当前清除颜色的THREE.Color实例。
.getClearAlpha( ) — 返回使用当前清除透明度的float。范围 0-1。
.clear( color,depth,stencil ) — 使渲染器来清除其颜色、深度和模板绘制缓冲。该方法初始化颜色缓冲区为当前清除颜色值。
.renderBufferImmediate( object,program,shading ) — 渲染一个即时缓冲区。被renderImmediateObject所调用。
object — 3D对象实例(Object3D)
program — 着色器程序实例(shaderProgram)
shading — 材料实例(Material)
.renderBufferDirect( camera,lights,fog,material,geometryGroup,object ) — 使用相机和正确的材料渲染缓冲模型组。
.renderBuffer(camera,lights,fog,material,geometryGroup,object) — 使用相机和正确的材料渲染模型组。
.render( scene,camera,renderTarget,forceClear ) — 使用相机渲染一个场景。
— 如果指定了renderTarget,则渲染到上面,否则渲染到通常的canvas上。
— 如果forceClear为true,颜色、深度和模板绘制缓冲将在渲染前被清除,即使渲染器的autoclear属性为false。
— 即使forceClear 设为true,仍然可以通过设置 .autoClearColor, .autoClearStencil, .autoClearDepth 属性为false来阻止特定的缓存被清除。
.readRenderTargetPixels( renderTarget,x,y,width,height,buffer ) — 从渲染目标中读取像素数据到给定的缓冲区中。缓存应该是一个js Uint8Array对象,通过new Uint8Array( renderTargetWidth * renderTargetWidth * 4 )来实例化,考虑大小和颜色信息。
.renderImmediateObject( camera,lights,fog,material,object ) — 使用相机渲染即时对象。
.setFaceCulling( cullFace,frontFace ) — 用于设定GPU中gl的fontFace和cullFace状态,从而启用或禁用渲染时的面剔除。
cullFace — back / front / front_and_back / false
frontFace — ccw / cw
.setTexture( texture,slot ) — 设置正确的纹理为webgl着色器的正确插槽。插槽可以作为一个值的均匀的采样。
texture — 需要设置的texture
slot — 纹理所要使用的槽slot编号。
.setRenderTarget( renderTarget ) — 设置当前渲染目标。如果参数被忽略,设置绘制的canvas为当前渲染目标。
.supportsCompressedTextureS3TC( ) — 如果WebGL支持S3TC格式的纹理压缩,返回true。
.getMaxAnisotropy( ) — 返回纹理的各向异性水平。
.getPrecision( ) — 获取着色器作用精度,返回 highp / mediump / lowp。
.clearTarget( renderTarget,color,depth,stencil ) — 清除渲染目标。
renderTarget — 需要被清除的renderTarget。
color — 如果设置,颜色被清除。
depth — 如果设置,深度被清除。
stencil —如果设置,模板被清除。
CanvasRenderer
Canvas渲染器不使用WebGL来绘制场景,使用相对较慢的Canvas 2D Context API。
构造函数:
var renderer = new THREE.CanvasRenderer();
在不确定浏览器是否支持WebGL渲染器的时候,可以通过以下代码来实现渲染器的选择:
function webglAvailable() { try { var canvas = document.createElement( 'canvas' ); return !!( window.WebGLRenderingContext && (canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) )); } catch ( e ) { return false; } } if ( webglAvailable() ) { renderer = new THREE.WebGLRenderer(); } else { renderer = new THREE.CanvasRenderer(); }注:WebGLRenderer 和 CanvasRenderer 都是使用HTML5中的 <canvas>直接内嵌在网页中。Canvas渲染器中的“Canvas”表明其使用Canvas 2D 而不是 WebGL。
Okay,Threejs 必备的3个组件总结完毕。