利用Three.js繪制酷炫的三角形
在前一章中，我們通過(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à)面并不會(huì)自適應(yīng)，下面我們就來(lái)解決這個(gè)問(wèn)題。
首先我們要監(jiān)聽(tīng) window 的 resize 事件，并在其中更新畫(huà)布的大小
// 監(jiān)聽(tīng)畫(huà)面變化，更新渲染渲染畫(huà)面
window.addEventListener("resize", () => {
// 更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
})但是運(yùn)行后會(huì)發(fā)現(xiàn)，雖然畫(huà)布大小發(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í)，渲染的畫(huà)面也隨之更新。
到此這篇關(guān)于利用Three.js繪制酷炫的三角形的文章就介紹到這了,更多相關(guān)Three.js繪制三角形內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序如何獲取用戶手機(jī)號(hào)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
本文主要給大家介紹通過(guò)一個(gè)叫jq的小工具，非常的實(shí)用，給大家參考下2014-11-11
繼承是面向?qū)ο缶幊讨械囊粋€(gè)重要概念,它允許一個(gè)對(duì)象（子類(lèi)或派生類(lèi)）獲取另一個(gè)對(duì)象（父類(lèi)或基類(lèi)）的屬性和方法,在 JavaScript 中,有多種方式可以實(shí)現(xiàn)繼承,本文將給大家介紹六種常見(jiàn)的JavaScript繼承方法,需要的朋友可以參考下2023-09-09
Data()日期對(duì)象是一個(gè)構(gòu)造函數(shù),必須使用new來(lái)調(diào)用創(chuàng)建我們的日期對(duì)象,下面這篇文章主要給大家介紹了關(guān)于JS中Date的一些常用方法,需要的朋友可以參考下2022-10-10
通過(guò) window.opener 實(shí)現(xiàn)。關(guān)于這個(gè)對(duì)象的用法請(qǐng)查閱相關(guān)資料。2008-11-11
JS簡(jiǎn)單循環(huán)遍歷json數(shù)組的方法
這篇文章主要介紹了JS簡(jiǎn)單循環(huán)遍歷json數(shù)組的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了JavaScript循環(huán)遍歷json數(shù)組的方法,并提供了jQuery遍歷json的方法,需要的朋友可以參考下2016-04-04
JavaScript SHA512&SHA256加密算法詳解
本文給大家分享的是javascript版的SHA512&SHA256加密算法的代碼，以及用法，有需要的小伙伴可以參考下。2015-08-08
JS數(shù)組方法concat()用法實(shí)例分析
這篇文章主要介紹了JS數(shù)組方法concat()用法,結(jié)合實(shí)例形式分析了JS數(shù)組concat()方法具體功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
這篇文章主要介紹了詳解微信小程序的 request 封裝示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了JS查找數(shù)組中重復(fù)元素的方法,結(jié)合具體實(shí)例形式對(duì)比分析了javascript針對(duì)數(shù)組的遍歷、判斷、排序等相關(guān)操作技巧,需要的朋友可以參考下2017-06-06