利用Three.js绘制酷炫的三角形

时间:2022-12-01 随便起一个名字吧人气:0

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

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

加载全部内容