Three.js 打造酷炫的三角形

在前一章中，我们通过 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(); 

如此便完成了我们的诉求，当浏览器尺寸发生变化时，渲染的画面也随之更新。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享