【22】实战—three.js中BufferGeometry设置顶点创建矩形

本文介绍了如何使用 Three.js 中的 BufferGeometry 创建一个矩形。示例代码展示了创建场景、相机、几何体、材质和物体，并将这些组件整合以渲染出一个矩形。该过程涉及到以下关键步骤：

1. 场景创建：使用 THREE.Scene 创建一个新的场景。
2. 相机设置：创建一个 THREE.PerspectiveCamera 透视相机，并设置其位置。
3. 物体添加：通过定义顶点数据创建一个 THREE.BufferGeometry，并使用 THREE.MeshBasicMaterial 创建材质，然后结合这两者创建一个网格（Mesh）并添加到场景中。
4. 渲染器初始化：创建 THREE.WebGLRenderer 并设置尺寸，将渲染内容添加到 DOM 容器中。
5. 控制器引入：利用 OrbitControls 添加轨道控制器，实现场景的交互式浏览。
6. 辅助工具：添加 THREE.AxesHelper 帮助在场景中显示坐标轴。
7. 全屏和响应式设置：添加双击监听事件用于全屏切换，以及窗口大小变化监听事件来更新相机视角和渲染器尺寸。
8. 动画循环：定义一个渲染函数 renders，并递归调用以持续更新控制器和渲染场景。

此外，示例代码还包含了样式设置，用于调整渲染画布的大小和背景颜色。