Three.js教程：构建矩形平面几何体

Three.js是一款基于WebGL的JavaScript库，用于创建逼真的3D场景。构建矩形平面几何体通常需要以下几个步骤：

1. **导入库**：首先，在HTML文件中引入Three.js库和CSS样式：

<script src="https://threejs.org/build/three.min.js"></script>
<link rel="stylesheet" href="path/to/your/css/styles.css">

2. **初始化场景**：在JavaScript中创建一个`Scene`对象、一个`PerspectiveCamera`和一个`Renderer`：

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);

3. **创建材质和几何体**：使用`THREE.BoxGeometry`创建矩形几何体，并为其设置材质（如`THREE.MeshBasicMaterial`）：

const geometry = new THREE.BoxGeometry(1, 1, 1); // 宽度、高度和深度
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色矩形
const rectangle = new THREE.Mesh(geometry, material);
scene.add(rectangle);

4. **设置相机视角**：移动和旋转摄像机以便看到几何体：

camera.position.z = 5; // 设置相机距离物体的距离
camera.lookAt(scene.position);

5. **渲染循环**：

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

以上就是基本的Three.js教程内容，构建了一个可以旋转的绿色矩形。