【three.js】模型-几何体Geometry,材质Material

模型

在现实开发中，有时除了需要用代码创建模型之外，多数场景需要加载设计师提供的使用设计软件导出的模型。此时就需要使用模型加载器去加载模型，不同格式的模型需要引入对应的模型加载器，虽然加载器不同，但是使用方式基本上是相同的。下面就是使用 OBJLoader 加载 .obj 格式模型的过程

var loader = new THREE.OBJLoader();
loader.load(model, function (object) {
  object.traverse(function (child) {
    if (child.isMesh) {
      // 对模型子网格的一些操作
    }
  });
  scene.add(object);
});

模型对象主要包括点模型（Points）、线模型（Line）、网格模型（Mesh）等，它们的父类都是Object3D。这意味着可以对这些模型进行旋转、缩放、平移等操作。这些操作通常通过修改模型的属性（如位置position、缩放scale等）或使用相关方法（如translateX、rotateY等）来实现。

点模型（Points）：点模型是由几何体的每一个顶点数据渲染为一个方形区域构成的，方形区域的大小可以设置。通常使用点材质（PointsMaterial）来渲染点模型。

线模型（Line）：线模型是使用线条去连接几何体的顶点数据构成的。根据顶点的连接方式，线模型可以分为闭环线渲染（LineLoop）和间断性渲染（LineSegments）等类型。

网格模型（Mesh）：网格模型是由三个顶点确定一个三角形，通过三角形面绘制渲染几何体的所有顶点，通过一系列的三角形拼接出来一个曲面构成的。如果设置网格模型的wireframe属性为true，所有三角形会以线条形式绘制出来。网格模型通常与各种网格材质（如MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等）一起使用。

Three.js 支持的模型格式：3ds (.3ds)、amf (.amf)、3mf (.3mf)、assimp & assimp2json (.assimp |.json)、awd (.awd)、Babylon (.babylon)、BVH (.bvh)、Collada(.dae |.xml)、OpenCTM (.ctm)、draco(.drc)、FBX(.fbx)、GCode (.gcode)、glTF (.gltf)、Clara(.json)、KMZ(.kmz)、LDraw(.mpd)、LightWave(.lwo)、MD2 (.md2)、MMD(.pmd | .vmd)、nrrd (.nrrd)、obj/obj2 (.obj)、pcd (.pcd)、PDB(.pdb)、PlayCanvas(.json)、ply (.ply)、prwm(.prwm)、sea3d(.sea3d)、stl(.stl)、vrm(.vrm)、vrml(.vrml)、vtk、x等

一、几何体

二维几何体模型

PlaneGeometry（平面几何体）

**描述：**平面是一个二维的几何体，在three.js中常用于常见地板或背景

PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)

width --- 平面沿着 X 轴的宽度。默认值是 20。

height --- 平面沿着 Y 轴的高度。默认值是 20。

widthSegments --- （可选）平面的宽度分段数，默认值是 30。

heightSegments --- （可选）平面的高度分段数，默认值是 30。

const geometry = new THREE.PlaneGeometry(20, 20, 30, 30); 
// 创建一个宽度和高度均为5，水平和垂直分段数均为32的平面
const material = new THREE.MeshBasicMaterial({ 
    color: 0xffffff, 
    side: THREE.DoubleSide 
}); // 创建一个白色基本材质，并设置双面渲染
const plane = new THREE.Mesh(geometry, material); 
// 将几何体和材质组合成一个网格对象
scene.add(plane); 
// 将网格对象添加到场景中

CircleGeometry（圆形几何体）

创建圆形平面，如圆形的标志、按钮或其他平面圆形物体

new THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)

radius：圆的半径，默认为1。

segments：沿着圆周的分割段数，默认为8。更大的分割段数会使圆形看起来更平滑。

thetaStart：起始角（弧度），默认为0。可以用来创建一个不完整的圆形。

thetaLength：圆弧的角度长度（弧度），默认为2 * Math.PI（完整圆形）。可以用来创建一个扇形或不完整的圆形。

CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)

radius --- 圆形的半径，默认值为12

segments --- 分段（三角面）的数量，最小值为3，默认值为32。

thetaStart --- 第一个分段的起始角度，默认为0。（three o'clock position）

thetaLength --- 圆形扇区的中心角，通常被称为"θ"（西塔）。默认值是2*Pi，这使其成为一个完整的圆。

// 创建一个基本的圆形几何体
const geometry = new THREE.CircleGeometry(12, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const circle = new THREE.Mesh(geometry, material);
circle.rotation.x = -Math.PI / 2; // 使圆形垂直于地面
scene.add(circle);

RingGeometry（圆环几何体）

环形几何体是一个具有内径和外径的圆环面，可以用于创建戒指、轮子或其他圆形结构。

new THREE.RingGeometry(innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength)

innerRadius：环形的内半径，默认为0.5。

outerRadius：环形的外半径，默认为1。

thetaSegments：沿环形周长的分割段数，默认为8。增加此值可以提高环形的平滑度。

phiSegments：沿环形厚度方向的分割段数，默认为8。增加此值可以提高环形侧面的平滑度。

thetaStart：环形起始角度（弧度），默认为0。可以用来创建一个不完整的环形。

thetaLength：环形的弧长（弧度），默认为Math.PI * 2（即360度）。可以用来创建一个不完整的环形。

// 创建一个基本的环形几何体
const geometry = new THREE.RingGeometry(1, 5, 32, 8);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const ring = new THREE.Mesh(geometry, material);
scene.add(ring);

ShapeGeometry（形状几何体）

描述：从一个或多个路径形状中创建一个单面多边形几何体

const x = 0, y = 0;

const heartShape = new THREE.Shape();

heartShape.moveTo( x + 5, y + 5 );
heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );

const geometry = new THREE.ShapeGeometry( heartShape );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

ShapeGeometry(shapes : Array, curveSegments : Integer)

shapes --- 一个单独的shape，或者一个包含形状的Array。Default is a single triangle shape.

curveSegments - Integer - 每一个形状的分段数，默认值为12。

三维几何体模型

BoxGeometry（立方几何体）

描述：立方体是最简单的三维几何体之一，有六个面组成

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

width --- X 轴上面的宽度，默认值为 15。

height --- Y 轴上面的高度，默认值为 15。

depth --- Z 轴上面的深度，默认值为 15。

widthSegments --- （可选）宽度的分段数，默认值是 1。

heightSegments --- （可选）高度的分段数，默认值是 1。

depthSegments --- （可选）深度的分段数，默认值是 1。

const geometry = new THREE.BoxGeometry(15, 15, 15); 
// 创建一个边长为1的立方体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 
// 创建一个绿色基本材质
const cube = new THREE.Mesh(geometry, material); 
// 将几何体和材质组合成一个网格对象
scene.add(cube); 
// 将网格对象添加到场景中

ConeGeometry（圆锥缓冲几何体）

描述：一个用于生成圆锥几何体的类。

ConeGeometry(radis : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

radius --- 圆锥底部的半径，默认值为1。

height --- 圆锥的高度，默认值为1。

radialSegments --- 圆锥侧面周围的分段数，默认为32。

heightSegments --- 圆锥侧面沿着其高度的分段数，默认值为1。

openEnded --- 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。

thetaStart --- 第一个分段的起始角度，默认为0。（three o'clock position）

thetaLength --- 圆锥底面圆扇区的中心角，通常被称为"θ"（西塔）。默认值是2*Pi，这使其成为一个完整的圆锥。

const geometry = new THREE.ConeGeometry( 5, 20, 32 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
const cone = new THREE.Mesh( geometry, material );
scene.add( cone );

SphereGeometry（球几何体）

描述：球体是一个完美的立体图形，所有点到中心的距离都相等。

SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)

radius --- 球体半径，默认为1。

widthSegments --- 水平分段数（沿着经线分段），最小值为3，默认值为32。

heightSegments --- 垂直分段数（沿着纬线分段），最小值为2，默认值为16。

phiStart --- 指定水平（经线）起始角度，默认值为0。。

phiLength --- 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。

thetaStart --- 指定垂直（纬线）起始角度，默认值为0。

thetaLength --- 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。

const geometry = new THREE.SphereGeometry(0.5, 32, 32); 
// 创建一个半径为0.5，经度和纬度分段数均为32的球体
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
// 创建一个红色基本材质
const sphere = new THREE.Mesh(geometry, material); 
// 将几何体和材质组合成一个网格对象
scene.add(sphere); 
// 将网格对象添加到场景中

CapsuleGeometry（胶囊图形）

描述：CapsuleGeometry是一个胶囊图形类，通过半径和高度来进行构造。使用lathe来进行构造

CapsuleGeometry(radius : Float, length : Float, capSegments : Integer, radialSegments : Integer)

radius --- 胶囊半径。可选的; 默认值为5。

length --- 中间区域的长度。可选的; 默认值为10。

capSegments --- 构造盖子的曲线部分的个数。可选的; 默认值为10。

radialSegments --- 覆盖胶囊圆周的分离的面的个数。可选的; 默认值为20。

const geometry = new THREE.CapsuleGeometry( 1, 1, 4, 8 ); 
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); 
const capsule = new THREE.Mesh( geometry, material ); scene.add( capsule );

CylinderGeometry（圆柱几何体）

描述：圆柱体由一个顶面，一个底面和一个侧面组成。

CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

radiusTop --- 圆柱的顶部半径，默认值是1。

radiusBottom --- 圆柱的底部半径，默认值是1。

height --- 圆柱的高度，默认值是1。

radialSegments --- 圆柱侧面周围的分段数，默认为32。

heightSegments --- 圆柱侧面沿着其高度的分段数，默认值为1。

openEnded --- 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。

thetaStart --- 第一个分段的起始角度，默认为0。（three o'clock position）

thetaLength --- 圆柱底面圆扇区的中心角，通常被称为"θ"（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。

const geometry = new THREE.CylinderGeometry(1, 1, 1, 32); 
// 创建一个顶部和底部半径均为0.5，高度为1，圆周分段数为32的圆柱体
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); 
// 创建一个蓝色基本材质
const cylinder = new THREE.Mesh(geometry, material); 
// 将几何体和材质组合成一个网格对象
scene.add(cylinder); 
// 将网格对象添加到场景中

ExtrudeGeometry（挤压几何体）

描述：从一个形状路径中，挤压

const length = 12, width = 8;

const shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );

const extrudeSettings = {
	steps: 2,
	depth: 16,
	bevelEnabled: true,
	bevelThickness: 1,
	bevelSize: 1,
	bevelOffset: 0,
	bevelSegments: 1
};

const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

ExtrudeGeometry(shapes : Array, options : Object)

shapes --- 形状或者一个包含形状的数组。

options --- 一个包含有下列参数的对象：

curveSegments --- int，曲线上点的数量，默认值是12。

steps --- int，用于沿着挤出样条的深度细分的点的数量，默认值为1。

depth --- float，挤出的形状的深度，默认值为1。

bevelEnabled --- bool，对挤出的形状应用是否斜角，默认值为true。

bevelThickness --- float，设置原始形状上斜角的厚度。默认值为0.2。

bevelSize --- float。斜角与原始形状轮廓之间的延伸距离，默认值为bevelThickness-0.1。

bevelOffset --- float. Distance from the shape outline that the bevel starts. Default is 0.

bevelSegments --- int。斜角的分段层数，默认值为3。

extrudePath --- THREE.Curve对象。一条沿着被挤出形状的三维样条线。Bevels not supported for path extrusion.

UVGenerator --- Object。提供了UV生成器函数的对象。

TorusGeometry（圆环几何体）

创建缓慢几何体类似于甜甜圈

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

radius：环面的半径（即从环面中心到管中心的距离），默认为100。

tube：管的半径（即管的厚度），默认为40。

radialSegments：沿环面径向的分割段数，默认为8。增加此值可以提高环面的平滑度。

tubularSegments：沿环面管方向的分割段数，默认为6。增加此值可以提高环面的平滑度。

arc：环面旋转的角度（弧度），默认为Math.PI * 2（即360度）。可以用来创建一个不完整的环面

TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)

radius - 环面的半径，从环面的中心到管道横截面的中心。默认值是1。

tube --- 管道的半径，默认值为0.4。

radialSegments --- 管道横截面的分段数，默认值为12。

tubularSegments --- 管道的分段数，默认值为48。

arc --- 圆环的圆心角（单位是弧度），默认值为Math.PI * 2。

// 创建一个基本的环面几何体
const geometry = new THREE.TorusGeometry(10, 3, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);

TorusKnotGeometry（圆环几何体）

描述：创建一个圆环扭结，其特殊形状由一对互质的整数，p和q所定义。如果p和q不互质，创建出来的几何体将是一个环面链接。

const geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const torusKnot = new THREE.Mesh( geometry, material );
scene.add( torusKnot );

TorusKnotGeometry(radius : Float, tube : Float, tubularSegments : Integer, radialSegments : Integer, p : Integer, q : Integer)

radius - 圆环的半径，默认值为1。

tube --- 管道的半径，默认值为0.4。

tubularSegments --- 管道的分段数量，默认值为64。

radialSegments --- 横截面分段数量，默认值为8。

p --- 这个值决定了几何体将绕着其旋转对称轴旋转多少次，默认值是2。

q --- 这个值决定了几何体将绕着其内部圆环旋转多少次，默认值是3。

TetrahedronGeometry（四面几何体）

描述：一个用于生成四面几何体的

TetrahedronGeometry(radius : Float, detail : Integer)

radius --- 四面体的半径，默认值为1。

detail --- 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个四面体。

OctahedronGeometry（八面几何体）

描述：一个用于创建八面体的

OctahedronGeometry(radius : Float, detail : Integer)

radius --- 八面体的半径，默认值为1。

detail --- 默认值为0，将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个八面体

DodecahedronGeometry（十二面几何体）

描述：一个用于创建十二面几何体的类

DodecahedronGeometry(radius : Float, detail : Integer)

radius --- 十二面体的半径，默认值为1。

detail --- 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体。

IcosahedronGeometry（二十面几何体）

描述：一个用于生成二十面体的类

IcosahedronGeometry(radius : Float, detail : Integer)

radius --- 二十面体的半径，默认为1。

detail --- 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个二十面体。当这个值大于1的时候，实际上它将变成一个球体。

LatheGeometry（车削几何体）

描述：创建具有轴对称的网格，比如花瓶。车削绕着Y轴来进行旋转。

const points = [];
for ( let i = 0; i < 10; i ++ ) {
	points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
}
const geometry = new THREE.LatheGeometry( points );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const lathe = new THREE.Mesh( geometry, material );
scene.add( lathe );

LatheGeometry(points : Array, segments : Integer, phiStart : Float, phiLength : Float)

points --- 一个Vector2对象数组。每个点的X坐标必须大于0。 Default is an array with (0,-0.5), (0.5,0) and (0,0.5) which creates a simple diamond shape.

segments --- 要生成的车削几何体圆周分段的数量，默认值是12。

phiStart --- 以弧度表示的起始角度，默认值为0。

phiLength --- 车削部分的弧度（0-2PI）范围，2PI将是一个完全闭合的、完整的车削几何体，小于2PI是部分的车削。默认值是2PI。

|----------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 名称 | 构造器参数 |
| ShapeGeometry | 【形状几何体】 shapes --- 一个单独的 shape，或者一个包含形状的 Array。 curveSegments - Integer - 每一个形状的分段数，默认值为 12 |
| TextGeometry | 【文本几何体】 font --- THREE.Font 的实例。size --- Float。字体大小，默认值为 100。height --- Float。挤出文本的厚度。默认值为 50。curveSegments --- Integer。曲线上点的数量。默认值为 12。bevelEnabled --- Boolean。是否开启斜角，默认为 false。bevelThickness --- Float。文本上斜角的深度，默认值为 20。bevelSize --- Float。斜角与原始文本轮廓之间的延伸距离。默认值为 8。bevelSegments --- Integer。斜角的分段数。默认值为 3 |
| TetrahedronGeometry | 【四面几何体】 radius --- 四面体的半径，默认值为 1。detail --- 默认值为 0。将这个值设为一个大于 0 的数将会为它增加一些顶点，使其不再是一个四面体 |
| OctahedronGeometry | 【八面几何体】 radius --- 八面体的半径，默认值为 1。detail --- 默认值为 0，将这个值设为一个大于 0 的数将会为它增加一些顶点，使其不再是一个八面体 |
| DodecahedronGeometry | 【十二面几何体】 radius --- 十二面体的半径，默认值为 1。detail --- 默认值为 0。将这个值设为一个大于 0 的数将会为它增加一些顶点，使其不再是一个十二面体 |
| IcosahedronGeometry | 【二十面几何体】 radius --- 二十面体的半径，默认为 1。detail --- 默认值为 0。将这个值设为一个大于 0 的数将会为它增加一些顶点，使其不再是一个二十面体。当这个值大于 1 的时候，实际上它将变成一个球体 |
| TorusKnotGeometry | 【圆环扭结几何体】 radius - 圆环的半径，默认值为 1。tube --- 管道的半径，默认值为 0.4。tubularSegments --- 管道的分段数量，默认值为 64。radialSegments --- 横截面分段数量，默认值为 8。p --- 这个值决定了几何体将绕着其旋转对称轴旋转多少次，默认值是 2。q --- 这个值决定了几何体将绕着其内部圆环旋转多少次，默认值是 3 |
| PolyhedronGeometry | 【多面几何体】 vertices --- 一个顶点 Array：[1,1,1, -1,-1,-1, ... ]。indices --- 一个构成面的索引 Array， [0,1,2, 2,3,0, ... ]。radius --- Float - 最终形状的半径。detail --- Integer - 将对这个几何体细分多少个级别。细节越多，形状就越平滑 |

TubeGeometry（管道几何体）

创建管状几何体，根据给定的路径曲线创建一个三维管状物体。

广泛应用于创建管道、血管、电缆等

new THREE.TubeGeometry(path, tubularSegments, radius, [closed])

path：一个THREE.Curve对象，定义了管状几何体沿着的路径。

tubularSegments：沿路径方向的分割段数，默认为64。增加此值可以提高管状几何体的平滑度。

radius：管状几何体的半径，默认为1。这是指从路径到管壁的距离。

closed：布尔值，指示路径是否应该被视为闭合路径，默认为false。如果为true，则路径的第一个点和最后一个点会被连接起来。

TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)

path --- Curve - 一个由基类Curve继承而来的3D路径。 Default is a quadratic bezier curve.

tubularSegments --- Integer - 组成这一管道的分段数，默认值为64。

radius --- Float - 管道的半径，默认值为1。

radialSegments --- Integer - 管道横截面的分段数目，默认值为8。

closed --- Boolean 管道的两端是否闭合，默认值为false。

//1、
class CustomSinCurve extends THREE.Curve {

	constructor( scale = 1 ) {

		super();

		this.scale = scale;

	}

	getPoint( t, optionalTarget = new THREE.Vector3() ) {

		const tx = t * 3 - 1.5;
		const ty = Math.sin( 2 * Math.PI * t );
		const tz = 0;

		return optionalTarget.set( tx, ty, tz ).multiplyScalar( this.scale );

	}

}

const path = new CustomSinCurve( 10 );
const geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );




// 2、创建一个基本的管状几何体
const points = [];
points.push(new THREE.Vector3(0, 0, 0));
points.push(new THREE.Vector3(2, 0, 0));
points.push(new THREE.Vector3(2, 2, 0));
points.push(new THREE.Vector3(0, 2, 0));
const path = new THREE.CatmullRomCurve3(points);
const geometry = new THREE.TubeGeometry(path, 64, 0.2);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const tube = new THREE.Mesh(geometry, material);
scene.add(tube);

二、材质

|----------------------|-------------------------------------------------|
| 名称 | 描述 |
| MeshBasicMaterial | 基础网格基础材质，用于给几何体赋予一种简单的颜色，或者显示几何体的线框 |
| MeshDepthMaterial | 网格深度材质，这个材质使用从摄像机到网格的距离来决定如何给网格上色。 |
| MeshStandardMaterial | 标准网格材质，一种基于物理的标准材质，使用 Metallic-Roughness 工作流程 |
| MeshPhysicalMaterial | 物理网格材质，MeshStandardMaterial 的扩展，能够更好地控制反射率。 |
| MeshNormalMaterial | 网格法向材质，这是一种简单的材质，根据法向向量计算物体表面的颜色 |
| MeshLambertMaterial | 网格 Lambert 材质，这是一种考虑光照影响的材质，用于创建暗淡的、不光亮的物体。 |
| MeshPhongMaterial | 网格 Phong 式材质，这是一种考虑光照影响的材质，用于创建光亮的物体 |
| MeshToonMaterial | 网格 Phong 式材质，MeshPhongMaterial 卡通着色的扩展。 |
| ShaderMaterial | 着色器材质，这种材质允许使用自定义的着色器程序，直接控制顶点的放置方式以及像素的着色方式 |
| LineBasicMaterial | 直线基础材质，这种材质可以用于 THREE.Line 直线几何体，用来创建着色的直线。 |

基础网格材质（MeshBasicMaterial）【常用】

一个以简单着色（平面或线框）方式来绘制几何体的材质，这种材质不受光照的影响。常用于背影、2D图形等场景。

参数：

color：材质颜色。

opacity：透明度，取值范围为0（完全透明）到1（完全不透明）。

transparent：布尔值，指示材质是否透明。如果设置为true，则材质将考虑透明度的影响。

map：纹理贴图。

示例：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ 
    color: 0x00ff00, 
    transparent: true, 
    opacity: 0.5 
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

网格材质（MeshLambertMaterial）【常用】

一种非光泽表面的材质，没有镜面高光。适用于模拟一些表面（如未经处理的木材或石材），但不能模拟具有镜面高光的光泽表面。

受光照影响------ 漫反射

参数 （继承自THREE.Material）：

color：材质颜色。

map：纹理贴图。

alphaMap：透明度贴图。

emissive：自发光颜色。

示例：

const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });

网格材质（MeshPhongMaterial）

支持漫反射和镜面反射光照模型，可以模拟物体表面对光线的漫反射和镜面反射效果。相比于Lambert材质，效果较好，但性能开销较大。

受光照影响------高光

参数：

color：材质颜色。

specular：镜面反射颜色。

shininess：光泽度，控制镜面高光的大小。

示例：

const material = new THREE.MeshPhongMaterial({ 
    color: 0x00ff00, 
    specular: 0x111111, 
    shininess: 30 
});

法线网格材质（MeshNormalMaterial）【拓展：不常用】

根据法向向量来计算物体表面的颜色。这种材质可以显示网格的法线方向，常用于调试或特殊效果。

注意：法线材质并不支持镜面反射，这里的描述有误。正确的描述应该是它直接显示法线的方向，颜色通常与法线的方向有关。

示例：

const material = new THREE.MeshNormalMaterial();

物理材质（MeshStandardMaterial）

一种高度可配置的材质，专为基于物理的渲染（PBR）设计。通过调整金属度、粗糙度等参数，可以模拟出从非金属到金属的各种材质效果。

受光照影响------物理材质

参数：

color：材质颜色。

metalness：金属度，取值范围为0（非金属）到1（金属）。

roughness：粗糙度，取值范围为0（光滑）到1（粗糙）。

map：漫反射贴图。

envMap：环境贴图。

示例：

const material = new THREE.MeshStandardMaterial({ 
    color: 0x00ff00, 
    metalness: 0, 
    roughness: 0.5 
});

物理材质（MeshPhysicalMaterial）

MeshPhysicalMaterial是Three.js中一种基于物理的材质类型，它提供了更多的物理属性来模拟现实世界中的材料特性。

与MeshStandardMaterial相比，MeshPhysicalMaterial具有额外的物理属性，如清漆层、透光率、反射率、光泽、折射率等，使其更适合模拟具有特定光学特性的材料，如透明材料、半透明材料等。

受光照影响------物理材质

参数：

color：基础颜色，默认为白色（0xffffff）。

map：基础颜色贴图，可以用来替代材质的颜色。

roughness：粗糙度，默认为0.5。粗糙度定义了表面的光滑程度，数值越高，表面越粗糙。

metalness：金属度，默认为0.5。金属度定义了表面的金属程度，数值越高，表面越像金属。

emissive：自发光颜色，默认为黑色（0x000000）。即使在没有光源的情况下，也会显示这个颜色。

clearcoat：清漆层厚度，默认为0。定义了表面的额外涂层，通常用于模拟汽车油漆的效果。

clearcoatRoughness：清漆层粗糙度，默认为0。定义了清漆层的粗糙程度。

ior（Index of Refraction）：折射率，默认为1.5。定义了材料的折射率，对于透明或半透明材料特别重要。

transmission：透射，默认为0。定义了光线透过材料的程度，对于透明或半透明材料特别重要。
其他：还包括normalMap（法线贴图）、roughnessMap（粗糙度贴图）、metalnessMap（金属度贴图）、emissiveMap（自发光贴图）、alphaMap（透明度贴图）、displacementMap（置换贴图）等纹理贴图属性，以及opacity（全局透明度）、transparent（是否开启透明模式）、side（指定材质在哪一面渲染）等通用属性。

适用于汽车油漆效果、玻璃、水、金属等材质的创建。

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 加载基础颜色贴图
const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load('path/to/color_texture.jpg');

// 创建 MeshPhysicalMaterial
const material = new THREE.MeshPhysicalMaterial({
    map: colorTexture,         // 基础颜色贴图
    color: 0xffffff,           // 基础颜色（这里会被贴图覆盖，但可用于没有贴图的部分）
    emissive: 0x000000,        // 自发光颜色
    metalness: 0.5,            // 金属度
    roughness: 0.5,            // 粗糙度
    transmission: 1,           // 启用透射
    ior: 1.5,                  // 折射率
    thickness: 0.1,            // 厚度（对于透射效果重要）
    side: THREE.DoubleSide     // 双面渲染
});

// 创建网格对象
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

MeshToonMaterial

这种材质使用卡通渲染效果，通常用于游戏和动画中。通过梯度纹理来控制阴影效果。

参数：

color：材质颜色。

gradientMap：梯度纹理，用于卡通阴影效果。

示例：

const gradientTexture = new THREE.TextureLoader()
.load('path/to/gradient.png');
const material = new THREE.MeshToonMaterial({ 
    color: 0x00ff00, 
    gradientMap: gradientTexture 
});

ShaderMaterial

通过自定义着色器来创建材质，适用于需要高级图形效果的情况。需要编写顶点和片段着色器代码。

参数：

vertexShader：顶点着色器代码。

fragmentShader：片段着色器代码。

示例：

const vertexShader = `
    varying vec2 vUv;
    void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;

const fragmentShader = `
    varying vec2 vUv;
    void main() {
        gl_FragColor = vec4(vUv, 0.5, 1.0);
    }
`;

const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});

线基础材质（LineBasicMaterial）

用于线条几何体的基本材质。

参数：

color：线条颜色。

linewidth：线条宽度（注意：在某些设备上可能不支持，默认为1）。

示例：

const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const geometry = new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(-10, 0, 0),
    new THREE.Vector3(0, 10, 0),
    new THREE.Vector3(10, -10, 0)
]);
const line = new THREE.Line(geometry, material);
scene.add(line);

注意 ：linewidth参数在某些渲染器和设备上可能不起作用，如果需要更粗的线条，可以考虑使用其他方法，如创建多边形来模拟线条。

LineDashedMaterial

用于创建虚线效果的材质。

参数：

color：线条颜色。

dashSize：虚线的线段长度。

gapSize：虚线的间隔长度。

scale：缩放比例，用于调整虚线的密度。

示例：

const material = new THREE.LineDashedMaterial({ 
    color: 0xff0000, 
    dashSize: 3, 
    gapSize: 1, 
    scale: 1 
});

点材质（PointsMaterial）

用于点云（点几何体）的材质。

参数：

color：点的颜色。

size：点的大小。

map：点的纹理贴图（注意：在某些情况下可能不支持）。

示例：

const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.05 });
const geometry = new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(-10, 10, 0),
    new THREE.Vector3(-10, -10, 0),
    new THREE.Vector3(10, -10, 0)
]);
const points = new THREE.Points(geometry, material);
scene.add(points);

请注意，示例代码中的路径和参数可能需要根据实际情况进行调整。

精灵材质（SpriteMaterial）

SpriteMaterial是Three.js中的一种材质类型，用于创建二维精灵（Sprite）。

精灵材质常用于渲染图标、粒子系统、UI元素等。

与普通的三维材质不同，SpriteMaterial通常与Sprite对象一起使用，它不支持光照模型，也不考虑摄像机的方向，总是面向摄像机展示其纹理。

参数：

map：基础颜色贴图，用于定义精灵的外观。

color：基础颜色，默认为白色（0xffffff）。

opacity：材质的全局透明度，默认为1（不透明）。

transparent：是否开启透明模式，默认为true。如果设置为true，则需要设置opacity或者使用alphaMap。

blending：混合模式，默认为THREE.NormalBlending。可以设置为THREE.AdditiveBlending、THREE.SubtractiveBlending等。

sizeAttenuation：是否启用尺寸衰减，默认为true。如果启用，则精灵的大小会根据距离摄像机的距离自动调整。

rotation：旋转角度，默认为0。用于控制精灵的旋转角度。

其他：还包括depthTest（是否进行深度测试）、depthWrite（是否写入深度缓冲区）、toneMapped（是否进行色调映射）、fog（是否应用雾效）等属性。

应用场景

SpriteMaterial适用于需要快速实现图标、粒子系统、UI元素等二维元素的场景。

// 加载纹理
const textureLoader = new THREE.TextureLoader();
const spriteTexture = textureLoader.load('path/to/sprite_texture.png');

// 创建 SpriteMaterial
const spriteMaterial = new THREE.SpriteMaterial({
    map: spriteTexture,          // 基础颜色贴图
    color: 0xffffff,             // 基础颜色（这里会与贴图混合）
    opacity: 0.5,                // 透明度
    transparent: true,           // 开启透明模式
    sizeAttenuation: false,      // 禁用尺寸衰减（精灵大小不会随距离变化）
    rotation: Math.PI / 4        // 旋转45度
});

// 创建 Sprite
const sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(100, 100, 1);  // 设置精灵的大小（X和Y方向上的大小，Z方向通常保持为1）
sprite.position.set(0, 0, 0);   // 设置精灵的位置
scene.add(sprite);

友友们的每一次点赞，都是对我莫大的支持与激励！