本文详解如何使用Three.js的BufferGeometry创建随机分布的三角形集群，通过Float32Array管理顶点数据并设置透明材质。重点解决浏览器窗口尺寸变化时的画面自适应问题，包括监听resize事件、更新渲染器尺寸及调用摄像机投影矩阵更新方法，确保渲染画面始终与视口匹配。
使用BufferGeometry绘制随机三角形
在上一章里，借助 BufferGeometry 生成了正方形，本章使用 BufferGeometry 构建一组炫酷的三角形，最终呈现效果如下：
观察效果图可知，每个三角形的坐标、尺寸及色彩均处于随机状态。
// 共有50个三角形
for (let i = 0; i < 50; i++) {
// 每一个三角形，需要三个顶点，每个顶点需要3个值
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array(9);
for (let j = 0; j < 9; j++) {
// 顶点的位置在 -5 ~ 5 之间
vertices[j] = Math.random() * 10 - 5;
}
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const color = new THREE.Color(Math.random(), Math.random(), Math.random());
const material = new THREE.MeshBasicMaterial({
color,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}代码逻辑简单，生成50个三角形，每个包含三个顶点，每个顶点由 x、y、z 坐标构成，因此 Float32Array 需容纳9个数值，且每个数值范围在 -5 至 5 之间。实现后的视觉效果如下：
最后，为 MeshBasicMaterial 启用透明属性，参考文档说明，除设置 opacity 外，还需将 transparent 设为 true。
因此，将 material 的初始化代码修改为如下形式：
const material = new THREE.MeshBasicMaterial({
color,
transparent: true,
opacity: 0.5,
});实现浏览器窗口自适应与响应式渲染
至此，炫酷的三角形簇制作完毕，但还存在一个问题——浏览器窗口缩放时画面未自适应，接下来解决此问题。
首先需监听 window 的 resize 事件，并在回调中更新画布尺寸。
// 监听画面变化，更新渲染渲染画面
window.addEventListener("resize", () => {
// 更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
})然而运行后发现，尽管画布尺寸改变，绘制的图形也被拉伸压缩。
需更新摄像机的宽高比，同时调用 updateProjectionMatrix() 方法以更新摄像机投影矩阵。在 resize 事件中追加以下代码：
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像机的投影矩阵，在任何参数被改变以后必须被调用。
camera.updateProjectionMatrix();
如此即达成目标，当浏览器尺寸改变时，渲染画面同步更新。
本文关于利用Three.js绘制炫酷三角形的教程到此结束，更多Three.js绘制三角形相关内容可搜索本站往期文章或继续浏览下文，希望大家今后多多支持本站！