亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

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

// 共有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);
}

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

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

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

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

至此，我們的酷炫的一簇三角形已經完成，但是仍然存在一些問題——瀏覽器尺寸變化時畫面并不會自適應，下面我們就來解決這個問題。

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

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

但是運行后會發(fā)現，雖然畫布大小發(fā)生了變化，但同時繪制的圖形也被壓縮了

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

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

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

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

相關文章

最新評論