three.js学习2

作者: 浮若年华_7a56 | 来源:发表于2023-02-17 16:45 被阅读0次

1.几何体

内置几何体
three.js的内置几何体大致可分为以下几类：

二维几何体
三维几何体
路径合成几何体
线性几何体

1-1.二维几何体

1-1-1.PlaneGeometry 矩形平面

PlaneGeometry(width,height,widthSegments,heightSegments)

width 平面沿着X轴的宽度，默认为1
height 平面沿着Y轴的高度，默认为1
widthSegments 宽度分段数，默认为1（可选）
heightSegments 高度分段数，默认为1,（可选）

分段数，3d中是没有曲线的，所有曲线都是由直线组成，想要曲线更加平滑，就需要更多的直线组成。所以，分段数越高物体就越平滑，模型就更加精细。

1676512002834.png

1-1-2.CircleGeometry圆型平面

CircleGeometry(radius,segments,thetaStar,thetaEnd)

radius 决定圆半径，默认50
segments 创建圆所用面的数量，最小为3，默认为8，数量越多圆越光滑
thetaStar 定义从哪开始画，范围是0-2Π，默认0
thetaEnd 定义圆从哪结束绘制，默认2Π(整圆)

1676611569766.png

1-1-3.RingGeometry环形（该对象可以在中心定义一个孔）

RingGeometry(innerRadius,outerRadius,thetaSegment,phiSegment,thetaStar,thetaLength)

innerRadius 圆环内半径，如果定义为0则不显示孔
outerRadius 外半径，它定义圆环的尺寸，指袁鑫到圆弧的距离，默认0
thetaSegment 定义创建圆所需要的对角三角形数量，默认为8，数量越多圆环越光滑
phiSegment 定义沿着圆环长度所需要线段的数量，该属性会增加面的数量，对平滑度没影响，默认为8
thetaStar 定义从哪开始画环，范围是0-2Π，默认0
thetaLength 该属性定义圆要多大，默认2 * PI（整圆），结合thetaStar使用

1676709499001.png

1-1-4.ShapeGeometry自定义图形

ShapeGeometry包含两个参数Shape对象（也可以是Shape数组）和一个options配置对象

THREE.SHAPE的绘图函数
THREE.ShapeGeometry中最重要的部分是THREE.Shape，它可以用来创建图形。所以下面介绍用来创建THREE.Shape的绘画函数

moveTo(x,y)该函数将绘图点移动到指定的x、y坐标处
lineTo(x,y)该函数从当前位置（例如由moveTo函数设定的位置）绘制一条线到指定的x和y坐标处
quadraticCurveTo(aCPx,aCPy,x,y)对于二次曲线，我们要额外指定一个点（使用aCPx和aCPy参数），曲线基于该点绘制，还需要指定端点（x,y参数），对于三次曲线（由bezierCurveTo函数绘制），需要多指定两个点才能定义曲线起始点是路径的当前位置
bezierCurveTo(aCPx1,aCPy1,aCPx2,aCPy2,x,y) 该曲线的绘制局域两个定义曲线的坐标(aCPx1和aCPy1,aCPx2和aCPy2)以及终点坐标(x和y)。起始点是路径的当前位置
splineThru(pts)该函数沿着提供的坐标集合pts绘制一条光滑曲线，这个参数是一个THREE.Vector2对象数组，起始点是路径的相对路径
arc(aX,aY,aRadius,aStartAngle,aEndAngle,aClockwise) 该函数用来画圆（或一段圆弧），圆弧起始于路径的当前位置，aX和aY用来指定于当前位置的偏移量，aRadius设置圆的大小，而aStartAngle和aEndAngle用来定义圆弧要画多长，布尔属性aClockwise决定这段圆弧是顺时针画还是逆时针画
absarc(aX,aY,aRadius,aStartAngle,aEndAngle,aClockwise)该函数与arc一样用来画圆，只不过其位置是绝对位置，而不是相对于当前的位置
ellipse(aX,aY,aRadius,aStartAngle,aEndAngle,aClockwise)参考arc的描述，作为补充，通过ellipse函数可以指定x轴半径和y轴半径
absEllipse(aX,aY,aRadius,aStartAngle,aEndAngle,aClockwise)该函数与ellipse描述一样，其位置是绝对位置，而不是相对位置
fromPoints(vectors) 给该函数传入一个THREE.Vector2或THREE.Vector3的对象数组，three.js会创建一条通过提供的顶点使用直线绘制的路径
holes 属性中包含一个THREE.Shape对象数组，这个数组的每一个对象会渲染成一个孔

1676940655230.png

1-2.三维几何体

1-2-1.BoxGeometry（指定宽度、高度和深度就可以创建一个长方体）

属性

width 宽度，沿x轴方向的长度
height 高度，沿y轴方向的长度
depth 深度，沿z轴方向的长度
widthSegment 沿x轴方向将面分成多少份，默认1
heightSegment 沿y轴方向将面分成多少份，默认1
depthSegment 沿z轴方向将面分成多少份，默认1

1676942189835.png

1-2-2.SphereGeometry三维球体

属性

radius 设置球体半径，默认50
widthSegment 指定竖直方向的分段数，段数越多球体越光滑，默认为8，最小为3
heightSegment 指定水平方向的分段数，段数越多球体越光滑，默认为6，最小为2
phiStart 指定从x轴什么方向开始绘制球体，范围0-2*PI，默认0
phiLength 指定从phiStart开始画多少。2PI是整球，默认2PI
thetaStart 指定从Y轴什么方向开始绘制球体，范围0-PI，默认0
thetaLength 指定从thetaStart开始画多少，PI是整球，默认PI

1676961881452.png

1-2-3.CylinderGeometry（圆柱几何体）

属性

radiusTop 圆柱顶部尺寸，默认20
radiusBottom 圆柱底部尺寸，默认20
height 圆柱高度，默认100
radialSegments 沿圆柱半径分为多少份，越多越光滑，默认8
heightSegments 沿圆柱高分为多少份，越多意味着面越多，默认1
openEnded 圆柱顶部和底部是否封闭，默认false
thetaStart 指定从x轴什么方向开始绘制球体，范围0 - 2 * PI，默认0
thetaLength 决定圆柱有多少面被绘制，2PI时绘制完整圆柱面，默认2PI
1677218846815.png

1-2-4.ConeGeometry(圆锥几何体)

radius 圆锥半径
height 圆锥高度，默认100
radialSegments 沿圆锥半径分为多少份，越多越光滑，默认8
heightSegments 沿圆锥高分为多少份，越多意味着面越多，默认1
openEnded 圆锥顶部和底部是否封闭，默认false
thetaStart 指定从x轴什么方向开始绘制球体，范围0 - 2 * PI，默认0
thetaLength 决定圆锥有多少面被绘制，2PI时绘制完整圆锥面，默认2PI
1677220068906.png

1-2-5.TorusGeometry(圆环几何体)

属性

radius 圆环尺寸，默认100
tube 圆环(管)半径，默认40
radiusSegments 沿圆环长度方向分成的段数，默认8
thbularSegments 沿圆环宽度方向分成的段数，段数越多越光滑，默认6
arc 控制是否绘制完整的圆环，默认2 * PI

1677545387233.png

1-2-6.TorusKnotGeometry(环状扭结几何体)

属性

radius 完整的圆环尺寸，默认100
tube 圆管半径
radiusSegments 沿环状扭结宽度方向分成的段数，越多越平滑
tubularSegments 沿环状扭结宽度方向分成的段数，越多越平滑
p 扭结形状，默认2
q 扭结形状，默认3
heightScale 拉伸环状扭结，默认1

1677568265751.png

1-2-7.PolyhedronGeometry(多面几何体)

属性

vertices 设置构成多面体的顶点
indices 设置由vertices创建出的面
radius 设置多面体的大小
detail 为多面体添加额外的细节，如果为1，则多面体的每个三角形都会分为4个小三角，2则会分为16个，以此类推

1677571251256.png

1-2-8.IcosahedronGeometry

该几何体创造一个有20个相同三角形的多面体，只需要指定radius和detail值即可

1677636335566.png

1-2-9.TetrahedronGeometry

该几何体创建一个四面体，该多面体只包含四个顶点创建的四个三角形面，只需要指定radius和detail值即可

1677637557495.png

1-2-10.OctahedronGeometry

该几何体创建一个八面体，由六个顶点创建而出，只需要指定radius和detail即可

1677637983458.png

1-2-11.DodecahedronGeometry

该几何体创建一个十二面体，只需要指定radius和detail即可

1677639518923.png

1-3.路径合成几何体

1-3-1.TubeGeometry管道

该几何体可以沿着一条三维样条线拉伸出根管
TubeGeometry(path,tubularSegments,radius,radialSegments,closed)

path ——Curve 一个由基类Curve继承而来的3D的路径
tubularSegments —— Integer 组成这一管道的分段数，默认值为64
radius —— Float 管道的半径，默认值为1
radialSegments —— Integer 管道横截面的分段数目，默认值为8
closed —— Boolean 管道的两端是否闭合，默认值为false

1677655893786.png

1-3.2.LatheGeometry车削

LatheGeometry允许你从一条光滑的曲线创建图形，这条曲线由多个点定义，我们称之为样曲线，并且这条曲线绕着物体的中心Z轴旋转，你把曲线勾勒成什么形状，那么LatheGeometry就可以生成什么样的面
LatheGeometry(points,segments,phiStart,phiLength)

points —— 一个Vector2对象数组，每个点的x坐标必须大于0（构成样曲线的点集合）
segments —— 要生成的车削几何体圆周分段的数量，默认值是12,越高越光滑
phiStart —— 以弧度表示的起始角度，默认为0
phiLength —— 车削部分的弧度（0-2PI）范围，2PI将是一个完全闭合的，完整的车削几何体，小于2PI是部分的车削，默认值是2PI

1677658875382.png

1-3-3.ExtrudeGeometry挤压

ExtrudeGeometry(shapes,options)

shapes —— 形状或一个包含形状的数组
options —— 一个对象，包含对物体挤压的设置有下列参数
- steps —— int 用于沿着挤出样条的深度细分的点的数量，值越大，单个面越多
- depth —— float 挤出的形状的深度
- bevelEnabled —— bool 对挤出的形状应用是否斜角
- bevelThickness —— float 斜角与原始形状上斜角的厚度
- bevelSize —— float 斜角与原始形状轮廓之间的延伸距离
- bevelOffset —— float 斜角从形状轮廓开始的距离
- bevelSegments —— int 斜角的分段层数
- extrudePath —— THREE.Curve对象。一条沿着被挤出形状的三维样条线，该属性指定图形沿着什么路径拉伸，没有指定则图形沿着z轴拉伸
- UVGenerator —— object，提供了UV生成器函数的对象，当你给材质使用纹理时，UV映射确定纹理的哪一部分用于特定的面。使用UVGenerator属性，你可以传入自己喜欢的对象，该对象将为传入的图形创建UV设置，如果没有指定，则使用THREE.ExtrudeGeometry.WorldUVGenerator

该对象可以将一个二维形状挤成一个三维几何体
当使用这个几何体创建Mesh的时候，如果希望分别对它的表面和它挤出的侧面使用单独的材质，可以使用一个材质数组，第一个材质用于其表面，第二个材质将用于其挤压出的侧面

1677721368575.png

1-4.线性几何体

线性几何体其实就是用线显示几何体的方式

1-4-1.WireframeGeometry网格几何体

网格几何体：把网格中的三角面用三角显来显示
WrieframeGeometry(geometry)

geometry —— 任意几何体对象

1-4-2.EdgesGeometry(geometry,thresholdAngle)

geometry —— 任何一个几何体对象
thresholdAngle —— 仅当相邻面的法线之间的角度超过这个值时，才会渲染边缘，默认值为1
边缘几何体和网格几何体差不多，但是边缘几何体当两个面的法向量长度差不多时，会把2个面重合的那条边删掉，所以边缘几何体的线会少一点

1-5.其他几何体

1-5-1.ConvexGeometry（凸面几何体）

我们随机创建若干个点，传入ConvexGeometry中，那么它就会根据这些点，生成一个三维图形，折干三维图形，就是这些点能够生成的最小的三维图形

1-5-2.ParmetricGeometry参数化缓冲几何体（需要从three/examples/jsm/geometries/ParametricGeometry.js引入）

ParmetricGeometry可以让你创建基于等式的几何体

function 该属性为一个函数，该函数以u、v值作为参数定义每个顶点的位置，返回值为THREE.Vector3
slices 该属性定义u值应该分成多少份

stacks 该属性定义v值应该分成多少份

const planeFn =function(u,v,target){
  const result = target || new Vector3()
  const x = u * 10
  const y = 0
  const z = v * 10
  return result.set(x, y, z)
}
const planeGeometry = new ParametricGeometry(planeFn, 10, 10)
const meshMaterial  = new MeshNormalMaterial({flatShading:true,side:DoubleSide})
const wireFrameMat = new MeshBasicMaterial()
wireFrameMat.wireframe = true

// 将两种材质都赋给几何体
const mesh = createMultiMaterialObject(planeGeometry,[meshMaterial, wireFrameMat])
scene.add(mesh)

1677736051095.png

1-5-3.TextGeometry三维文本

TextGeometry(text,options)
options配置项

size该属性指定文本的大小，默认值为100
height 该属性指定拉伸的的长度(深度)，默认值为50
font指定字体名称(必填)
weight 该属性指定字体的粗细，值包括normal和bold，默认为normal
bevelThickness 该属性指定斜角的深度，斜角是前后面和拉伸体之间的倒角，该值定义斜角进入图形的深度
bevelSize 该属性指定斜角的高度
bevelSegments 该属性定义斜角的分段数，分段数，分段数越多，斜角越光滑
bevelEnabled 设置为true，就会有斜角
curveSegments 该属性指定拉伸图形时曲线分成多少段，分段数越多。曲线越平滑
steps 该属性指定拉伸体被分成多少段
uvGenerato 当你给材质使用纹理时，UV映射确定纹理的哪一部分用于特定的面。使用uvGenerator属性，你可以传入自己的对象，该对象将为传入的图形创建的面创建UV设置。如果没有指定，则使用THREE.ExtrudeGeometry.WorldUVGenerator

1677745013760.png

2.光源

2-1.AmbientLight基本光源

该光源的颜色将会叠加到场景现有物体的颜色上，该光源没有特别的来源方向，也不会产生阴影，通常与其他光源一起使用，目的是弱化阴影或给场景中添加额外的颜色

2-2.PointLight 点光源

一种单点发光，照射所有方向的光源
属性

color 光源颜色
distance 光源照射距离，默认为0，意味着光的强度不会因为距离而减弱
intensity 光的照射强度
position 光源所在场景中的位置
visible true光源打开，false光源关闭
decay 光源强度会随着离开光源距离而衰减，建议设置值为2，更接近现实。默认为1，当WebGLRenderer的属性physicallyCorrectLights(物理正确光源)设置为启动时，decay才会生效
power WebGLRenderer的属性physicallyCorrectLights(物理正确光源)设置为启动时，该属性指定光源的功率，默认值为4 * Math.PI

2-3.SpotLight 聚光灯光源

该光源，是一种锥形的光源效果，该光源具有方向和角度

angle （角度）光源发射出光的宽度，单位是弧度，默认值为Math.PI / 3
caseShadow（投影）设置为true就会产生阴影
decay（衰减）光源强度会随着光源距离而衰减，建议设置为2，更接近现实，默认为1，当WebGLRenderer的属性physicallyCorrectLights(物理正确光源)设置为启动时，decay才生效
distance 光源照射距离。默认为0，意味着光线不会因为光线距离而衰减
intensity 光源的照射强度，默认为1
penumbra（半影区）该属性设置聚光灯的锥形照明区在其他区域边缘的平滑衰减速度，取值范围0-1，默认为0
position 光源在场景中的位置
power（功率）物理正确光源启动时，该属性指定光源的功率
traget 设置光源的指向，可以指定场景中的特定对象或位置，传值必须为一个Object3D对象
visible true光源打开 false 光源关闭

当castShadow启动时，可以设置阴影特效属性

shadow.bias用来偏移阴影的位置，属性默认为0
shadow.camera.far 到距离光源的哪个位置可以产生阴影，默认为5000
shadow.camera.fov 设置阴影生成视场的大小，默认50
shadow.camera.near 到距离光源的哪个位置开始产生阴影，默认为50
shadow.mapSize.width和shadow.mapSize.height 决定用多少像素来产生阴影
shadow.radius 大于1时，阴影边缘将会有平滑效果

2-4.DirectionalLight（平行光）

该光源也被称为无限光，该光源的光线是平行的，也就是说物体的每一个区域接收到的入射角是相同的

target 平行光的方向是从它的位置到目标位置
shadow
position
castShadow

2-5.HemisphereLight

这是一个特殊的光源，可以通过模拟反光面，和光线微弱的天空，来创建出更加自然的室外光

groundColor从地面发出的光线的颜色
color 从天空发出的光线的颜色
intensity 光线照射的强度

2-6.RectAreaLight

该光源可以指定散发光线的平面，而不是一点，该光源的主要应用场景是模拟明亮的窗户或条状灯光光源，不支持阴影

2-7.LensFlare（镜头光晕）

textture 纹理图片，决定光晕的形状
size 光晕大小，如果负数的话，将使用它本身大小
distance 光源（0）到摄像机（1）的距离
color 光晕的颜色

3.材质

材质的基类为THREE.Material。它内部定义材质的公有属性，这些属性可以分为三类：
基础属性（控制物体不透明度、是否可用、自定义名称或者ID等）、融合属性（物体如何与背景融合）、高级属性（控制底层WEBG上下文对象渲染物体的方式）
基础属性：

id 标识符
uuid 唯一通用识别码
name 自定义材质名称
opacity 在0-1范围内的浮点数，表明材质的透明度，如果材质的transparent属性未设置true，则材质保持完全不透明
transparent 定义此材质是否透明，默认为false
overdraw 当使用THREE.CanvasRender时，多边形会被渲染的稍微大些，当使用这个渲染器渲染的物体有间隙时，可以设置为true
visible 此材质是否可见
side 定义将要渲染哪一面，可选项有前面（FrontSide），背面（BackSide）或两者（DoubleSide），默认为前面
needsUpdate 指定需要重新编译材质，实例化新材质时，此属性自动设置为true
colorWrite 为false，具有该材质的物体不会被真正绘制到场景该物体不可见，其他物体被遮挡的部分也2不可见
flatShading 定义材质是否使用平面着色进行渲染，默认值为false
lights 材质是否受到光照的影响，默认为true
premultipliedAlpha 是否预乘alpha（透明度）值，默认false
dithering 是否采用颜色抖动模式，该模式可以一定程度减少颜色不均匀问题，默认false
shadowSide（投影面）定义投影的面，设置时，可以是THREE.FrontSide，THREE.BackSide，或Materials。默认值为null，如果为null，则面投射阴影确定如下：THREE.FrontSide背面THREE.BackSide前面THREE.DoubleSide双面
vertexColors（顶点颜色）可以为物体的每一个顶点指定特有颜色，是否使用顶点着色，默认值为THREE.NoColors，其他选项有THREE.VertexColors和THREE.FaceColors
*for 材质是否受雾影响，默认为true

融合属性

blending决定物体材质如何与背景融合，一般融合模式为THREE.NormalBlending，这种模式下只显示材质的上层
blendSrc混合源，默认值为THREE.SrcAlphaFactor
blendSrcAlpha blendSrc的透明度，默认值为null
blendDst 定义了融合时使用何种背景（目标），默认为THREE.OneMinusSrcAlphaFactor，其含义是目标也使用源的alpha通道进行融合，只是使用的值为1
blendDstAlpha 为blendDst指定的透明度，默认null
blendEquation 使用混合时所采用的混合方程式，默认值会使它们相加，也可以创建自定义融合模式

高级属性

depthTest 是否在渲染此材质时启用深度测试，默认为true
depthWrite 渲染此材质是否对深度缓冲区有任何影响，默认为true，在绘制2D叠加时，将多个事物分层在一起而不创建z-index时，禁用深度写入会很有用
depthFunc 使用何种深度函数，默认为LessEqualDepth
polyonOffset 是否是用多边形偏移
polygonOffsetFactor 设置多边形偏移系数，默认值为0
polygonOffsetUnits 设置多边形偏移单位
alphaTest 设置运行alphaTest时要使用的alpha值，如果不透明度低于此值，则不会渲染材质，默认为0
precision 重写此材质渲染器的默认精度。可以是highp，mediump或lowp。默认值为null

MeshBasicMaterial、MeshDepthMaterial、MeshNormalMaterial属于简单的网格材质

3-1.MeshBasicMaterial基础材质

基础材质，可显示几何体线框，可赋予简单的颜色，该材质不用考虑场景中光线的影响，使用该材质的网格会被渲染成简单的平面图多边形，而且可以显示几何体的线框

特有属性：

color 设置材质颜色
wrireFrame 讲几何体渲染为线框，默认值为false
wireframeLinewidth 控制线框宽度，默认值为1
wireframeLinecap 定义线两端的外观，可选值为butt，round和square。默认为round
wireframeLinejoin 定义线连接节点的样式，可选值为round，bevel和miter。默认为round

3-2.MeshDepthMaterial网格深度材质

一种按照深度绘制几何体的材质，深度基于相机远近平面，白色最近，黑色最远

属性：

wireFrame 是否显示线框
wireFrameLineWidth 指定线框的宽度（只对CanvasRenderer有效）

3-3.MeshNormalMaterial网格发现材质

THREE.MeshNormalMaterial一种把法向量映射到RGB颜色的材质，该材质拥有的属性同MeshDepthMaterial相同

注：法向量，是指面垂直的向量，它可以有助于决定光的反射，有助于将纹理映射到三维模型，并提供如何计算光照、阴影和为表面像素着色的信息

3-4.MeshLambertMaterial（网格Lambert材质）

一种非光泽表面的材质，没有镜面高光，用于创建暗淡的物体
属性：

color 材质的环境色
emissice 材质的自发光颜色，该属性不会使物体成为光源，但是它的颜色也不会受到其他光源的影响，默认值为黑色

3-4.MeshPhongMaterial（网格Phong材质）

一种具有镜面高光的光泽表面的材质
属性：

color 材质的环境光，它会余环境光相乘，默认是白色
emissive 材质的自发光颜色，该属性不会使物体成为光源，但是它的颜色也不会受其他光源的影响，默认值为黑色
specular 指定材质的光亮程度及高光部分的颜色，如果它的颜色与color一致，会显示出金属的效果，设置成灰色（grey），则更像塑料
shininess 指定物体表面镜面高光部分的轮廓清晰程度，越光滑的表面，高光部分越清晰，反之越模糊，该属性默认值为30

3-5.MeshStandardMaterial（网格标准材质）

一种基于物理的标准材质，使用Metallic-Roughness工作流程。它可以计算表面与光线的正确互动关系，从而使渲染出来的物体更加真实
特有属性：
metaIness（金属感程度）0代表完全塑料质感，1代表完全金属质感，默认0.5
roughness（粗糙程度）控制物体表面的粗糙程度，默认0.5,0时产生镜面反射，1时产生漫反射

3-6.MeshPhysicalMaterial（网络物体材质）

该材质与MeshStandardMaterial非常相似，但是提供了对反光度的更多控制属性

clearCoat（清漆）清漆效果的明显程度从0-1，默认为0
clearCoatRoughness （清漆粗糙度）与clearCoat配合使用，从0-1，默认值为0
reflectivity （反光度）控制非金属表面反光度，从0-1，默认为0.5

3-7.MeshToonMaterial（网格卡通材质）

M3eshPhongMaterial卡通着色的扩展

3-8. ShadowMaterial（阴影材质）

此材质可以接收阴影，但在其他方面完全透明

3-9.ShaderMaterial（着色器材质）

允许使用自定义着色器材质，直接控制顶点的放置方式和像素的着色方式

基础属性：

wireframe 是否渲染成线框
wireframeLinewidth 定义线框宽度
linewidth 定义描绘线的宽度
shading 定义如何着色可选属性有THREE.SmoothSjading和THREE.FlatShading
vertexColors 为每个顶点定义不同颜色
fog 是否接受雾化效果影响

高级属性：

fragmentShader 这个着色器定义每个传入像素的颜色，需要传入像素着色器字符串
vertexShader 允许你修改每一个传入顶点的位置，需要传入顶点着色器程序字符串
uniforms 通过这个属性可以向你的着色器发信息，信息会发给每一个顶点的片段
attributes 该属性可以修改每个顶点和片段。通常用来传递位置数据和法向量数据。如果要用这个属性，那么需要你为几何体中每个顶点提供信息
defines 转换成#define代码片段。这些片段可以用来设置着色器中的一些额外的全局变量
lights 定义光照属性是否传递给着色器，默认false

什么是着色器？
着色器是webGL的主要组件之一，着色器是一种使用GLSL（OpenGL Shading Language）编写并在GPU上原型的程序。它们被用于定位几何体的每个顶点，并为该几何体的每个可见像素着色着色器·分为两种

顶点着色器Vertex Shader

顶点着色器（vertex Shader）的作用是定义几何体的顶点。其思想是发送顶点位置、网格变换（如定位position、旋转rotation和缩放scale）、摄像机信息（如定位position、旋转rotation和视野fov），然后，GPU将按照顶点着色器中的指示处理所有这些信息，以便将顶点投影到2D空间，该空间将成为我们的渲染render，也就是我们的画布canvas

使用顶点着色器时，其代码将应用于几何体的每个顶点，但有些数据会在每个顶点之间发生变化，这种类型的数据（在顶点之间变化的数据）称为attribute属性变量

有些数据不需要像网格位置那样变换，用于对同一组顶点组成的单个3D物体中所有顶点都相同的变量，这种（顶点之间不发生变换的数据）称为uniform统一变量

顶点着色器会首先触发。当放置完顶点后，GPU会知道几何体的哪些像素是可见的，然后接下去使用片元着色器

片元着色器Fragment Shader

片元着色器的作用是为几何体的每个可见片元（像素）进行着色
片元着色器可以通过使用uniform将数据和着色器发送至GPU，之后 GPU就会按照指令对每个片元进行着色

从顶点着色器发送到片元着色器中的插值计算数据被称为varying

3-10.LineBasicMaterial（直线基础材质）

一种用于绘制线框样式几何体的材质，可用于THREE.Line几何体，创建着色的直线
属性：

color 定义线的颜色
lineWidth 线段宽度butt
lineCap 定义线两端的样式。可选值为butt，round和square，默认值为round（2d属性，无法3D渲染）
lineJoin 定义线连接节点的样式。可选值为round，bevel和miter，默认为round（2d属性，无法3D渲染）
vertexColors 将这个属性设置成THREE.VertexColors值，就可以为每个顶点指定一个颜色

3-11.LineDashedMaterial（虚线材质）

一种用于绘制虚线样式几何体的材质
该材质属性于THREE.LineBasicMaterial相同，只是多了几个属性

scale 缩放dashSize和gapSize，如果scale小于1，dashSize和gapSize会增大，反之会减小
dashSize 虚线段的长度
gapSize 虚线段的间隔