Three.js基础功能学习二：场景图与材质

场景图在 3D 引擎是一个图中节点的层次结构，其中每个节点代表了一个局部空间（local space）。

Three.js提供了多种类型的材质（material）。它们定义了对象在场景中的外型。你使用哪种材质取决于你想达到的目的。

一、学习视频

three.js学习及项目实战：三维场景图

二、场景图相关内容

官网文档： 官网文档

2.1 基础知识

场景图在 3D 引擎是一个图中节点的层次结构，其中每个节点代表了一个局部空间（local space）。

WebGLRenderer的配置参数：

canvas - 一个供渲染器绘制其输出的canvas 它和下面的domElement属性对应。如果没有传这个参数，会创建一个新canvas
context - 可用于将渲染器附加到已有的渲染环境(RenderingContext)中。默认值是null
precision - 着色器精度. 可以是 "highp", "mediump" 或者 "lowp". 如果设备支持，默认为"highp" .
alpha - controls the default clear alpha value. When set to true, the value is 0. Otherwise it's 1. Default is false.
premultipliedAlpha - renderer是否假设颜色有 premultiplied alpha. 默认为true
antialias - 是否执行抗锯齿。默认为false.
stencil - 绘图缓存是否有一个至少8位的模板缓存(stencil buffer)。默认为true
preserveDrawingBuffer -是否保留缓直到手动清除或被覆盖。默认false.
powerPreference - 提示用户代理怎样的配置更适用于当前WebGL环境。可能是"high-performance", "low-power" 或 "default"。默认是"default". 详见WebGL spec
failIfMajorPerformanceCaveat - 检测渲染器是否会因性能过差而创建失败。默认为false。详见 WebGL spec for details.
depth - 绘图缓存是否有一个至少6位的深度缓存(depth buffer )。默认是true.
logarithmicDepthBuffer - 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异，就有必要使用。 Note that this setting uses gl_FragDepth if available which disables the Early Fragment Test optimization and can cause a decrease in performance. 默认是false。示例：camera / logarithmicdepthbuffer

2.2 代码演示

javascript 复制代码

// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three'

import { createLine } from '@/utils/baseUtils'

const objects = []
const spread = 15

interface Position {
  x: number
  y: number
}
interface Object3d {
  position: Position
}

export default () => {
  //创建一个场景
  const scene = new THREE.Scene()
  /**
   * background 属性控制场景的背景颜色，可以设置颜色或者纹理
   */
  scene.background = new THREE.Color(0x00ffff)
  /**
   * 设置背景的模糊度，0-1之间，默认是0
   */
  //   scene.backgroundBlurriness = 0.5

  /**
   * 定义了影响场景中的每个物体的雾的类型
   */
  scene.fog = new THREE.Fog(0x00ff00, 0.2, 100)

  //创建摄像机
  const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000)
  // const camera = new THREE.OrthographicCamera(window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000);

  //创建渲染器
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  /**
   * 画一条线
   */
  let points = []
  points.push(new THREE.Vector3(-10, 0, 0))
  points.push(new THREE.Vector3(0, 10, 0))
  points.push(new THREE.Vector3(10, 0, 0))
  let material = new THREE.LineBasicMaterial({ color: 0x0000ff, linewidth: 10 })
  //   scene.add(createLine(points, material))

  camera.position.z = 5
  camera.position.y = 5
  //渲染到元素上
  renderer.render(scene, camera)

  function addObject(x: number, y: number, obj: Object3d) {
    obj.position.x = x * spread
    obj.position.y = y * spread

    scene.add(obj)
    objects.push(obj)
  }

  function createMaterial() {
    const material = new THREE.MeshPhongMaterial({
      side: THREE.DoubleSide,
    })

    const hue = Math.random()
    const saturation = 1
    const luminance = 0.5
    material.color.setHSL(hue, saturation, luminance)

    return material
  }

  function addSolidGeometry(x: number, y: number, geometry: THREE.BoxGeometry) {
    const mesh = new THREE.Mesh(geometry, createMaterial())
    addObject(x, y, mesh)
  }

  const width = 8
  const height = 8
  const depth = 8
  addSolidGeometry(-2, -2, new THREE.BoxGeometry(width, height, depth))

  function addLineGeometry(x: number, y: number, geometry: THREE.BoxGeometry) {
    const material = new THREE.LineBasicMaterial({ color: 0x000000 })
    const mesh = new THREE.LineSegments(geometry, material)
    addObject(x, y, mesh)
  }
  addLineGeometry(10, 10, new THREE.BoxGeometry(width, height, depth))

  const radius = 7
  const widthSegments = 12
  const heightSegments = 8
  const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments)
  material = new THREE.PointsMaterial({
    color: 'red',
    size: 0.2, // in world units
  })
  points = new THREE.Points(geometry, material)
  scene.add(points)
}

三、场景图相关内容

官网文档： 官网文档

有2种方法可以设置大部分的材质属性。一种是在实例化时设置，也就是我们之前看到的。

javascript 复制代码

const material = new THREE.MeshPhongMaterial({
  color: 0xFF0000,    // 红色 (也可以使用CSS的颜色字符串)
  flatShading: true,
});

另一种是在实例化之后再设置

javascript 复制代码

const material = new THREE.MeshPhongMaterial();
material.color.setHSL(0, 1, .5);  // 红色
material.flatShading = true;

3.1. 材质(Material) 材质的抽象基类。

材质描述了对象objects的外观。它们的定义方式与渲染器无关，因此，如果您决定使用不同的渲染器，不必重写材质。

所有其他材质类型都继承了以下属性和方法（尽管它们可能具有不同的默认值）。
属性：

1 .alphaHash : Boolean

启用alphaHash透明度，这是.transparent或.alphaTest的替代方案。如果不透明度低于随机阈值，则不会渲染材质。随机化会引入一些颗粒或噪点，但相较于传统的Alpha blend方式，避免了透明度引起的深度排序问题。使用TAARenderPass可以有效减少噪点。

2 .alphaTest : Float

设置运行alphaTest时要使用的alpha值。如果不透明度低于此值，则不会渲染材质。默认值为0。

3 .alphaToCoverage : Boolean

启用alpha to coverage. 只能在开启了MSAA的渲染环境中使用 (当渲染器创建的时候antialias 属性要true才能使用). 默认为 false.

4 .blendDst : Integer

混合目标。默认值为OneMinusSrcAlphaFactor。目标因子所有可能的取值请参阅constants。必须将材质的blending设置为CustomBlending才能生效。

5 .blendDstAlpha : Integer

6 .blendDst的透明度。默认值为 null.

7 .blendEquation : Integer

使用混合时所采用的混合方程式。默认值为AddEquation。混合方程式所有可能的取值请参阅constants。必须将材质的blending设置为CustomBlending才能生效。

8 .blendEquationAlpha : Integer

9 .blendEquation 的透明度. 默认值为 null.

10 .blending : Blending

在使用此材质显示对象时要使用何种混合。

必须将其设置为CustomBlending才能使用自定义blendSrc, blendDst 或者 [page:Constant blendEquation]。混合模式所有可能的取值请参阅constants。默认值为NormalBlending。

11 .blendSrc : Integer

混合源。默认值为SrcAlphaFactor。源因子所有可能的取值请参阅constants。

必须将材质的blending设置为CustomBlending才能生效。

12 .blendSrcAlpha : Integer

13 .blendSrc的透明度。默认值为 null.

14 .clipIntersection : Boolean

更改剪裁平面的行为，以便仅剪切其交叉点，而不是它们的并集。默认值为 false。

15 .clippingPlanes : Array

用户定义的剪裁平面，在世界空间中指定为THREE.Plane对象。这些平面适用于所有使用此材质的对象。空间中与平面的有符号距离为负的点被剪裁（未渲染）。这需要WebGLRenderer.localClippingEnabled为true。示例请参阅WebGL / clipping /intersection。默认值为 null。

16 .clipShadows : Boolean

定义是否根据此材质上指定的剪裁平面剪切阴影。默认值为 false。

17 .colorWrite : Boolean

是否渲染材质的颜色。这可以与网格的renderOrder属性结合使用，以创建遮挡其他对象的不可见对象。默认值为true。

18 .defines : Object

注入shader的自定义对象。以键值对形式的对象传递，{ MY_CUSTOM_DEFINE: '' , PI2: Math.PI * 2 }。这些键值对在顶点和片元着色器中定义。默认值为undefined。

19 .depthFunc : Integer

使用何种深度函数。默认为LessEqualDepth。深度模式所有可能的取值请查阅constants。

20 .depthTest : Boolean

是否在渲染此材质时启用深度测试。默认为 true。

21 .depthWrite : Boolean

渲染此材质是否对深度缓冲区有任何影响。默认为true。

在绘制2D叠加时，将多个事物分层在一起而不创建z-index时，禁用深度写入会很有用。

22 .forceSinglePass : Boolean

决定双面透明的东西是否强制使用单通道渲染，默认为false。

为了减少一些半透明物体的渲染错误，此引擎调用两次绘制来渲染渲染双面透明的东西。但是此方案可能会导致在某些情况下使绘制调用次数翻倍，例如渲染一些平面的植物例如草精灵之类的。在这些情况下，将forceSinglePass设置为true来使用单通道渲染来避免性能问题。

23 .isMaterial : Boolean

检查这个对象是否为材质Material的只读标记.

24 .stencilWrite : Boolean

是否对模板缓冲执行模板操作，如果执行写入或者与模板缓冲进行比较，这个值需要设置为true。默认为false。

25 .stencilWriteMask : Integer

写入模板缓冲区时所用的位元遮罩，默认为0xFF。

26 .stencilFunc : Integer

使用模板比较时所用的方法，默认为AlwaysStencilFunc。在模板函数 constants 中查看可用的值

27 .stencilRef : Integer

在进行模板比较或者模板操作的时候所用的基准值，默认为0。

28 .stencilFuncMask : Integer

与模板缓冲进行比较时所使用的位元遮罩，默认为0xFF

29 .stencilFail : Integer

当比较函数没有通过的时候要执行的模板操作，默认为KeepStencilOp，在模板操作 constants 查看可用值。

30 .stencilZFail : Integer

当比较函数通过了但是深度检测没有通过的时候要执行的模板操作，默认为KeepStencilOp，在模板操作 constants 查看可用值。

31 .stencilZPass : Integer

当比较函数和深度检测都通过时要执行的模板操作，默认为KeepStencilOp，在模板操作constants 中查看可用值。

32 .id : Integer

此材质实例的唯一编号。

33 .name : String

对象的可选名称（不必是唯一的）。默认值为空字符串。

34 .needsUpdate : Boolean

指定需要重新编译材质。

35 .opacity : Float

在0.0 - 1.0的范围内的浮点数，表明材质的透明度。值0.0表示完全透明，1.0表示完全不透明。

如果材质的transparent属性未设置为true，则材质将保持完全不透明，此值仅影响其颜色。默认值为1.0。

36 .polygonOffset : Boolean

是否使用多边形偏移。默认值为false。这对应于WebGL的GL_POLYGON_OFFSET_FILL功能。

37 .polygonOffsetFactor : Integer

设置多边形偏移系数。默认值为0。

38 .polygonOffsetUnits : Integer

设置多边形偏移单位。默认值为0。

39 .precision : String

重写此材质渲染器的默认精度。可以是"highp", "mediump" 或 "lowp"。默认值为null。

40 .premultipliedAlpha : Boolean

是否预乘alpha（透明度）值。有关差异的示例，请参阅WebGL / Materials / Physical / Transmission。默认值为false。

41 .dithering : Boolean

是否对颜色应用抖动以消除条带的外观。默认值为 false。

42 .shadowSide : Integer

定义投影的面。设置时，可以是THREE.FrontSide, THREE.BackSide, 或Materials。默认值为 null。

如果为null，则面投射阴影确定如下：

Material.side Side casting shadows
THREE.FrontSide 背面
THREE.BackSide 前面
THREE.DoubleSide 双面

43 .side : Integer

定义将要渲染哪一面 - 正面，背面或两者。默认为THREE.FrontSide。其他选项有THREE.BackSide 和 THREE.DoubleSide。

44 .toneMapped : Boolean

定义这个材质是否会被渲染器的toneMapping设置所影响，默认为 true 。

45 .transparent : Boolean

定义此材质是否透明。这对渲染有影响，因为透明对象需要特殊处理，并在非透明对象之后渲染。

设置为true时，通过设置材质的opacity属性来控制材质透明的程度。

默认值为false。

46 .type : String

值是字符串'Material'。不应该被更改，并且可以用于在场景中查找此类型的所有对象。

47 .uuid : String

此材质实例的UUID，会自动分配，不应该被更改。

48 .version : Integer

开始为0，会记录 .needsUpdate : Boolean设置为true的次数。

49 .vertexColors : Boolean

是否使用顶点着色。默认值为false。此引擎支持RGB或者RGBA两种顶点颜色，取决于缓冲 attribute 使用的是三分量（RGB）还是四分量（RGBA）。

50 .visible : Boolean

此材质是否可见。默认为true。

51 .userData : Object

一个对象，可用于存储有关Material的自定义数据。它不应该包含对函数的引用，因为这些函数不会被克隆。
方法：

1 clone ( ) : Material

返回与此材质具有相同参数的新材质。

2 copy ( material : material ) : this

将被传入材质中的参数复制到此材质中。

3 dispose () : undefined

处理材质。材质的纹理不会被处理。需要通过Texture处理。

4 onBeforeCompile ( shader : Shader, renderer : WebGLRenderer ) : undefined

在编译shader程序之前立即执行的可选回调。此函数使用shader源码作为参数。用于修改内置材质。

和其他属性不一样的是，这个回调在.clone()，.copy() 和 .toJSON() 中不支持。

5 customProgramCacheKey () : String

当用到onBeforeCompile回调的时候，这个回调函数可以用来定义在onBeforeCompile中使用的配置项，这样three.js就可以根据这个回调返回的字符串来判定使用一个缓存的编译好的着色器代码还是根据需求重新编译一段新的着色器代码。

6 setValues ( values : Object ) : undefined

values -- 具有参数的容器。根据values设置属性。

7 toJSON ( meta : Object ) : Object

meta -- 包含有元数据的对象，例如该对象的纹理或图片。将material对象转换为 three.js JSON Object/Scene format（three.js JSON 物体/场景格式）。

示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(1)
  const material = new THREE.MeshBasicMaterial({
    color: 0xff0000, // 红色 (也可以使用CSS的颜色字符串)
    flatShading: true,
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.2. LineBasicMaterial 基础线条材质

一种用于绘制线框样式几何体的材质。

1 .color : Color

材质的颜色(Color)，默认值为白色 (0xffffff)。

2 .fog : Boolean

材质是否受雾影响。默认为true。

3 .linewidth : Float

控制线宽。默认值为 1。

由于OpenGL Core Profile与大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1。

4 .linecap : String

定义线两端的样式。可选值为 'butt', 'round' 和 'square'。默认值为 'round'。

该属性对应2D Canvas lineCap属性，并且会被WebGL渲染器忽略。

5 .linejoin : String

定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。

该属性对应2D Canvas lineJoin属性，并且会被WebGL渲染器忽略。

6 .map : Texture

Sets the color of the lines using data from a Texture.

示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.LineBasicMaterial({
    color: 0xff0000, // 红色 (也可以使用CSS的颜色字符串)
    linewidth: 2.0,
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.3. LineDashedMaterial 虚线材质

1 .dashSize : number

虚线的大小，是指破折号和间隙之和。默认值为 3。

2 .gapSize : number

间隙的大小，默认值为 1。

3 .isLineDashedMaterial : Boolean

Read-only flag to check if a given object is of type LineDashedMaterial.

4 .scale : number

线条中虚线部分的占比。默认值为 1。

示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.LineDashedMaterial({
    color: 0xff0000, // 红色 (也可以使用CSS的颜色字符串)
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.4. MeshBasicMaterial 基础网格材质

1 .alphaMap : Texture

alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。默认值为null。

仅使用纹理的颜色，忽略alpha通道（如果存在）。对于RGB和RGBA纹理，WebGL渲染器在采样此纹理时将使用绿色通道，因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。 Luminance-only以及luminance/alpha纹理也仍然有效。

2 .aoMap : Texture

该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UV。

3 .aoMapIntensity : Float

环境遮挡效果的强度。默认值为1。零是不遮挡效果。

4 .color : Color

材质的颜色(Color)，默认值为白色 (0xffffff)。

5 .combine : Integer

如何将表面颜色的结果与环境贴图（如果有）结合起来。

选项为THREE.MultiplyOperation（默认值），THREE.MixOperation， THREE.AddOperation。如果选择多个，则使用.reflectivity在两种颜色之间进行混合。

6 .envMap : Texture

环境贴图。默认值为null。

7 .fog : Boolean

材质是否受雾影响。默认为true。

8 .lightMap : Texture

光照贴图。默认值为null。lightMap需要第二组UV。

9 .lightMapIntensity : Float

烘焙光的强度。默认值为1。

10 .map : Texture

颜色贴图。可以选择包括一个alpha通道，通常与.transparent 或.alphaTest。默认为null。

11 .reflectivity : Float

环境贴图对表面的影响程度; 见.combine。默认值为1，有效范围介于0（无反射）和1（完全反射）之间。

12 .refractionRatio : Float

空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式 THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。 The index of refraction (IOR) of air (approximately 1) divided by the index of refraction of the material. It is used with environment mapping mode THREE.CubeRefractionMapping. 折射率不应超过1。默认值为0.98。

13 .specularMap : Texture

材质使用的高光贴图。默认值为null。

14 .wireframe : Boolean

将几何体渲染为线框。默认值为false（即渲染为平面多边形）。

15 .wireframeLinecap : String

定义线两端的外观。可选值为 'butt'，'round' 和 'square'。默认为'round'。

该属性对应2D Canvas lineJoin属性，并且会被WebGL渲染器忽略。

16 .wireframeLinejoin : String

定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。

该属性对应2D Canvas lineJoin属性，并且会被WebGL渲染器忽略。

17 .wireframeLinewidth : Float

控制线框宽度。默认值为1。

示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00, // 红色 (也可以使用CSS的颜色字符串)
    linewidth: 2.0,
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.5. MeshDepthMaterial 深度网格材质

1 .alphaMap : Texture

alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。默认值为null。

2 .depthPacking : Constant

depth packing的编码。默认为BasicDepthPacking。

3 .displacementMap : Texture

位移贴图会影响网格顶点的位置，与仅影响材质的光照和阴影的其他贴图不同，移位的顶点可以投射阴影，阻挡其他对象，以及充当真实的几何体。位移纹理是指：网格的所有顶点被映射为图像中每个像素的值（白色是最高的），并且被重定位。

4 .displacementScale : Float

位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

5 .displacementBias : Float

位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。

6 .map : Texture

颜色贴图。可以选择包括一个alpha通道，通常与.transparent 或.alphaTest。默认为null。

7 .wireframe : Boolean

将几何体渲染为线框。默认值为false（即渲染为平滑着色）。

8 .wireframeLinewidth : Float

控制线框宽度。默认值为1。

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.MeshDepthMaterial({
    wireframe: true,
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.6. MeshDistanceMaterial MeshDistanceMaterial 在内部用于使用PointLight来实现阴影映射。

1 .alphaMap : Texture

alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。默认值为null。

2 .displacementMap : Texture

3 .displacementScale : Float

位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

4 .displacementBias : Float

位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。

5 .map : Texture

颜色贴图。可以选择包括一个alpha通道，通常与.transparent 或.alphaTest。默认为null。

示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.MeshDistanceMaterial({})
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.7. MeshLambertMaterial Lambert网格材质

1 .alphaMap : Texture

alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。默认值为null。

2 .aoMap : Texture

该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UV。

3 .aoMapIntensity : Float

环境遮挡效果的强度。默认值为1。零是不遮挡效果。

4 .bumpMap : Texture

用于创建凹凸贴图的纹理。黑色和白色值映射到与光照相关的感知深度。凹凸实际上不会影响对象的几何形状，只影响光照。如果定义了法线贴图，则将忽略该贴图。

5 .bumpScale : Float

凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。

6 .color : Color

材质的颜色(Color)，默认值为白色 (0xffffff)。

7 .combine : Integer

如何将表面颜色的结果与环境贴图（如果有）结合起来。

选项为THREE.MultiplyOperation（默认值），THREE.MixOperation， THREE.AddOperation。如果选择多个，则使用.reflectivity在两种颜色之间进行混合。

8 .displacementMap : Texture

9 .displacementScale : Float

位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

10 .displacementBias : Float

位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。

11 .emissive : Color

材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。

12 .emissiveMap : Texture

设置放射（发光）贴图。默认值为null。放射贴图颜色由放射颜色和强度所调节。如果你有一个放射贴图，请务必将放射颜色设置为黑色以外的其他颜色。

13 .emissiveIntensity : Float

放射光强度。调节发光颜色。默认为1。

14 .envMap : Texture

环境贴图。默认值为null。

15 .flatShading : Boolean

定义材质是否使用平面着色进行渲染。默认值为false。

16 .fog : Boolean

材质是否受雾影响。默认为true。

17 .lightMap : Texture

光照贴图。默认值为null。lightMap需要第二组UV。

18 .lightMapIntensity : Float

烘焙光的强度。默认值为1。

19 .map : Texture

颜色贴图。可以选择包括一个alpha通道，通常与.transparent 或.alphaTest。默认为null。

20 .normalMap : Texture

用于创建法线贴图的纹理。RGB值会影响每个像素片段的曲面法线，并更改颜色照亮的方式。法线贴图不会改变曲面的实际形状，只会改变光照。 In case the material has a normal map authored using the left handed convention, the y component of normalScale should be negated to compensate for the different handedness.

21 .normalMapType : Integer

线贴图的类型。选项为THREE.TangentSpaceNormalMap（默认）和THREE.ObjectSpaceNormalMap。

22 .normalScale : Vector2

法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为（1,1）。

23 .reflectivity : Float

环境贴图对表面的影响程度; 见.combine。默认值为1，有效范围介于0（无反射）和1（完全反射）之间。

24 .refractionRatio : Float

25 .specularMap : Texture

材质使用的高光贴图。默认值为null。

26 .wireframe : Boolean

将几何体渲染为线框。默认值为false（即渲染为平面多边形）。

27 .wireframeLinecap : String

定义线两端的外观。可选值为 'butt'，'round' 和 'square'。默认为'round'。

该属性对应2D Canvas lineJoin属性，并且会被WebGL渲染器忽略。

28 .wireframeLinejoin : String

定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。

该属性对应2D Canvas lineJoin属性，并且会被WebGL渲染器忽略。

29 .wireframeLinewidth : Float

控制线框宽度。默认值为1。

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.MeshLambertMaterial({
    color: '#00ff00',
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.8. MeshMatcapMaterial MeshMatcapMaterial 由一个材质捕捉（MatCap，或光照球（Lit Sphere））纹理所定义，其编码了材质的颜色与明暗。

1 .alphaMap : Texture

alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。默认值为null。

2 .bumpMap : Texture

3 .bumpScale : Float

凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。

4 .color : Color

材质的颜色(Color)，默认值为白色 (0xffffff)。

5 .displacementMap : Texture

6 .displacementScale : Float

位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

7 .displacementBias : Float

位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。

8 .flatShading : Boolean

定义材质是否使用平面着色进行渲染。默认值为false。

9 .fog : Boolean

材质是否受雾影响。默认为true。

10 .map : Texture

颜色贴图。可以选择包括一个alpha通道，通常与.transparent 或.alphaTest。默认为null。纹理贴图颜色由漫反射颜色.color调节。

11 .matcap : Texture

matcap贴图，默认为null。

12 .normalMap : Texture

13 .normalMapType : Integer

法线贴图的类型。

选项为THREE.TangentSpaceNormalMap（默认）和THREE.ObjectSpaceNormalMap。

14 .normalScale : Vector2

法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为（1,1）。

示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.MeshMatcapMaterial({
    color: '#00ff00',
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.9. MeshNormalMaterial 法线网格材质

1 .bumpMap : Texture

2 .bumpScale : Float

凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。

3 .displacementMap : Texture

4 .displacementScale : Float

位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

5 .displacementBias : Float

位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。

6 .flatShading : Boolean

定义材质是否使用平面着色进行渲染。默认值为false。

7 .normalMap : Texture

8 .normalMapType : Integer

法线贴图的类型。选项为THREE.TangentSpaceNormalMap（默认）和THREE.ObjectSpaceNormalMap。

9 .normalScale : Vector2

法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为（1,1）。

10 .wireframe : Boolean

将几何体渲染为线框。默认值为false（即渲染为平滑着色）。

11 .wireframeLinewidth : Float

控制线框宽度。默认值为1。

示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.MeshNormalMaterial({
    wireframe: true,
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.9. MeshPhongMaterial Phong网格材质

1 .alphaMap : Texture

alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。默认值为null。

2 .aoMap : Texture

该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UV。

3 .aoMapIntensity : Float

环境遮挡效果的强度。默认值为1。零是不遮挡效果。

4 .bumpMap : Texture

5 .bumpScale : Float

凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。

6 .color : Color

材质的颜色(Color)，默认值为白色 (0xffffff)。

7 .combine : Integer

如何将表面颜色的结果与环境贴图（如果有）结合起来。

选项为THREE.MultiplyOperation（默认值），THREE.MixOperation， THREE.AddOperation。如果选择多个，则使用.reflectivity在两种颜色之间进行混合。

8 .displacementMap : Texture

9 .displacementScale : Float

位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

10 .displacementBias : Float

位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。

11 .emissive : Color

材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。

12 .emissiveMap : Texture

13 .emissiveIntensity : Float

放射光强度。调节发光颜色。默认为1。

14 .envMap : Texture

环境贴图。默认值为null。

15 .flatShading : Boolean

定义材质是否使用平面着色进行渲染。默认值为false。

16 .fog : Boolean

材质是否受雾影响。默认为true。

17 .lightMap : Texture

光照贴图。默认值为null。lightMap需要第二组UV。

18 .lightMapIntensity : Float

烘焙光的强度。默认值为1。

19 .map : Texture

颜色贴图。可以选择包括一个alpha通道，通常与.transparent 或.alphaTest。默认为null。纹理贴图颜色由漫反射颜色.color调节。

20 .normalMap : Texture

21 .normalMapType : Integer

法线贴图的类型。选项为THREE.TangentSpaceNormalMap（默认）和THREE.ObjectSpaceNormalMap。

22 .normalScale : Vector2

法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为（1,1）。

23 .reflectivity : Float

环境贴图对表面的影响程度; 见.combine。默认值为1，有效范围介于0（无反射）和1（完全反射）之间。

24 .refractionRatio : Float

空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。 The index of refraction (IOR) of air (approximately 1) divided by the index of refraction of the material. It is used with environment mapping mode THREE.CubeRefractionMapping. 折射率不应超过1。默认值为0.98。

.shininess : Float
.specular高亮的程度，越高的值越闪亮。默认值为 30。
.specular : Color

材质的高光颜色。默认值为0x111111（深灰色）的颜色Color。这定义了材质的光泽度和光泽的颜色。

25 .specularMap : Texture

镜面反射贴图值会影响镜面高光以及环境贴图对表面的影响程度。默认值为null。

26 .wireframe : Boolean

将几何体渲染为线框。默认值为false（即渲染为平面多边形）。

27 .wireframeLinecap : String

定义线两端的外观。可选值为 'butt'，'round' 和 'square'。默认为'round'。

该属性对应2D Canvas lineJoin属性，并且会被WebGL渲染器忽略。

28 .wireframeLinejoin : String

定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。

该属性对应2D Canvas lineJoin属性，并且会被WebGL渲染器忽略。

29 .wireframeLinewidth : Float

控制线框宽度。默认值为1。

示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.MeshPhongMaterial({
    wireframe: true,
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.11. MeshPhysicalMaterial 物理网格材质

1 .attenuationColor : Color

The color that white light turns into due to absorption when reaching the attenuation distance. Default is white (0xffffff).

2 .attenuationDistance : Float

Density of the medium given as the average distance that light travels in the medium before interacting with a particle. The value is given in world space units, and must be greater than zero. Default is Infinity.

3 .clearcoat : Float

表示clear coat层的强度，范围从0.0到1.0m，当需要在表面加一层薄薄的半透明材质的时候，可以使用与clear coat相关的属性，默认为0.0;

4 .clearcoatMap : Texture

这个贴图的红色通道值会与.clearcoat相乘作为整个clear coat的强度值层，默认为null。

5 .clearcoatNormalMap : Texture

用于为clear coat层设置的独立的法线贴图，默认为null。

6 .clearcoatNormalScale : Vector2

衡量.clearcoatNormalMap影响clear coat层多少的值，由(0,0)到(1,1)，默认为(1,1)。

7 .clearcoatRoughness : Float

clear coat层的粗糙度，由0.0到1.0。默认为0.0

8 .clearcoatRoughnessMap : Texture

此纹理的绿色通道值会与.clearcoatRoughness相乘，用于改变clear coat的粗糙度，默认为null

9 .defines : Object

如下形式的对象:

javascript 复制代码

{

	'STANDARD': ''
	'PHYSICAL': '',

};

WebGLRenderer使用它来选择shaders。

10 .ior : Float

为非金属材质所设置的折射率，范围由1.0到2.333。默认为1.5。

11 .reflectivity : Float

反射率，由0.0到1.0。默认为0.5, 相当于折射率1.5。

这模拟了非金属材质的反射率。当metalness为1.0时，此属性无效。

12 .sheen : Float

光泽层的强度,范围是0.0到1.0。默认为0.0。

13 .sheenRoughness : Float

光泽层的粗糙度，由0.0到1.0。默认值是1.0。

14 .sheenRoughnessMap : Texture

此纹理的透明通道会与.sheenRoughness相乘，用于改变光泽层的粗糙度，默认为null;

15 .sheenColor : Color

光泽颜色，默认为0x000000黑色。

16 .sheenColorMap : Texture

此纹理的RGB通道会与.sheenColor光泽颜色相乘，最终作为光泽颜色结果，默认为null。

17 .specularIntensity : Float

用于控制非金属材质高光反射强度的浮点值。漫反射材质对应的值为0。范围从0.0到1.0。默认值为1.0。

18 .specularIntensityMap : Texture

此纹理的alpha通道将与.specularIntensity相乘，用于逐像素地控制高光强度。默认值为null。

19 .specularColor : Color

非金属材质在垂直于法线方向观看时的高光反射颜色。默认值为0xffffff，白色。

20 .specularColorMap : Texture

此纹理的alpha通道将与.specularColor相乘，用于逐像素地控制高光颜色。默认值为null。

21 .thickness : Float

The thickness of the volume beneath the surface. The value is given in the coordinate space of the mesh. If the value is 0 the material is thin-walled. Otherwise the material is a volume boundary. Default is 0.

22 .thicknessMap : Texture

A texture that defines the thickness, stored in the G channel. This will be multiplied by .thickness. Default is null.

23 .transmission : Float

透光率（或者说透光性），范围从0.0到1.0。默认值是0.0。

很薄的透明或者半透明的塑料、玻璃材质即便在几乎完全透明的情况下仍旧会保留反射的光线，透光性属性用于这种类型的材质。

当透光率不为0的时候, opacity透明度应设置为1.

24 .transmissionMap : Texture

此纹理的红色通道会与透光性.transmission相乘最为最终的透光性结果。默认为null。

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.MeshPhysicalMaterial({
    transmission: 0.5,
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.12. MeshStandardMaterial 标准网格材质

1 .alphaMap : Texture

alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。默认值为null。

2 .aoMap : Texture

该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UV。

3 .aoMapIntensity : Float

环境遮挡效果的强度。默认值为1。零是不遮挡效果。

4 .bumpMap : Texture

5 .bumpScale : Float

凹凸贴图会对材质产生多大影响。典型范围是0-1。默认值为1。

6 .color : Color

材质的颜色(Color)，默认值为白色 (0xffffff)。

7 .defines : Object

如下形式的对象:

{ 'STANDARD': '' };WebGLRenderer使用它来选择shaders。

8 .displacementMap : Texture

9 .displacementScale : Float

位移贴图对网格的影响程度（黑色是无位移，白色是最大位移）。如果没有设置位移贴图，则不会应用此值。默认值为1。

10 .displacementBias : Float

位移贴图在网格顶点上的偏移量。如果没有设置位移贴图，则不会应用此值。默认值为0。

11 .emissive : Color

材质的放射（光）颜色，基本上是不受其他光照影响的固有颜色。默认为黑色。

12 .emissiveMap : Texture

13 .emissiveIntensity : Float

放射光强度。调节发光颜色。默认为1。

14 .envMap : Texture

环境贴图，为了能够保证物理渲染准确，您应该添加由PMREMGenerator预处理过的环境贴图，默认为null。

15 .envMapIntensity : Float

通过乘以环境贴图的颜色来缩放环境贴图的效果。

16 .flatShading : Boolean

定义材质是否使用平面着色进行渲染。默认值为false。

17 .fog : Boolean

材质是否受雾影响。默认为true。

18 .isMeshStandardMaterial : Boolean

检查当前对象是否为标准网格材质的标记。

19 .lightMap : Texture

光照贴图。默认值为null。lightMap需要第二组UV。

20 .lightMapIntensity : Float

烘焙光的强度。默认值为1。

21 .map : Texture

颜色贴图。可以选择包括一个alpha通道，通常与.transparent 或.alphaTest。默认为null。纹理贴图颜色由漫反射颜色.color调节。

22 .metalness : Float

材质与金属的相似度。非金属材质，如木材或石材，使用0.0，金属使用1.0，通常没有中间值。默认值为0.0。0.0到1.0之间的值可用于生锈金属的外观。如果还提供了metalnessMap，则两个值相乘。

23 .metalnessMap : Texture

该纹理的蓝色通道用于改变材质的金属度。

24 .normalMap : Texture

25 .normalMapType : Integer

法线贴图的类型。

选项为THREE.TangentSpaceNormalMap（默认）和THREE.ObjectSpaceNormalMap。

26 .normalScale : Vector2

法线贴图对材质的影响程度。典型范围是0-1。默认值是Vector2设置为（1,1）。

26 .refractionRatio : Float

空气的折射率（IOR）（约为1）除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。 The index of refraction (IOR) of air (approximately 1) divided by the index of refraction of the material. It is used with environment mapping mode THREE.CubeRefractionMapping. 折射率不应超过1。默认值为0.98。

27 .roughness : Float

材质的粗糙程度。0.0表示平滑的镜面反射，1.0表示完全漫反射。默认值为1.0。如果还提供roughnessMap，则两个值相乘。

28 .roughnessMap : Texture

该纹理的绿色通道用于改变材质的粗糙度。

29 .wireframe : Boolean

将几何体渲染为线框。默认值为false（即渲染为平面多边形）。

30 .wireframeLinecap : String

定义线两端的外观。可选值为 'butt'，'round' 和 'square'。默认为'round'。

该属性对应2D Canvas lineJoin属性，并且会被WebGL渲染器忽略。

31 .wireframeLinejoin : String

定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。

该属性对应2D Canvas lineJoin属性，并且会被WebGL渲染器忽略。

32 .wireframeLinewidth : Float

控制线框宽度。默认值为1。

示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.MeshStandardMaterial({
    transmission: 0.5,
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.13. MeshToonMaterial 一种实现卡通着色的材质。

1 .alphaMap : Texture

alpha 贴图是一种灰度纹理，可控制整个表面的不透明度（黑色：完全透明；白色：完全不透明）。默认为空。

仅使用纹理的颜色，如果存在则忽略alpha通道。对于RGB和RGBA纹理，由于在DXT压缩和未压缩的RGB565格式中为绿色提供了额外的精度，WebGL渲染器将在对该纹理进行采样时使用绿色通道。仅亮度和亮度/alpha纹理也将按预期工作。

2 .aoMap : Texture

该纹理的红色通道用作环境遮挡贴图。默认为空。aoMap需要第二组UV。

3 .aoMapIntensity : Float

环境遮挡效果的强度。默认值为1。零表示没有遮挡效果。

4 .bumpMap : Texture

创建凹凸贴图的纹理。黑色和白色值映射到与灯光相关的感知深度。凹凸实际上不会影响对象的几何形状，只会影响光照。如果定义了法线贴图，这将被忽略。

5 .bumpScale : Float

凹凸贴图对材质的影响程度。典型范围是0-1。默认值为1。

6 .color : Color

材质的颜色Color，默认设置为白色 (0xffffff)。

7 .displacementMap : Texture

置换贴图影响网格顶点的位置。与其他仅影响材质明暗的贴图不同，置换的顶点可以投射阴影、阻挡其他对象，并以其他方式充当真实几何体。位移纹理是一个图像，其中每个像素的值（白色为最高）映射到网格的顶点并重新定位。

8 .displacementScale : Float

置换贴图对网格的影响程度（黑色表示无置换，白色表示最大置换）。如果没有置换贴图集，则不会应用此值。默认值为1。

9 .displacementBias : Float

置换贴图值在网格顶点上的偏移量。如果没有置换贴图集，则不会应用此值。默认为0。

10 .emissive : Color

材料的发射（光）颜色，本质上是一种不受其他光照影响的纯色。默认为黑色。

11 .emissiveMap : Texture

设置发射（发光）贴图。默认为空。发射贴图颜色由发射颜色和发射强度调制。如果您有自发光贴图，请务必将自发光颜色设置为黑色以外的颜色。

12 .emissiveIntensity : Float

发射光的强度。调制发光颜色。默认值为1。

13 .fog : Boolean

材质是否受雾影响。默认为true。

14 .gradientMap : Texture

卡通着色的渐变贴图。使用此类纹理时，需要将Texture.minFilterTexture.minFilter和Texture.magFilterTexture.magFilter设置为THREE.NearestFilter。默认为空。

15 .lightMap : Texture

光照贴图。默认为空。lightMap需要第二组UV。

16 .lightMapIntensity : Float

烘焙光的强度。默认值为1。

17 .map : Texture

彩色地图。可以选择包含一个alpha通道，通常与.transparent或.alphaTest结合使用。默认为空。纹理贴图颜色由漫反射.color.color调制。

18 .normalMap : Texture

创建法线贴图的纹理。RGB值影响每个像素片段的表面法线并改变颜色的点亮方式。法线贴图不会改变表面的实际形状，只会改变光照。如果材质具有使用左手惯例创作的法线贴图，则应取反normalScale的y分量以补偿不同的手性。

19 .normalMapType : Integer

法线贴图的类型。

选项为THREE.TangentSpaceNormalMap（默认）和THREE.ObjectSpaceNormalMap。

20 .normalScale : Vector2

法线贴图对材质的影响有多大。典型范围是0-1。默认是设置为(1,1)的二维向量Vector2。

21 .wireframe : Boolean

将几何渲染为线框。默认为false（即呈现为平面多边形）。

22 .wireframeLinecap : String

定义线端的外观。可能的值为"butt"、"round"和"square"。默认为"圆形"。

这对应于2DCanvas的lineCap属性，它会被WebGL渲染器忽略。

23 .wireframeLinejoin : String

定义线接头的外观。可能的值是"round"、"bevel"和"miter"。默认为"圆形"。

这对应于2DCanvas的lineCap属性，它会被WebGL渲染器忽略。

24 .wireframeLinewidth : Float

控制线框厚度。默认值为1。

示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.MeshToonMaterial({
    wireframe: true,
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.14. PointsMaterial 点材质

1 .alphaMap : Texture

alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。默认值为null。

2 .color : Color

材质的颜色(Color)，默认值为白色 (0xffffff)。

3 .fog : Boolean

材质是否受雾影响。默认为true。

4 .map : Texture

使用来自Texture的数据设置点的颜色。可以选择包括一个alpha通道，通常与 .transparent或.alphaTest。

5 .size : Number

设置点的大小。默认值为1.0。

Will be capped if it exceeds the hardware dependent parameter gl.ALIASED_POINT_SIZE_RANGE.

6 .sizeAttenuation : Boolean

指定点的大小是否因相机深度而衰减。（仅限透视摄像头。）默认为true。

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const vertices = []

  for (let i = 0; i < 10000; i = i + 100) {
    const x = THREE.MathUtils.randFloatSpread(2000)
    const y = THREE.MathUtils.randFloatSpread(2000)
    const z = THREE.MathUtils.randFloatSpread(2000)

    vertices.push(x, y, z)
  }

  const geometry = new THREE.BufferGeometry(10)
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))
  const material = new THREE.PointsMaterial({ color: 0x00ff00 })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.15. RawShaderMaterial 原始着色器材质

继承继承类及标准材质的属性和方法。

示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.RawShaderMaterial({
    uniforms: {
      time: { value: 1.0 },
    },
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.16. ShaderMaterial 着色器材质

1 .clipping : Boolean

定义此材质是否支持剪裁; 如果渲染器传递clippingPlanes uniform，则为true。默认值为false。

2 .defaultAttributeValues : Object

当渲染的几何体不包含这些属性但材质包含这些属性时，这些默认值将传递给shaders。这可以避免在缓冲区数据丢失时出错。

javascript 复制代码

this.defaultAttributeValues = {
	'color': [ 1, 1, 1 ],
	'uv': [ 0, 0 ],
	'uv1': [ 0, 0 ]
};

3 .defines : Object

使用 #define 指令在GLSL代码为顶点着色器和片段着色器定义自定义常量；每个键/值对产生一行定义语句：

defines: {

FOO: 15,

BAR: true

}这将在GLSL代码中产生如下定义语句：

#define FOO 15

#define BAR true

3 .extensions : Object

一个有如下属性的对象：

javascript 复制代码

this.extensions = {
	derivatives: false, // set to use derivatives
	fragDepth: false, // set to use fragment depth values
	drawBuffers: false, // set to use draw buffers
	shaderTextureLOD: false // set to use shader texture LOD
};

4 .fog : Boolean

定义材质颜色是否受全局雾设置的影响; 如果将fog uniforms传递给shader，则为true。默认值为false。

5 .fragmentShader : String

片元着色器的GLSL代码。这是shader程序的实际代码。在上面的例子中， vertexShader 和 fragmentShader 代码是从DOM（HTML文档）中获取的；它也可以作为一个字符串直接传递或者通过AJAX加载。

6 .glslVersion : String

Defines the GLSL version of custom shader code. Only relevant for WebGL 2 in order to define whether to specify GLSL 3.0 or not. Valid values are THREE.GLSL1 or THREE.GLSL3. Default is null.

7 .index0AttributeName : String

如果设置，则调用gl.bindAttribLocation 将通用顶点索引绑定到属性变量。默认值未定义。

8 .isShaderMaterial : Boolean

Read-only flag to check if a given object is of type ShaderMaterial.

9 .lights : Boolean

材质是否受到光照的影响。默认值为 false。如果传递与光照相关的uniform数据到这个材质，则为true。默认是false。

10 .linewidth : Float

控制线框宽度。默认值为1。

由于OpenGL Core Profile与大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1。

11 .flatShading : Boolean

定义材质是否使用平面着色进行渲染。默认值为false。

12 .uniforms : Object

如下形式的对象：

{ "uniform1": { value: 1.0 }, "uniform2": { value: 2 } }指定要传递给shader代码的uniforms；键为uniform的名称，值(value)是如下形式：

{ value: 1.0 }这里 value 是uniform的值。名称必须匹配 uniform 的name，和GLSL代码中的定义一样。注意，uniforms逐帧被刷新，所以更新uniform值将立即更新GLSL代码中的相应值。

13 .uniformsNeedUpdate : Boolean

Can be used to force a uniform update while changing uniforms in Object3D.onBeforeRender(). Default is false.

14 .vertexColors : Boolean

Defines whether vertex coloring is used. Default is false.

15 .vertexShader : String

顶点着色器的GLSL代码。这是shader程序的实际代码。在上面的例子中，vertexShader 和 fragmentShader 代码是从DOM（HTML文档）中获取的；它也可以作为一个字符串直接传递或者通过AJAX加载。

16 .wireframe : Boolean

将几何体渲染为线框(通过GL_LINES而不是GL_TRIANGLES)。默认值为false（即渲染为平面多边形）。

17 .wireframeLinewidth : Float

控制线框宽度。默认值为1。

示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.ShaderMaterial({
    uniforms: {
      time: { value: 1.0 },
      resolution: { value: new THREE.Vector2() },
    },
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.17. ShadowMaterial 阴影材质

1 .color : Color

Color of the material, by default set to black (0x000000).

2 .fog : Boolean

材质是否受雾影响。默认为true。

3 .transparent : Boolean

定义此材质是否透明。默认值为 true。

示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const geometry = new THREE.SphereGeometry(10)
  const material = new THREE.ShadowMaterial({})
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  renderer.render(scene, camera)
}

3.18. SpriteMaterial 点精灵材质

1 .alphaMap : Texture

alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。默认值为null。

2 .color : Color

材质的颜色(Color)，默认值为白色 (0xffffff)。 .map会和 color 相乘。

3 .fog : Boolean

材质是否受雾影响。默认为true。

4 .isSpriteMaterial : Boolean

Read-only flag to check if a given object is of type SpriteMaterial.

5 .map : Texture

颜色贴图。可以选择包括一个alpha通道，通常与.transparent 或.alphaTest。默认为null。

6 .rotation : Radians

sprite的转动，以弧度为单位。默认值为0。

7 .sizeAttenuation : Boolean

精灵的大小是否会被相机深度衰减。（仅限透视摄像头。）默认为true。

8 .transparent : Boolean

定义此材质是否透明。默认值为 true。
示例代码：

javascript 复制代码

import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const fov = 40
  const aspect = renderer.domElement?.clientWidth / renderer.domElement?.clientHeight // the canvas default
  const near = 0.1
  const far = 1000
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 50, 0)
  camera.up.set(0, 0, 1)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()

  const map = new THREE.TextureLoader().load('textures/sprite.png')
  const material = new THREE.SpriteMaterial({ map: map, color: 0xffffff })

  const sprite = new THREE.Sprite(material)
  sprite.scale.set(200, 200, 1)
  scene.add(sprite)

  const geometry = new THREE.SphereGeometry(10)
  //   const material = new THREE.ShadowMaterial({})
  //   const mesh = new THREE.Mesh(geometry, material)
  //   scene.add(mesh)

  renderer.render(scene, camera)
}