65.Three.js案例-使用 MeshNormalMaterial 和 MeshDepthMaterial 创建 3D 图形

65.Three.js案例-使用 MeshNormalMaterial 和 MeshDepthMaterial 创建 3D 图形

实现效果

在该案例中，Three.js 被用来创建一个包含多个 3D 对象的场景。其中包括：

• 圆环结（TorusKnot）
• 立方体（Box）
• 球体（Sphere）

这些对象使用 MeshNormalMaterial 来渲染，并且整个场景背景为白色，所有对象位于一个居中的容器中。

知识点

WebGLRenderer (WebGL 渲染器)

构造器

THREE.WebGLRenderer(parameters)

参数	类型	描述
parameters	Object	包含渲染器选项的对象

常用参数：

• antialias：布尔值，启用抗锯齿以获得更平滑的渲染结果。
• alpha：布尔值，是否支持透明背景（默认为黑色）。
• precision：字符串，着色器精度 (highp, mediump, lowp)。

方法

setSize(width, height, updateStyle)

设置渲染器的尺寸。

• width：渲染器的宽度（像素）。
• height：渲染器的高度（像素）。
• updateStyle：是否更新 canvas 的样式尺寸（可选，默认为 true）。

setClearColor(color, opacity)

设置渲染器的清除颜色。

• color：十六进制颜色值或 CSS 字符串表示的颜色。
• opacity：透明度（0.0 到 1.0）。

PerspectiveCamera (透视相机)

构造器

THREE.PerspectiveCamera(fov, aspect, near, far)

参数	类型	描述
fov	Number	视野角度（单位是度），即垂直视角范围
aspect	Number	渲染区域的宽高比（通常用窗口宽度除以高度）
near	Number	近裁剪面（相机视图可见范围的最近距离）
far	Number	远裁剪面（相机视图可见范围的最远距离）

方法

position.set(x, y, z)

设置相机的位置坐标。

lookAt(vector)

让相机朝向指定的三维坐标点。

Scene (场景)

构造器

THREE.Scene()

用于创建一个空的场景对象，之后可以将相机、灯光、几何体等添加到场景中。

属性

overrideMaterial : Material

如果被赋值，则场景中的所有物体都会使用这个材质进行渲染，常用于调试。

translateX(value)

沿 X 轴移动整个场景。

MeshNormalMaterial (法线材质)

构造器

THREE.MeshNormalMaterial(options)

参数	类型	描述
options	Object	可选参数对象

常见参数：

• wireframe：布尔值，是否显示线框模式。
• flatShading：布尔值，是否使用平面着色。
• visible：布尔值，控制材质是否可见。

说明：此材质会根据物体表面的法线方向映射成 RGB 颜色，用于调试模型的表面方向。

TorusKnotGeometry (圆环结几何体)

构造器

THREE.TorusKnotGeometry(radius, tube, tubularSegments, radialSegments, p, q)

参数	类型	描述
radius	Number	圆环结的主半径
tube	Number	管道的半径
tubularSegments	Number	管道分段数（越高越光滑）
radialSegments	Number	径向分段数（越高越光滑）
p	Number