从three.js中的3个顶点渲染平面

在Three.js中，从一个简单的三角形开始，你可以创建一个平面（即四边形）。虽然Three.js没有直接的平面几何体，但你可以通过创建两个三角形来组成一个四边形。下面是一个示例，展示如何使用三个顶点（实际上会使用六个顶点来组成两个三角形）来渲染一个平面。

步骤概述

初始化场景、相机和渲染器
定义平面的几何形状
创建材质
组合几何体和材质为网格
将网格添加到场景中
渲染循环

示例代码

html<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Three.js 平面示例</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
<script>
    // 1. 初始化场景、相机和渲染器
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 2. 定义平面的几何形状
    // 使用BufferGeometry自定义顶点
    const geometry = new THREE.BufferGeometry();

    // 定义四个顶点（一个平面由两个三角形组成）
    const vertices = new Float32Array([
        // 第一个三角形
        -1, -1,  0, // 左下
         1, -1,  0, // 右下
         0,  1,  0, // 顶部

        // 第二个三角形
        -1, -1,  0, // 左下
         0,  1,  0, // 顶部
         1, -1,  0  // 右下（与第一个三角形共享）
    ]);

    // 将顶点数据添加到几何体
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

    // 3. 创建材质
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }); // 绿色线框

    // 如果想要填充颜色，可以使用 MeshLambertMaterial 或其他材质
    // const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });

    // 4. 组合几何体和材质为网格
    const plane = new THREE.Mesh(geometry, material);

    // 5. 将网格添加到场景中
    scene.add(plane);

    // 调整相机位置
    camera.position.z = 5;

    // 6. 渲染循环
    function animate() {
        requestAnimationFrame(animate);
        // 可以在这里添加动画代码，例如旋转平面
        // plane.rotation.x += 0.01;
        // plane.rotation.y += 0.01;
        renderer.render(scene, camera);
    }

    animate();

    // 处理窗口大小变化
    window.addEventListener('resize', () => {
        const width = window.innerWidth;
        const height = window.innerHeight;
        renderer.setSize(width, height);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
    });
</script>
</body>
</html>

解释

初始化场景、相机和渲染器：
- Scene：所有3D对象的容器。
- PerspectiveCamera：透视相机，模拟人眼视角。
- WebGLRenderer：基于WebGL的渲染器，用于将场景渲染到网页上。
定义平面的几何形状：
- 使用BufferGeometry和BufferAttribute来定义顶点位置。
- 一个平面通常由两个三角形组成，因此需要定义六个顶点（尽管有些顶点是共享的）。
- 在上面的示例中，为了简化，实际上只定义了四个唯一的顶点，并重复使用了部分顶点。这可能需要根据具体需求调整索引。
注意：更高效的方法是使用索引缓冲区（IndexBuffer），这样可以避免重复顶点。下面是一个优化后的版本： javascript// 使用索引优化顶点定义 const geometry = new THREE.BufferGeometry(); const vertices = new Float32Array([ -1, -1, 0, // 0 1, -1, 0, // 1 0, 1, 0 // 2 ]); geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); const indices = new Uint16Array([ 0, 1, 2, // 第一个三角形 0, 2, 1 // 第二个三角形（如果需要不同的拓扑结构） ]); // 实际上，对于平面，只需要两个三角形共享边 // 正确的索引应该是 0,1,2 和 0,2,1 是相同的平面，因此通常只需要定义一次 // 更常见的是使用如下索引定义两个三角形： const indices = new Uint16Array([ 0, 1, 2, // 第一个三角形 0, 2, 3 // 第二个三角形（需要四个顶点） ]); // 因此，更准确的做法是使用四个顶点和适当的索引。为了简化，建议使用Three.js提供的PlaneGeometry，它已经为你处理好了所有几何细节： javascriptconst geometry = new THREE.PlaneGeometry(2, 2); // 宽度和高度均为2 const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }); const plane = new THREE.Mesh(geometry, material); scene.add(plane);
创建材质：
- MeshBasicMaterial：不受光照影响的材质，适合简单的展示。
- MeshLambertMaterial 或 MeshPhongMaterial：受光照影响的材质，适合更真实的渲染效果。
组合几何体和材质为网格：
- Mesh对象将几何体和材质结合在一起，形成一个可以在场景中渲染的对象。
将网格添加到场景中：
- 使用scene.add(plane)将平面添加到场景中。
渲染循环：
- 使用requestAnimationFrame创建一个渲染循环，持续更新和渲染场景。

使用 `PlaneGeometry` 的简化示例

如果你不需要自定义顶点，使用Three.js内置的PlaneGeometry会更加简便：

html<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Three.js PlaneGeometry 示例</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
<script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 使用 PlaneGeometry 创建平面
    const geometry = new THREE.PlaneGeometry(2, 2); // 宽度和高度均为2
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
    const plane = new THREE.Mesh(geometry, material);
    scene.add(plane);

    camera.position.z = 5;

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }

    animate();
</script>
</body>
</html>

这个示例创建了一个简单的绿色线框平面，位于坐标原点，大小为2x2单位。