法线&法线辅助器

光的反射如下图所示：

由法线（Normal）可以得到入射角和反射角，也就可以得到光线的“反光”。

在上一节项目中，我们增加背景贴图：

// 加载背景贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping
  scene.background = texture
  planeMaterial.envMap = texture
  planeMaterial2.envMap = texture
})

可以看到，第一个平面由反光，第二个平面没有反光。

这是因为，第一个平面有法线，第二个平面没有法线。

我们给第二个平面增加法线：

// 设置法线
const normal = new Float32Array([
  0, 0, 1,
  0, 0, 1,
  0, 0, 1,
  0, 0, 1,
])
planeGeometry2.setAttribute('normal', new THREE.BufferAttribute(normal, 3))

并添加顶点法线辅助器：

// 导入顶点法线辅助器
import { VertexNormalsHelper } from 'three/examples/jsm/helpers/VertexNormalsHelper'

//...

// 设置顶点法线辅助器
const vertexNormalsHelper = new VertexNormalsHelper(plane2, 1)
scene.add(vertexNormalsHelper)

本节示例代码：https://github.com/wukaipeng-dev/threejs-demo/blob/main/03-geometry/src/main-normal.ts