Three.js 打造酷炫的三角形

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第9天,点击查看活动详情

在前一章中,我们通过 BufferGeometry 创建了一个正方形,本节我们利用 BufferGeometry 打造一簇酷炫的三角形,最终的效果如下图所示:

1.gif

从效果图中可以发现,每一个三角形的位置、大小、颜色都是随机的。

// 共有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 之间。实现后的效果图如下所示:

image.png

最后我们为 MeshBasicMaterial 添加一下透明效果即可,如文档所示,我们不仅需要设置 opacity,还需要将材质的 transparent 设置成 true。

image.png

所以我们将 material 的创建改成下述代码:

const material = new THREE.MeshBasicMaterial({
    color,
    transparent: true,
    opacity: 0.5,
});

至此,我们的酷炫的一簇三角形已经完成,但是仍然存在一些问题——浏览器尺寸变化时画面并不会自适应,下面我们就来解决这个问题。

首先我们要监听 windowresize 事件,并在其中更新画布的大小

// 监听画面变化,更新渲染渲染画面
window.addEventListener("resize", () => {
    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
})

但是运行后会发现,虽然画布大小发生了变化,但同时绘制的图形也被压缩了

image.png

我们要更新摄像头的宽高比,同时,我们还需要调用 updateProjectionMatrix() 方法用于更新摄像机投影矩阵。在 resize 事件中继续添加下述代码:

// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像机的投影矩阵,在任何参数被改变以后必须被调用。
camera.updateProjectionMatrix();

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

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容