欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年12月01日 10:33:53   作者：隨便起一個(gè)名字吧  
這篇文章主要為大家詳細(xì)介紹了如何利用Three.js中的BufferGeometry繪制酷炫的三角形，文中的示例代碼講解詳細(xì)，感興趣的可以嘗試一下

在前一章中，我們通過(guò) BufferGeometry 創(chuàng)建了一個(gè)正方形，本節(jié)我們利用 BufferGeometry 打造一簇酷炫的三角形，最終的效果如下圖所示：

從效果圖中可以發(fā)現(xiàn)，每一個(gè)三角形的位置、大小、顏色都是隨機(jī)的。

// 共有50個(gè)三角形
for (let i = 0; i < 50; i++) {
    // 每一個(gè)三角形，需要三個(gè)頂點(diǎn)，每個(gè)頂點(diǎn)需要3個(gè)值
    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array(9);
    for (let j = 0; j < 9; j++) {
        // 頂點(diǎn)的位置在 -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);
}

代碼并不復(fù)雜，創(chuàng)建50個(gè)三角形，每個(gè)三角形有三個(gè)頂點(diǎn)，每個(gè)頂點(diǎn)由 x 、y、z 三個(gè)值組成，所以 Float32Array 中需要存儲(chǔ)9個(gè)值，而每個(gè)值都在 -5 ~ 5 之間。實(shí)現(xiàn)后的效果圖如下所示：

最后我們?yōu)?MeshBasicMaterial 添加一下透明效果即可，如文檔所示，我們不僅需要設(shè)置 opacity，還需要將材質(zhì)的 transparent 設(shè)置成 true。

所以我們將 material 的創(chuàng)建改成下述代碼：

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

至此，我們的酷炫的一簇三角形已經(jīng)完成，但是仍然存在一些問(wèn)題——瀏覽器尺寸變化時(shí)畫面并不會(huì)自適應(yīng)，下面我們就來(lái)解決這個(gè)問(wèn)題。

首先我們要監(jiān)聽(tīng) window 的 resize 事件，并在其中更新畫布的大小

// 監(jiān)聽(tīng)畫面變化，更新渲染渲染畫面
window.addEventListener("resize", () => {
    // 更新渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);
})

但是運(yùn)行后會(huì)發(fā)現(xiàn)，雖然畫布大小發(fā)生了變化，但同時(shí)繪制的圖形也被壓縮了

我們要更新攝像頭的寬高比，同時(shí)，我們還需要調(diào)用 updateProjectionMatrix() 方法用于更新攝像機(jī)投影矩陣。在 resize 事件中繼續(xù)添加下述代碼：

// 更新攝像頭
camera.aspect = window.innerWidth / window.innerHeight;
// 更新攝像機(jī)的投影矩陣，在任何參數(shù)被改變以后必須被調(diào)用。
camera.updateProjectionMatrix();

如此便完成了我們的訴求，當(dāng)瀏覽器尺寸發(fā)生變化時(shí)，渲染的畫面也隨之更新。

到此這篇關(guān)于利用Three.js繪制酷炫的三角形的文章就介紹到這了,更多相關(guān)Three.js繪制三角形內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論