ThreeJs基础常识

作者：桑榆
QQ：934440653
有问题，评论留言，或qq联系

前两章的尚未整理，后续整理完成，会补上。

第一章 场景

待更新…

第二章 相机

待更新…

第三章 渲染器

1.参数

** 名称 **	** 描述 **
antialias	Boolean，默认为false。是否开启反锯齿。
precision	这个材质使用从摄像机到网格的距离来决定如何给网格上色。
alpha	Boolean，默认为false。是否可以设置背景色透明。
premultipliedAlpha	Boolean，默认为true。是否允许渲染器中的颜色具有alpha预乘的效果。
preserveDrawingBuffer	Boolean，默认为false。是否保存绘图缓冲，直到手动清除或覆盖。
stencil	Boolean，默认为true。绘图缓冲区是否具有至少8位的模板缓冲区。
depth	Boolean，默认为true。绘图缓冲区是否具有至少16位的深度缓冲区。
logarithmicDepthBuffer	Boolean，默认为false。是否使用对数深度缓冲区。

2.属性

** 名称 **	** 描述 **
.domElement	用来绘制输出的Canvas对象。通过构造函数中的渲染器自动创建，添加到网页中即可。
.context	从HTML5 canvas 中获取的用来绘图的WebGL渲染上下文。
.autoClear	定义渲染器是否应该在渲染之前自动清除其输出。
.autoClearColor	Boolean，默认为true。是否允许渲染器中的颜色具有alpha预乘的效果。
.preserveDrawingBuffer	如果autoClear为true，该属性用来定义渲染器是否需要清除颜色缓存，默认为true。
.autoClearDepth	如果autoClear为true，该属性用来定义渲染器是否需要清除深度缓存，默认为true。
.autoClearStencil	如果autoClear为true，该属性用来定义渲染器是否需要清除模板缓存，默认为true。
.sortObjects	定义渲染器是否需要对象排序，默认为true。 注：排序是用来试图正确的渲染具有一定程度透明度的对象。根据定义，排序对象可能在所有情况下都不工作。根据应用程序的需要，可能需要关闭该排序功能，使用其他方法处理透明渲染，比如手动确定物体的绘制顺序。
.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。

3.方法

.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所调用。

.renderBufferDirect( camera,lights,fog,material,geometryGroup,object ) — 使用相机和正确的材料渲染缓冲模型组。

.renderBuffer(camera,lights,fog,material,geometryGroup,object) — 使用相机和正确的材料渲染模型组。

.render( scene,camera,renderTarget,forceClear ) — 使用相机渲染一个场景。

.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状态，从而启用或禁用渲染时的面剔除。

.setTexture( texture,slot ) — 设置正确的纹理为webgl着色器的正确插槽。插槽可以作为一个值的均匀的采样。

.setRenderTarget( renderTarget ) — 设置当前渲染目标。如果参数被忽略，设置绘制的canvas为当前渲染目标。

.supportsCompressedTextureS3TC( ) — 如果WebGL支持S3TC格式的纹理压缩，返回true。

.getMaxAnisotropy( ) — 返回纹理的各向异性水平。

.getPrecision( ) — 获取着色器作用精度，返回 highp / mediump / lowp。

.clearTarget( renderTarget,color,depth,stencil ) — 清除渲染目标。

4.常用的render

var  renderer=new THREE.CanvasRenderer();     几何级别的渲染，兼容性更好

var renderer=new THREE.WebGLRenderer();       像素级的渲染，渲染效果更好

第四章 光源

选择“license server” 输入：http://idea.imsxm.com/

一、光源的种类

** 名称 **	** 描述 **
AmbientLight（自然光）	光源的颜色将会影响全局的每一个物体每一个面的颜色。该光源没有特别得来源方向，也不会产生阴影。
PointLight（点光源）	这个材质使用从摄像机到网格的距离来决定如何给网格上色。
SpotLight（聚光灯光源）	这是一种简单的材质，根据法向向量计算物体表面的颜色。
DirectionalLight（平行光源）	这是一个容器，可以为几何体的各个表面指定不同的材质。
HemisphereLight（半球光光源）	这是一种考虑光照影响的材质，用于创建暗淡的、不光亮的物体。
AreaLight（面光源）	这是一种考虑光照影响的材质，用于创建光亮的物体。
LensFlare（镜头炫光）	这种材质允许使用自定义的着色器程序，直接控制顶点的放置方式以及像素的着色方式。

二、基础光源

THREE.Color对象

当构建THREE.Color(color)对象时，color可以用十六进制字符串（#cccccc）或者十六进制数值。然而，在构想构造好后如果需要改变颜色，就不得不创建一个新的THREE.Color对象或者修改当前THREE.Color对象的内部属性。THREE.Color提供的函数包括:

函数名/描述

set(value)/将当前颜色改成指定的十六进制值。可以是字符串，也可以是数字

setHex(value)/将当前颜色指定为十六进制数值

setRGB(r, g, b)/根据提供的RBG设置颜色。参数范围0到1

setHSV(h, s, v)/根据提供的HSV值设置颜色。参数的范围从0到1

setStyle(color)/根据CSS值设置颜色

copy(color)/从提供的颜色对象复制颜色值到当前对象

convertGamaToLinear(color)/将当前颜色从伽马色彩空间转换到线性色彩空间

convertLinearToGamma(color)/将当前颜色从线性色彩空间转换到伽马色彩空间

getHex()/以十六进制形式从颜色对象中获取颜色值

getHexString()/以十六进制字符串形式从颜色对象中获取颜色值

getStyle()/以CSS值得形式从颜色对象获取颜色值

getHSV()/以HSV形式从颜色对象中获取颜色值

addColor(color)/将提供的颜色添加到当前颜色上

clone()/复制当前颜色

2.1 AmbientLight

1.参数

 var light = new THREE.AmbientLight( color : Integer, intensity : Float, distance : Number, decay : Float )

2.属性

** 名称 **	** 描述 **
color	光源的颜色
intensity	光源的强度
distance	光的照射距离
decay	光的衰减指数
visible	(是否可见)/如果设为true，该光源就会打开；如果设置为false，改光源就会关闭
position	(位置)/光源所在的位置

2.1 PointLight

1.参数

 var light = new THREE.PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )

2.属性

** 名称 **	** 描述 **
color	光源的颜色
intensity	光源的强度
distance	光的照射距离
decay	光的衰减指数
visible	(是否可见)/如果设为true，该光源就会打开；如果设置为false，改光源就会关闭
position	(位置)/光源所在的位置

2.1 SpotLight

1.参数

 var light = new THREE.SpotLight( color : Integer, intensity : Float, distance : Number, decay : Float )

2.属性

** 名称 **	** 描述 **
castShadow	(投影)/如果设置为true,光源生成阴影
target	决定光源的方向
angle	(角度)/光源射出的光柱有多宽。单位为弧度，默认值是Math.PI/3
exponent	光强衰减指数。使用 THREE.SpotLight 光源，发射的光线的强度随着光源距离的增加而减弱。exponent 属性决定了光线强度递减的速度。使用低值，从光源发出的光线将到达远处的物体，而使用高值，光线仅能到达非常接近 T
onlyShadow	仅阴影。如果此属性设置为 true，则该光源只生成阴影，而不会在场景中添加任何光照。
shadow.bias	用来偏置阴影的位置。当你使用非常薄的对象时，可以使用它来解决一些奇怪的效果。如果你看到奇怪的阴影效果，将该属性设置为很小的值（例如 0.01）通常可以解决问题。此属性的默认值为 0。

2.1 DirectionalLight

1.参数

 var light = new THREE.DirectionalLight( color : Integer, intensity : Float, distance : Number, decay : Float )

2.属性

** 名称 **	** 描述 **
position	光源在场景中的位置。
target	光源指向场景中的特定对象或位置
intensity	光源照射的强度。默认值：1
castShadow	投影。如果设置为 true，这个光源就会生成阴影
onlyShadow	仅阴影。如果此属性设置为 true，则该光源只生成阴影，而不会在场景中添加任何光照
shadow.map.height和shadow.map.width	阴影映射宽度和阴影映射高度。决定了有多少像素用来生成阴影。当阴影具有锯齿状边缘或看起来不光滑时，可以增加这个值。在场景渲染之后无法更改。两者的默认值均为：512

2.5调试射线

    //调试用射线显示
    directionalLight.castShadow = true;
    directionalLight.shadow.camera.near = 0.1;
    directionalLight.shadow.camera.far = 500;
    directionalLight.shadow.camera.left = -200;
    directionalLight.shadow.camera.right = 200;
    directionalLight.shadow.camera.top = 300;
    directionalLight.shadow.camera.bottom = -200;
    var helper = new THREE.CameraHelper(directionalLight.shadow.camera, 5);
    scene.add(directionalLight, helper); 

三、特殊光源

第五章 材质

一、属性

材质的种类

** 名称 **	** 描述 **
MeshBasicMaterial（网格基础材质）	基础材质，用于给几何体赋予一种简单的颜色，或者显示几何体的线框。
MeshDepthMaterial（网格深度材质）	这个材质使用从摄像机到网格的距离来决定如何给网格上色。
MeshNormalMaterial（网格法向材质）	这是一种简单的材质，根据法向向量计算物体表面的颜色。
MeshFaceMaterial（网格面材质）	这是一个容器，可以为几何体的各个表面指定不同的材质。
MeshLambertMaterial（网格 Lambert 材质）	这是一种考虑光照影响的材质，用于创建暗淡的、不光亮的物体。
MeshPhongMaterial（网格 Phong 式材质）	这是一种考虑光照影响的材质，用于创建光亮的物体。
ShaderMaterial（着色器材质）	这种材质允许使用自定义的着色器程序，直接控制顶点的放置方式以及像素的着色方式。
LineBasicMaterial（直线基础材质）	这种材质可以用于 THREE.Line（直线）几何体，用来创建着色的直线。
LineDashMaterial（虚线材质）	这种材质与 LineBasicMaterial（直线基础材质）一样，但允许创建出一种虚线的效果。

• THREE.MeshBasicMaterial 基础网格材质

  color

  wireframe

  wireframeLinewidth

  wireframeLinecap：线段端点如何显示。可选值有：butt（平）、round、square。默认是round。WebGLRenderer对象不支持该属性。

  wireframeLinejoin：线段连接点如何显示。可选值有：round、bevel（斜角）、miter（尖角）。默认是round。WebGLRenderer对象不支持属性。

  shading：着色模式。可选值：THREE.SmoothShading、THREE.FlatShading。

  vertexColors：为每个顶点定义不同的颜色。在CanvasRenderer对象中不起作用。

  fog：指示当前是否会受全局雾化效果设置的影响。

1.1 基础属性

这些属性是最常用的。通过这些属性，可以控制物体的不透明度、是否可见以及如何被引用（通过 ID 或者自定义名称）。

** 名称 **	** 描述 **
id（标识符）	用来识别材质，并在材质创建时赋值。第一个材质的值从 0 开始，每新加一个材质，这个值就增加 1。
uuid（通用唯一识别码）	这是生成的唯一 ID，在内部使用。
name（名称）	可以通过这个属性赋予材质名称，用于调试的目的。
opacity（不透明度）	定义物体的透明度。与 transparent 属性一起使用。该属性的赋值范围从 0 到 1。
transparent（是否透明）	如果该值设置为 true，Three.js 会使用指定的不透明度渲染物体。如果设置为 false，这个物体就不透明（只是着色更明亮些）。如果使用 alpha（透明度）通道的纹理，该属性应该设置为 true。
overdraw（过度描绘）	当你使用 THREE.CanvasRender 时，多边形会被渲染得稍微大一点。当使用这个渲染器渲染的物体有间隙时，可以将这个属性设置为 true。
visible（是否可见）	定义该材质是否可见。如果设置为 false,那么在场景中就看不到该物体。
side（侧面）	通过这个属性，可以定义几何体的哪一面应用材质。默认值为 THREE.FrontSide（前面），这样可以将材质应用到物体的前面（外侧）。也可以将其设置为 THREE.BackSide（后面），这样可以将材质应用到物体的后面（内侧）。或者也可以将它设置为 THREE.DoubleSide（双侧），可将材质应用到物体的内外两侧。 0=THREE.FrontSide正面显示 1=THREE.BackSide背面显示 2= THREE.DoubleSide双侧显示
needsUpdate（是否更新）	对于材质的某些修改，你需要告诉 Three.js 材质已经改变了。如果该属性设置为 true，Three.js会使用新的材质属性更新它的缓存。

** 属性 **	** 描述 **
color	设置材质的颜色
wireframe	是否将材质渲染成线框
wireframeLinewidth	如果设置了wireframe的值，则该属性则设置了线框的宽度，即线框的宽度
wireframeLinecap（线框的端点）	该属性定义了线框模式下端点的显示方式，有butt平，round圆，square方，但是在实际的应用中，该值很难看出效果，而且webglrenderer不支持该属性
wireframeLinejoin（线框线段连接点）	定义线段的连接点如何显示，webglrenderer不支持该属性
shading（着色方式）	THREE.SmoothShading平滑着色，和THREE.FlatShading平面着色，平面着色的话，每个面是什么颜色就会被渲染成什么颜色，而平滑着色的话可以使物体的表面看起来变的更光滑一些
vertexColors（顶点颜色）	可以通过该属性为每一个顶点定义不同的颜色，但是canvasRenderer不支持
fog（雾化）	当前材质是否会受全局雾化效果的影响
side（面）	该属性可以指定几何体的哪个面应用了材质，由于材质多应用于物体前面的面上，所以当旋转的时候，会有一部分时间是不可见的（其实是物体背面没有应用材质）side属性的值有front(只有物体的前面应用材质)和double（前后都应用材质）

2.2 融合属性

每个物体都有一系列的融合属性。这些属性决定了物体如何与背景融合。

** 名称 **	** 描述 **
blending（融合）	该属性决定物体上的材质如何与背景融合。一般的融合模式是 THREE.NormalBlending，在这种模式下只显示材质的上层。。
blendsrc（融合源）	除了使用标准融合模式之外，还可以通过设置 blendsrc、 blenddst 和 blendequation 来创建自定义的融合模式。这个属性定义了该物体（源）如何与背景（目标）相融合。默认值为 THREE.SrcAlphaFactor，即使用 alpha(透明度）通道进行融合。
blenddst（融合目标）	这个属性定义了融合时如何使用背景（目标），默认值为 THREE.OneMinusSrcAlphaFactor，其含义是目标也使用源的 alpha 通道进行融合，只是使用的值是 1（源的 alpha 通道值）。
blendequation（融合公式）	定义了如何使用 blendsrc 和 blenddst 的值。默认值为使它们相加（AddEquation）。通过使用这三个属性，可以创建自定义的融合模式。

3.高级属性

这些高级属性可以控制底层 WebGL 上下文对象渲染物体的方式。不过大多数情况下是不需要使用这些属性的。

** 名称 **	** 描述 **
depthTest	这是一个高级 WebGL 属性。使用这个属性可以打开或关闭 GL_DEPTH_TEST 参数。此参数控制是否使用像素深度来计算新像素的值。通常情况下不必修改这个属性。更多信息可以在 OpenGL 规范中找到。
depthWrite	这是另外一个内部属性。这个属性可以用来决定这个材质是否影响 WebGL 的深度缓存。如果你将一个物体用作二维贴图（例如一个套子），应该将这个属性设置为 false。但是，通常不应该修改这个属性。
polygonOffset polygonOffsetFactor polygonOffsetUnits	通过这些属性，可以控制 WebGL 的 POLYGON_OFFSET_FILL 特性。一般不需要使用它们。有关这些属性具体做什么的解释，可以参考 OpenGL 规范。
alphatest	可以给这个属性指定一个值（从 0 到 1）。如果某个像素的 alpha 值小于该值，那么该像素不会显示出来。可以使用这个属性移除一些与透明度相关的毛边。

二、简单网络材质

2.1 MeshBasicMaterial

1.简介

MeshBasicMaterial是一种非常简单的材质，这种材质不考虑场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形，而且也可以显示几何体的线框。

2.设置属性

Three.js除了可以设置共有的属性外，还可以设置以下属性：

** 名称 **	** 描述 **
color（颜色）	设置材质的颜色
wireframe（线框）	设置这个属性的可以将材质渲染成线框，非常适合调试
wireframeLinewidth（线框宽度）	如果已经打开了wirefreme，这个属性定义线框中线的宽度
wireframeLinecap（线框线段端点）	这个属性定义了线框模式下顶点键线段的端点如何显示。可选的值包括butt（平）、round（圆）和square（方）。默认值为round。在实际使用中，这个属性的修改结果很难看出来。WebGLRenderer对象不支持该属性。
wireframeLinejoin（线框线段连接点）	这个属性定义了线段的连接点如何显示。可选的值有round（圆）、bevel（斜角）和miter（尖角）。默认值为round。如果你在一个使用低透明度和wireframeLinewidth值很大的例子里靠近观察，就可以看到这个属性的效果。WebGLRenderer对象不支持该属性
shading（着色）	该属性定义如何着色。可选的值有THREE.SmoothShading、THREE.NoShading和THREE.FlatShading。默认值为THREE.SmoothShading，这将产生一个平滑的对象，看不到单个面
vertexColors（顶点颜色）	可以通过这个属性给每个顶点定义不同的颜色。默认值为THREE.NoColors。如果将这个值设置为THREE.VertexColors，渲染器会采用THREE.Geometry对象的colors属性的值。该属性对象CanvasRenderer不起作用，但对WebGLRenderer起作用
fog（雾化）	该属性指定当前材质是否受全局雾化效果设置的影响。默认true，如果设置为false，将不会受雾化的影响

3.使用案例

直接按照上一节的的两种方法中的一种方法创建实例化对象，设置相关属性即可。

var meshMaterial = new THREE.MeshBasicMaterial({color:0xeeefff});

2.2 MeshDepthMaterial

1.简介

使用THREE.MeshDepthMaterial材质的物体，其外观不是由光照或某个材质属性决定的，二十有物体到摄像机的距离决定的。可以将这种材质与其他材质结合使用，从而很容易地创建出逐渐消失的效果。

使用THREE.MeshDepthMaterial材质的物体，其外观不是由光照或某个材质属性决定的，二十有物体到摄像机的距离决定的。可以将这种材质与其他材质结合使用，从而很容易地创建出逐渐消失的效果。

摄像机的near属性和far属性之间的距离决定了场景的亮度和物体消失的速度。如果这个距离非常大，那么当物体远离摄像机时，只会稍微消失一点。如果这个距离非常小，那么物体消失的效果会非常明显。

2.相关属性

** 名称 **	** 描述 **
wireframe	该属性指定是否显示线框
wireframeLineWidth	该属性指定线框线的宽度

相机与物体距离小于near，不会显示出来；相机与物体距离大于far属性，物体落在相可视范围之外。物体与相机距离小于near，消失快；物体远离相机的过程中会一点点消失。

2.3 联合材质

//获取亮度
var cubeMaterial = new THREE.MeshDepthMaterial();
//获取颜色
var colorMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, blending: THREE.MultiplyBlending});
meshMaterial = [colorMaterial, cubeMaterial];
// 定义 cube 网格
cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, meshMaterial);
cube.children[1].scale.set(0.99, 0.99, 0.99); // 缩小 cubeMaterial 的网格对象，避免闪烁问题

注解：MeshBasicMaterial() ,必须transparent: true

​ 指定 blending 属性融合模式为 THREE.MultiplyBlending

​ 利用 THREE.SceneUtils.createMultiMaterialObject() 方法把前两种材质结合起来创建一种组合材质网格。其原理比较简单，这个方法创建时，会生成一个网格组，即一个网格采用 MeshDepthMaterial 材质，另一个网格采用 MeshBasicMaterial 材质，两个网格完全相同，只是材质不同而已。

2.4 MeshNormalMaterial

2.5 MeshFaceMaterial

1. 定义：新版 three.js 中已经不存在这种材质了，因为原则上来讲，旧版中的 MeshFaceMaterial 材质其实就是一个材质数组。举个例子，假如我们在场景中加入一个立方体，这个立方体上有六个面，你可以通过定义一个长度为六的材质数组来为每一个面单独指定一种材质（比如不同的颜色）即可。

   //实例
   var matArray = [];

   matArray.push(new THREE.MeshBasicMaterial({color: 0x009e60}));

   matArray.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));

   matArray.push(new THREE.MeshBasicMaterial({color: 0xffd500}));

   matArray.push(new THREE.MeshBasicMaterial({color: 0xff5800}));

   matArray.push(new THREE.MeshBasicMaterial({color: 0xc41e3a}));

   matArray.push(new THREE.MeshBasicMaterial({color: 0xffffff}));

   var cube = new THREE.Mesh(new THREE.BoxGeometry(3, 3, 3), matArray);

​

1. ​

三、高级材质

3.1 MeshLambertMaterial

1.简介

• 这种材质可以用来创建暗淡的并不光亮的表面。
• 无光泽表面的材质，无镜面高光。
• 这可以很好地模拟一些表面（如未经处理的木材或石头），但不能用镜面高光（如上漆木材）模拟光泽表面。
• 该材质非常易用，而且会对场景中的光源产生反应。
• 可以配置的前面的提高的属性：color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLinewidth、wireframeLinecap、wireframeLineJoin、vertexColors和fog。

1. 相关属性
   | ** 名称 ** | ** 描述 ** |
   |:----|:----?:----|:----?
   | ambient（环境色） | 这是材质的环境色。它跟上一章讲过的环境光源一起使用。这个颜色会与环境光提供的颜色相乘。默认值为白色。 |
   | emissive（发射的） | 这是该材质的发射的颜色。它其实并不像一个光源，只是一种纯粹的、不受其它光照影响的颜色。默认值为黑色 |
   | wrapAround | 如果这个属性设置为true，则启动半lambert光照技术。有了它，光下降得更微妙。如果网格有粗糙、黑暗的地区，启用此属性阴影将变得柔和并且分不更加均匀 |
   | wrapRGB | 当wrapAround属性设置为true时，可以使用THREE.Vector3来控制光下降得速度 |

3.简单使用

直接实例化一个THREE.MeshLambertMaterial的对象

var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});//实例化一个蓝色的材质

3.2 MeshPhongMaterial

1.简介

通过它可以创建一种光亮表面的材质效果。这种材质的属性基本跟 MeshLambertMaterial 暗淡材质一样，除此之外，我们列出 MeshPhongMaterial 材质中比较感兴趣的特有属性。

2.相关属性

** 属性 **	** 描述 **
ambient （环境光颜色）	同 MeshLambertMaterial 材质
emissive （自发光颜色）	同 MeshLambertMaterial 材质
specular （镜面反射光颜色）	此属性指定该材质的镜面反射光部分的颜色。如果将它设置成跟 color 属性相同的颜色，则会得到一种更加类似金属的材质；如果设置成 gray 灰色，材质将变得像塑料
shininess （镜面反射光强度）	此属性指定 specular 镜面反射光部分的亮度。默认值是 30

3.3 ShaderMaterial

1.简介

通过它，可以定义自己的着色器，直接在 WebGL 环境中运行。着色器可以将 three.js 中的 JavaScript 对象转换为屏幕上的像素。通过这些自定义的着色器，你可以明确指定你的对象如何渲染及遮盖，或者修改 three.js 库中的默认值。

接下来我们先看看 ShaderMaterial 可以设置的几个常用属性，大部分跟其他基础材质类似，有wireframe、wireframeLinewidth、flatShading、fog、vertexColors 等。

特别提一下vertexColors 属性，我们可以通过它为每一个顶点定义不同的颜色。它在 CanvasRenderer 下不起作用，只在 WebGLRenderer 下起作用。关于此属性可以参考后面提到的关于 LineBasicMaterial 的例子。

出上面提到的这些属性外，ShaderMaterial 还有几个特别的属性，使用它们你可以传入数据，定制你的着色器。但它们看起来不好理解，需要结合“GLSL 着色器语言”的相关知识，如下表所示：

2.相关属性

** 属性 **	** 描述 **
fragmentShader （像素着色器）	这个着色器定义的是每个传入的像素的颜色
vertexShader （顶点着色器）	这个着色器允许你修改每一个传入的顶点的位置
uniforms （统一值）	通过这个属性可以向你的着色器发信息。同样的信息会发到每一个顶点和片段
defines	这个属性的值可以转成 vertexShader 和 fragmentShader 里的 #define 代码。该属性可以用来设置着色器程序里的一些全局变量
attributes	这个属性可以修改每个顶点和片段。通常用来传递位置数据与法向量相关的数据。如果要用这个属性，那么你要为几何体中的所有顶点提供信息
lights	这个属性定义光照数据是否传递给着色器。默认值是 false

其中，最重要的部分就是：如果想要使用 ShaderMaterial 材质，就必须传入两个不同的着色器：

• vertexShader：它会在几何体的每一个顶点上执行。可以用这个着色器通过改变顶点的位置来对几何体进行变换；

• fragmentShader：它会在几何体的每一个像素上执行。在 vertexShader 里，我们会返回这个特定像素应该显示的颜色；

  到目前为止，我们讨论过的所有材质，three.js 库都会提供相应的 vertexShader 和 fragmentShader ，不必我们自己去定义。

3.4 线性几何体材质

1. THREE.LineBasicMaterial用于绘制线段的基础材质。
   (注:CanvasRenderer支持linewidth属性，WebGLRenderer不支持)

相关属性

** 名称 **	** 描述 **
color	该属性设置材质的颜色，如果设置了vertexColors，这是属性将被忽略
linewidth	设置线的宽度，默认值为1.0
linecap	这个属性定义了线框模式下顶点间线段的端点如何显示。可选的值包括butt（平）、round（圆）和square（方）。默认值为round。在实际使用中，这个属性的修改结果很难看出来。WebGLRenderer对象不支持该属性
linejoin	这个属性定义了线段的连接点如何显示。可选的值有round（圆）、bevel（斜角）和miter（尖角）。默认值为round。如果你在一个使用低透明度和很大wireframeLinewidth值的例子里靠近观察，就可以看到这个属性的效果。WebGLRenderer对象不支持该属性
vertexColors	将这个属性设置成THREE.VertexColors值，就可以给每个顶点指定一种颜色
fog	该属性指定当前材质是否受全局雾化效果设置的影响

简单使用

var material = new THREE.LineBasicMaterial( {
    color: 0xffffff,
    linewidth: 1,
    linecap: 'round', 
    linejoin:  'round' 
} );

2.LineDashedMaterial：跟 LineBasicMaterial 基本一样，但是通过指定短划线和间隔长度，可以创建出虚线效果；LineDashedMaterial 材质的线型是虚线而已。除了跟 LineBasicMaterial 拥有相同的属性外，它还有以下几个独特的属性：

** 属性 **	** 描述 **
scale （缩放比例）	缩放 dashSize 和 gapSize。如果 scale 小于 1，dashSize 和 gapSize 就会增大；反之，就会缩小
dashSize （短划线长度）	定义虚线短划线的长度
gapSize （间隔长度）	定义虚线间隔的长度

用法跟 LineBasicMaterial 基本一样，如下所示：

lines.computeLineDistances();
var lineMaterial = new THREE.LineDashedMaterial({
	vertexColors: true,
	color: 0xffffff,
	dashSize: 0.6,
	gapSize: 0.2,
	scale: 1.0 // 比例越大，虚线越密；反之，虚线越疏
});

唯一的区别就是，必须调用方法 computeLineDistances()。如果不调用，就不会显示出虚线效果。

var lines = new THREE.Geometry();
lines.computeLineDistances(); // 必须调用，否则不会有虚线效果

第六章 几何体

一、二维几何体

1.1 PlaneGeometry

var plane = new THREE.PlaneGeometry(width,height,widthSegments,heightSegments);

width: 必须，矩形宽度

height:必须，矩形高度

widthSegments:可选，指定矩形的宽度应该划分成几段。

heightSegments:可选，指定矩形的高度应该划分成几段。

二維图形为(x-y平面)——>(x-z)：mesh.rotation.x = -Math.PI/2; 网络模型沿x轴，向后旋转1/4圈(-PI/2)

1.2 CircleGeometry

基本属性：

radius：可选。默認50。

segments：可选。定义创建圆时所用的面的数量。最少3个，默认8个。值越大，越光滑。

thetaStart：可选。取值范围：0-2*PI ，默認是0

thetaLength：可选。默认2PI，表示圆要画多大，0.5PI表示1/4圆。

new THREE.CircleGeometry(3,12);//半径3，12个三角形组成的圆

new THREE.CircleGeometry(3,12,0,Math.PI);//半圆

1.3 RingGeometry

1.属性

** 属性 **	** 描述 **
innerRadius	圆环面内圆半径,默认初始化为0
outerRadius	圆心到圆弧，圆环面外圆半径,默认初始化为50
thetaSegments	圆环面圆周上的细分线(对角线段)段数,代表了圆环的圆度,最低的是3。默认值是8，数值越大越平滑
phiSegments	圆环面内圆到外圆方向上的细分线段数,最低的是1。默认值是8，由圆心到圆弧的分块，数值越大，圆面分块越多。
thetaStart	圆环面的起始角度,默认初始化为0
thetaLength	圆环面圆周弧长,默认初始化为Math.PI * 2

1.4 ShapeGeometry:自定义

1.属性

** 函数名 **	** 描述 **
moveTo(x, y)	将绘图点移动到指定的 x、y 坐标处
lineTo(x, y)	从当前位置（例如 moveTo 设定的位置）画一条线到指定的 x、y 坐标处
quadricCurveTo(cpx, cpy, x, y)（二次曲线）	此函数为二次曲线。你可以使用两种方法来画曲线：quadricCurveTo 或者 bezierCurveTo。这两种曲线的不同之处在于指定曲线曲率的方法不一样，如下图所示：https://blog.csdn.net/zhulx_sz/article/details/78799529对于二次曲线，除了指定结束点（x, y）外，还需要额外指定一个点（cpx, cpy）来控制曲线的曲率（不用指定起始点，因为路径的当前位置就是起始点）；对于三次曲线，除了指定结束点（x, y）外，还需要额外指定两个点（cpx1, cpy1, cpx2, cpy2）来控制曲线的曲率。
bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)（贝塞尔曲线）	此函数为三次曲线。相关说明参考上一行的二次曲线。
splineThru(vector2Array)	此函数沿着参数指定的坐标集合绘制一条光滑的样条曲线。其参数为一个 THREE.Vector2 对象数组。
arc(x, y, radius, startAngle, endAngle, clockwise)	次函数绘制一个圆或者一段弧。x, y 用来指定圆心与当前位置的偏移量。radius 设定圆的大小。而 startAngle 及 endAngle 则用来定义圆弧要画多长。布尔属性 clockwise 决定这段弧是顺时针画还是逆时针画。
absArc(x, y, radius, startAngle, endAngle, clockwise)	参考 arc 函数。只不过其指定的圆心位置是绝对位置，而不是相对当前位置的偏移量。
ellipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise)	参考 arc 函数。只是椭圆可以分别指定 x 轴半径及 y 轴半径。
absEllipse(x, y, radiusX, radiusY, startAngle, endAngle, clockwise)	参考 ellipse 函数。只不过其指定的圆心位置是绝对位置，而不是相对当前位置的偏移量。

二、三维几何体

1.1 BoxGeometry 立方体

BoxGeometry(width, height, dept, widthSegments, heightSegments, depthSegments)   

属性

** 属性 **	** 描述 **
width	必选。此属性定义方块的宽度。即方块沿 x 轴方向的长度
height	必选。此属性定义方块的高度。即方块沿 y 轴方向的长度
depth	必选。此属性定义方块的深度。即方块沿 z 轴方向的长度
widthSegments	可选。此属性定义方块沿 x 轴方向，将面分成的段数。默认值是 1
heightSegments	可选。此属性定义方块沿 y 轴方向，将面分成的段数。默认值是 1
depthSegments	可选。此属性定义方块沿 z 轴方向，将面分成的段数。默认值是 1

1.2 SphereGeometry 球体

SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength) 

• radius：球体半径
• widthSegments, heightSegments：水平方向和垂直方向上分段数。widthSegments最小值为3，默认值为8。heightSegments最小值为2，默认值为6。
• phiStart：从x轴开始绘制，水平方向上的起始角,默认值0 ,最大Math.PI * 2
• phiLenght：水平方向上球体曲面覆盖的弧度，默认Math.PI * 2
• thetaStart : 从y轴开始绘制，垂直方向上的起始角， 默认0 ,最大Math.PI
• thetaLength: 垂直方向是球体曲面覆盖的弧度，默认值为Math.PI(整个球体)
  | ** 属性 ** | ** 描述 ** |
  |:----|:----?:----|:----?
  | radius | 可选。此属性定义球体的半径。 |
  | widthSegments | 可选。此属性定义球体竖直（维度）方向上的分段数。默认值是 8，最小值是 3 |
  | heightSegments | 可选。此属性定义球体水平（经度）方向上的分段数。默认值是 6，最小值是 2 |
  | phiStart | 可选。此属性定义从 x 轴的什么地方开始绘制。取值范围是 0 到 2π |
  | phiLength | 可选。此属性定义从 phiStart 开始绘制多少。取值范围是 0 到 2π |
  | thetaStart | 可选。此属性定义从 y 轴的什么地方开始绘制。取值范围是 0 到 π |
  | thetaLength | 可选。此属性定义从 thetaStart 开始绘制多少。取值范围是 0 到 π。一个 π 是整球，0.5*π只绘制上半球 |

1.3 CylinderGeometry 圆柱

** 属性 **	** 描述 **
radiusTop	可选。此属性定义圆柱体顶部圆半径。默认值是 20
radiusBottom	可选。此属性定义圆柱体底部圆半径。默认值是 20
height	可选。此属性定义圆柱体的高度。默认值是 100
radiusSegments	可选。此属性定义圆柱体的上下部的圆截面分成多少段。默认值是 8
heightSegments	可选。此属性定义圆柱体竖直方向上分成多少段。默认值是 1
openEnded	可选。此属性定义圆柱体的顶部和底部是否为打开。默认值是 false

1.4 TorusGeometry 圆环

圆环面（TorusGeometry）的形状类似甜甜圈，其构造函数是：

THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)

SHU

** 属性 **	** 描述 **
radius	圆环半径，从圆环中心到圆环外呼弧的距离
tube	管道半径，管道横截面的半径
radialSegments	径向的分段数，每管道有多少个面，面数越多，横截面越远圆。
tubularSegments	管的分段数，管道横截面分段数，段数越短，圆环越圆
arc	圆环面的弧度，缺省值为Math.PI * 2

1.5 TrusKnotGeometry 环状扭结

1.属性

** 属性 **	** 描述 **
radius	可选。设置完整圆环的尺寸，默认是100，整体的放大缩小。
tube	可选。设置圆环管的半径。默认值是 40
radiusSegments	可选。设置圆环长度方向的分成的段数。默认值是 64
tubularSegments	可选。设置圆环宽度方向上的分段数，数值越大，横截面圆滑。默认值是 8
p	可选。定义扭结的形状，默认围2
q	可选。定义扭结的形状，默认围3
heightScale	可选。可拉伸环状扭结，默认值围1

1.6 PolyhedronGeometry 多面体

1.属性

** 属性 **	** 描述 **
vertices	必须。此属性定义构成多面体的顶点。
faces	必须。此属性定义由 vertices 中的点构成的面
radius	可选。此属性定义多面体，整体的大小。默认值是 1
detail	可选。此属性定义给多面体添加哪种额外细节。取值范围是大于等于 0。当设为 0 时，多面体的每一个面都不会有任何细节；为 1 时，每一个面多将再次分成 4 个小三角形表示；为 2 时，再次分隔的每一个面又会继续分成 4 个小三角形，以此类推，数值越大越接近球体，表面越光滑

1.7 lcosahedronGeometry

1.8 TetrahedronGeometry

1.9 OctahedronGeometry

1.10 DodecahedronGeometry

第七章 高级几何体和二次元操作

1.1 ConvexGeometry（凸面体）

1.2 LatheGeometry （扫描体）

1.定义：

它是从一条光滑的曲线开始创建图形，这条曲线是通过指定一些点（也叫节点）来定义的，而这条曲线通常也被称作样条曲线。当这条曲线围绕一个固定点选择时，就构成了一个类似花瓶或铃铛的图形

绕z轴旋转

2.语法：

LatheGeometry(points, segments, phiStart, phiLength) 

3.属性：

** 属性 **	** 描述 **
points	必选。此属性定义构成样条曲线的点，然后基于这条曲线生成类似花瓶或铃铛的图形
segments	可选。此属性定义构成图形时所需的分段数。默认值是 12
phiStart	可选。此属性定义构成图形时从圆的何处开始。取值范围是 0 到 2π。默认值是 0
phiLength	可选。此属性定义构成图形时有多完整。例如四分之一圆 0.5π。默认值是 2π（整圆 360°）

1.3 ExtrudeGeometry（拉伸体）

1.定义：

它是从一个二维图形创建出一个三维图形。譬如，我们可以先通过 THREE.Shap 对象，先创建一个二维的图形，然后通过 ExtrudeGeometry 将它拉伸为一个三维图形。也可以先通过 THREE.PlaneGeometry 对象创建一个二维平面，然后再利用 ExtrudeGeometry 进行拉伸。

2.属性：

** 属性 **	** 描述 **
amount（数量）	可选。此属性定义图形可以拉多高。默认值是 100
bevelThinkness（斜角厚度）	可选。此属性定义图形斜角的厚度。斜角是指前后面和拉伸体之间的倒角。默认值是 6
bevelSize（斜角尺寸）	可选。此属性定义图形斜角的高度。默认值是 bevelThickness - 2
bevelSegments（斜角分段数）	可选。此属性定义图形斜角的分段数。默认值是 3
bevelEnabled（是否启用斜角）	可选。此属性定义图形是否启用斜角。默认值是 true
curveSegments（曲线分段数）	可选。此属性定义图形拉伸时曲线分成多少份。默认值是 12
steps（拉伸体段数）	可选。此属性定义图形拉伸体被分成多少段
extrudePath（拉伸路径）	可选。此属性定义图形沿着什么路径拉伸。如果未指定，默认就会沿着 z 轴拉伸
frames	可选。此属性定义一种沿着 extrudePath 路径的每一步包含有 tangents, normals, binormals 数组的对象
UVGenerator（UV生成器）	可选。此属性定义一种提供UV生成器功能的对象

1.4 TubeGeometry（管状体）

属性：

** 属性 **	** 描述 **
path	必选。此属性定义一条类型为 THREE.SplineCurve 的路径，以便指定管道应当遵循的路径
tubularSegments	可选。此属性定义构建管道时沿路径方向所需的分段数。默认值是 64。一般路径越长，指定的分段数应该越多
radius	可选。此属性定义管道的半径。默认值是 1
radiusSegments	可选。此属性定义管道沿圆周方向的分段数。默认值是 8.数值越大，越圆滑
closed	可选。此属性定义管道的首尾是否会连接起来。默认值是 false

1.5 TextGeometry（三维文字）

1.语法

var geometry = new THREE.TextGeometry(text,options);

• 第一个参数是需要显示的字体
• 第二个参数是相关的配置项(属性)

2.属性

** 属性 **	** 是否必需 **	** 描述 **
font	是	新版本的字体是以json格式保存，我们需要通过异步加载进入页面，所以，必需在加载完字体以后才能够实例化。
size	否	该属性指定文本的大小。默认值为100
height	否	该属性指定拉伸的长度（深度）。默认值为50
weight	否	该属性指定字体的粗细。可选值包括normal和bold。默认值为normal。
style	否	该属性指定字体的样式。可选值包括normal和italic。默认值为normal
bevelThickness	否	该属性指定斜角的深度。斜角是前后面和拉伸体之间的倒角。该值定义斜角进入图形的深度。默认值为10。
bevelSize	否	该属性指定斜角的高度。默认值为8
bevelSegments	否	该属性定义斜角的分段数。分段数越多，斜角越平滑。默认值为3
bevelEnabled	否	如果这个属性设置为true，就会有斜角。默认值为false
curveSegments	否	该属性指定拉伸图形时曲线分成多少段。分段数越多，曲线越平滑。默认值为4
steps	否	该属性指定拉伸体被分成多少段。默认值为1
extrudePath	否	该属性指定图形沿着什么路径拉伸。如果没有指定，则沿着z轴拉伸
material	否	该属性定义的是前后面所用材质的索引。使用THREE.SceneUtils.createMultiMaterialObject函数来创建网格
extrudeMaterial	否	该属性指定斜角和拉伸体所用材质的索引。如果想给前后面使用单独的材质，使用THREE.SceneUtils.createMultiMaterialObject函数来创建网格
uvGenerato	否	当你给材质使用纹理时，UV映射确定纹理的哪一部分用于特定的面。使用uvGenerator属性，你可以传入自己的对象，该对象将为传入的图形创建的面创建UV设置。如果没有指定，则使用THREE.ExtrudeGeometry.WorldUVGenerator
frames	否	frenet框架用于计算样条曲线的切线、法线和副法线。在沿extrudePath拉伸几何体时会用到这个属性。你不需要指定它，因为Three.js提供了实现途径—THREE.TubeGeometry.FrenetFrames，它也被用作默认值。

1.6 ParametricGeometry（等式体）

1.定义：

使用THREE.ParametricGeometry可以根据传入的公式，计算出相应的几何体。这是一个很具有扩展性的几何体。

2.语法：

var geometry = new THREE.ParametricGeometry(function, slices, stacks);1

通过上面的方法，就可以创建出一个THREE.ParametricGeometry的几何体。相关的参数为：

3.属性

** 属性 **	** 是否必需 **	** 描述 **
function	是	该属性为一个函数，该函数以u、v值作为参数定义每个顶点的位置。需要返回THREE.Vector3的值
slices	是	该属性定义u值应该分成多少份
stacks	是	该属性定义v值应该分成多少份