利用Three.js绘制酷炫的三角形
作者：随便起一个名字吧
这篇文章主要为大家详细介绍了如何利用Three.js中的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绘制三角形内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！