Three.js 学习系列（三）Geometry 与 Material 全面拆解

positions : [x0, y0, z0, x1, y1, z1, x2, y2, z2, ……]   ← 顶点位置
normals   : [nx0, ny0, nz0, ……]                       ← 顶点法线（用于光照）
uvs       : [u0, v0, u1, v1, ……]                      ← 纹理坐标
indices   : [0, 1, 2, 2, 3, 0, ……]                    ← 三角形索引（可选）
colors    : [r0, g0, b0, ……]                          ← 顶点颜色（可选）

class BufferGeometry {
  attributes = {}    // { position: BufferAttribute, normal: ..., uv: ... }
  index      = null  // BufferAttribute | null
  groups     = []    // 分材质多组渲染时用
}

class BufferAttribute {
  array       // 实际数据（Float32Array / Uint16Array ……）
  itemSize    // 每个顶点占几个数字（position = 3, uv = 2, color = 3）
  count       // 顶点数
  normalized  // 是否需要标准化（针对整型数组）
  usage       // STATIC_DRAW / DYNAMIC_DRAW
}

const geometry = new THREE.BufferGeometry()

// 一个三角形 = 3 个顶点 × 3 个数字（x, y, z）= 9 个数字
const vertices = new Float32Array([
  -1, -1, 0,
   1, -1, 0,
   0,  1, 0,
])

geometry.setAttribute(
  'position',
  new THREE.BufferAttribute(vertices, 3)   // 3 = itemSize
)

const mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x44aa88 }))
scene.add(mesh)

geometry.setIndex([0, 1, 2,  2, 3, 0, ...])  // 用索引复用顶点

Material（基类）
  ├── MeshBasicMaterial       不参与光照，纯色或贴图
  ├── MeshNormalMaterial      用法线着色（调试用）
  ├── MeshDepthMaterial       用深度着色（调试/阴影）
  ├── MeshMatcapMaterial      用 matcap 球贴图模拟光照
  ├── MeshLambertMaterial     漫反射（旧式 Lambertian 光照模型）
  ├── MeshPhongMaterial       漫反射 + 高光（Phong 光照模型）
  ├── MeshToonMaterial        卡通渲染（色阶分层）
  ├── MeshStandardMaterial    ★ PBR 标准材质（推荐用这个）
  ├── MeshPhysicalMaterial    PBR 扩展（玻璃、布料、清漆涂层）
  ├── ShaderMaterial          自定义 GLSL（Part 07 详谈）
  ├── RawShaderMaterial       完全裸的自定义 shader
  ├── LineBasicMaterial       线段
  ├── LineDashedMaterial      虚线
  ├── PointsMaterial          点云
  ├── SpriteMaterial          始终面向相机的精灵
  └── ShadowMaterial          仅接收阴影

const mat = new THREE.MeshBasicMaterial({
  color: 0xff8844,
  wireframe: false,
  transparent: false,
  opacity: 1,
  map: null,        // 颜色贴图（texture）
  side: THREE.FrontSide,  // 双面：DoubleSide
})

const lambert = new THREE.MeshLambertMaterial({ color: 0x44aa88 })
const phong = new THREE.MeshPhongMaterial({
  color: 0x44aa88,
  specular: 0x222222,
  shininess: 30,
})

const mat = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 0.8,     // 金属度: 0 = 非金属（塑料/木头）, 1 = 纯金属
  roughness: 0.2,     // 粗糙度: 0 = 镜面, 1 = 完全漫反射

  map:           colorTexture,        // 颜色贴图
  normalMap:     normalTexture,       // 法线贴图（凹凸细节）
  roughnessMap:  roughnessTexture,    // 粗糙度贴图
  metalnessMap:  metalnessTexture,    // 金属度贴图
  aoMap:         aoTexture,            // 环境光遮蔽
  emissiveMap:   emissiveTexture,     // 自发光
  envMap:        envCubeTexture,      // 环境反射（必需，否则金属看起来怪）
})

metalness=0, roughness=1   →   哑光塑料
metalness=0, roughness=0   →   光滑塑料/陶瓷
metalness=1, roughness=0   →   抛光金属（镜面）
metalness=1, roughness=1   →   磨砂金属

new THREE.MeshPhysicalMaterial({
  clearcoat: 1,            // 清漆涂层（汽车漆、指甲油）
  clearcoatRoughness: 0.1,
  transmission: 1,         // 透射（玻璃、酒杯）
  thickness: 0.5,          // 透射厚度
  ior: 1.5,                // 折射率
  sheen: 0.5,              // 布料光泽（天鹅绒、丝绸）
  iridescence: 0.5,        // 虹彩（CD、肥皂泡）
  attenuationColor: 0xffffff,
  attenuationDistance: 1,
})

new THREE.MeshNormalMaterial()    // 用法线方向着色（每面颜色不同）
new THREE.MeshDepthMaterial()     // 用深度着色（近黑远白）

// 一万个点的星空
const positions = new Float32Array(10000 * 3)
for (let i = 0; i < positions.length; i++) positions[i] = (Math.random() - 0.5) * 100
const geom = new THREE.BufferGeometry()
geom.setAttribute('position', new THREE.BufferAttribute(positions, 3))
const stars = new THREE.Points(geom, new THREE.PointsMaterial({ size: 0.1, color: 0xffffff }))
scene.add(stars)

const loader = new THREE.TextureLoader()
const tex = loader.load('/path/to/texture.jpg')

// r152+ 必须显式设置 colorSpace
tex.colorSpace = THREE.SRGBColorSpace  // 颜色贴图用 sRGB
// normalMap / roughnessMap 等"数据贴图"用 NoColorSpace（默认）

tex.generateMipmaps = true
tex.minFilter = THREE.LinearMipmapLinearFilter
tex.anisotropy = renderer.capabilities.getMaxAnisotropy()  // 各向异性过滤

const ShaderLib = {
  basic:     { uniforms, vertexShader, fragmentShader },
  lambert:   { ... },
  phong:     { ... },
  standard:  { ... },
  physical:  { ... },
  matcap:    { ... },
  toon:      { ... },
  points:    { ... },
  // ……
}

common.glsl.js
+ packing.glsl.js
+ uv_pars_fragment.glsl.js
+ map_pars_fragment.glsl.js
+ normalmap_pars_fragment.glsl.js
+ ……
+ standard_frag.glsl.js

const ball = (mat, x) => {
  const m = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), mat)
  m.position.x = x
  scene.add(m)
  return m
}

ball(new THREE.MeshBasicMaterial({ color: 0xff4444 }), -3)
ball(new THREE.MeshLambertMaterial({ color: 0xff4444 }), -1)
ball(new THREE.MeshPhongMaterial({ color: 0xff4444, shininess: 100 }), 1)
ball(new THREE.MeshStandardMaterial({ color: 0xff4444, metalness: 0.8, roughness: 0.2 }), 3)

// 不加光的话 Lambert/Phong/Standard 都是黑的，必须加灯
scene.add(new THREE.AmbientLight(0xffffff, 0.3))
const dir = new THREE.DirectionalLight(0xffffff, 1)
dir.position.set(5, 5, 5)
scene.add(dir)

// 加环境贴图让 Standard 的金属感正常
new THREE.RGBELoader().load('/env.hdr', tex => {
  tex.mapping = THREE.EquirectangularReflectionMapping
  scene.environment = tex
})

const SIZE = 50, SEG = 100
const geo = new THREE.PlaneGeometry(SIZE, SIZE, SEG, SEG)
geo.rotateX(-Math.PI / 2)  // 让它平躺

const positions = geo.attributes.position
const mesh = new THREE.Mesh(geo, new THREE.MeshStandardMaterial({
  color: 0x2266aa, wireframe: false, side: THREE.DoubleSide,
}))
scene.add(mesh)

// 每帧更新顶点高度
const clock = new THREE.Clock()
renderer.setAnimationLoop(() => {
  const t = clock.getElapsedTime()
  for (let i = 0; i < positions.count; i++) {
    const x = positions.getX(i)
    const z = positions.getZ(i)
    positions.setY(i, Math.sin(x * 0.3 + t) * 0.5 + Math.cos(z * 0.3 + t * 0.7) * 0.5)
  }
  positions.needsUpdate = true   // ★ 关键：通知 GPU 重新上传数据
  geo.computeVertexNormals()     // 重算法线，否则光照不对
  renderer.render(scene, camera)
})