（三十一）THREE.PlaneGeometry 知识详解

THREE.PlaneGeometry 是 Three.js 中用于创建平面几何体的一个类。平面几何体是一个四边形，通常被用作地面、墙壁或其他平面物体的基础。通过调整参数，可以创建出不同大小和平滑度的平面。

构造函数

构造函数 new THREE.PlaneGeometry(width, height, widthSegments, heightSegments) 接受四个参数来定义平面的大小和细分程度。

参数说明

• width：平面的宽度，默认为 1。
• height：平面的高度，默认为 1。
• widthSegments：沿宽度方向的分割段数，默认为 1。增加此值可以提高平面的平滑度。
• heightSegments：沿高度方向的分割段数，默认为 1。增加此值可以提高平面的平滑度。

示例

创建一个基本的平面几何体：

const geometry = new THREE.PlaneGeometry(10, 10);

这将创建一个宽度和高度均为 10 的平面。

创建一个细分程度更高的平面：

const geometry = new THREE.PlaneGeometry(10, 10, 32, 32);

这将创建一个宽度和高度均为 10 的平面，但在宽度和高度方向上分别有 32 个分割段，使得平面更加平滑。

使用 THREE.PlaneGeometry

创建平面几何体之后，通常需要为它添加一个材质，并创建一个 THREE.Mesh 对象来将其添加到场景中。

示例

创建一个带有红色漫反射材质的平面：

const geometry = new THREE.PlaneGeometry(10, 10);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI / 2; // 使平面水平放置
scene.add(plane);

使用其他材质

除了 THREE.MeshBasicMaterial 之外，你还可以使用其他材质，比如 THREE.MeshStandardMaterial 或 THREE.MeshPhysicalMaterial 等，这些材质支持物理基渲染（Physically Based Rendering, PBR），可以使你的平面看起来更加真实。

const geometry = new THREE.PlaneGeometry(10, 10);
const material = new THREE.MeshStandardMaterial({ color: 0x44aa88, metalness: 0.5, roughness: 0.5 });
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

使用纹理

你也可以使用纹理贴图来定义平面的外观：

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');

const geometry = new THREE.PlaneGeometry(10, 10);
const material = new THREE.MeshBasicMaterial({ map: texture });
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

调整几何体的分割段数

增加分割段数可以使得几何体更加平滑，但也可能导致更多的顶点，从而影响渲染性能。因此，在实际应用中需要权衡视觉效果和性能之间的关系。

const geometry = new THREE.PlaneGeometry(10, 10, 64, 64);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

使用 THREE.PlaneBufferGeometry

在 Three.js 中，推荐使用 THREE.PlaneBufferGeometry 替代 THREE.PlaneGeometry，因为 BufferGeometry 类型提供了更高效的顶点数据存储方式，更适合现代 WebGL 渲染引擎。

const geometry = new THREE.PlaneBufferGeometry(10, 10);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

THREE.PlaneGeometry 是一个用于创建平面几何体的类，它提供了灵活的参数设置来调整平面的大小和细分程度。通过结合不同的材质和纹理贴图，可以实现丰富的视觉效果。为了获得更好的性能，建议使用 THREE.PlaneBufferGeometry。平面几何体在许多场景中都非常有用，特别是在需要创建地面、墙壁或者其他平面物体时。