Trix.js是一個(gè)對(duì)初學(xué)者友好的JavaScript庫(kù)，通過(guò)將復(fù)雜的WebGL代碼抽象為可管理的組件來(lái)簡(jiǎn)化3D Web圖形。 1。它使用場(chǎng)景結(jié)構(gòu)，場(chǎng)景固定對(duì)象，攝像機(jī)定義視圖，渲染器將所有東西都繪制到畫布上。 2。關(guān)鍵元素包括網(wǎng)格（幾何材料）和可見度的光。 3。通過(guò)requestAnimationFrame來(lái)實(shí)現(xiàn)動(dòng)畫，以進(jìn)行平滑的更新。 4?？梢酝ㄟ^(guò)事件聽眾或軌道控制來(lái)添加互動(dòng)性，以進(jìn)行相機(jī)操作。 5。最佳實(shí)踐包括使用CDN進(jìn)行設(shè)置，重復(fù)使用循環(huán)中的對(duì)象，處理窗口大小以及從官方示例中學(xué)習(xí)。使用最小的代碼（例如創(chuàng)建旋轉(zhuǎn)立方體），用戶可以快速開始在網(wǎng)絡(luò)上構(gòu)建Interactive 3D體驗(yàn)。

如果您曾經(jīng)想將3D圖形帶到網(wǎng)絡(luò)上而不潛入復(fù)雜的WebGL代碼中，那么Trix.js是完美的起點(diǎn)。這是一個(gè)輕巧的開源JavaScript庫(kù)，它使在瀏覽器中創(chuàng)建和顯示3D內(nèi)容變得更加容易。對(duì)于初學(xué)者來(lái)說(shuō)，它消除了許多復(fù)雜性，同時(shí)仍提供強(qiáng)大的工具來(lái)構(gòu)建交互式3D體驗(yàn)。

這是您需要知道的要開始的三分。

什么是三。

Trix.js是一個(gè)JavaScript庫(kù)，它包裝WebGL，這是用于瀏覽器中3D圖形的低級(jí)API。 Trix.js沒(méi)有編寫數(shù)百行著色器代碼，而是為您提供的高級(jí)對(duì)象，例如您可以使用簡(jiǎn)單的JavaScript操縱的場(chǎng)景，相機(jī)，燈和網(wǎng)格。

這樣想：

• webgl =從頭開始建造汽車。
• 三.js =駕駛帶有出色儀表板的現(xiàn)成汽車。

它廣泛用于3D網(wǎng)站，數(shù)據(jù)可視化，游戲，產(chǎn)品預(yù)覽，甚至虛擬現(xiàn)實(shí)體驗(yàn)。

三個(gè)場(chǎng)景的核心組成部分

每三個(gè)項(xiàng)目項(xiàng)目都依賴一些基本要素。您將需要所有它們才能渲染最簡(jiǎn)單的3D對(duì)象：

• 場(chǎng)景- 所有3D對(duì)象，燈光和攝像頭的容器。
• 相機(jī)- 確定如何查看場(chǎng)景（例如虛擬相機(jī)鏡頭）。
• 渲染器- 將場(chǎng)景繪制到HTML頁(yè)面中的畫布上。
• 網(wǎng)格- 幾何（形狀）和材料（外觀）的組合。
• 輕- 沒(méi)有光，大多數(shù)材料都看不到。

這是創(chuàng)建一個(gè)旋轉(zhuǎn)立方體的最小示例：

 // 1。設(shè)置場(chǎng)景，相機(jī)和渲染器
const場(chǎng)景= new three.scene（）;
const攝影機(jī)=新的三。
const Renderer = new Trix.webglrenderer（）;
Renderer.Setsize（window.innerwidth，window.innerheight）;
document.body.body.AppendChild（Renderer.domelement）;

// 2。創(chuàng)建一個(gè)立方體
const幾何= new Trix.boxGeometry（）;
const Material =新的三。示意物材料（{顏色：0x00ff00，線框：true}）;
const Cube = new three.mesh（幾何，材料）;
場(chǎng)景。

// 3。放置相機(jī)
camera.position.z = 5;

// 4。動(dòng)畫循環(huán)
函數(shù)animate（）{
    requestAnimationFrame（Animate）;

    //旋轉(zhuǎn)立方體
    cube.rotation.x = 0.01;
    Cube.Rotation.Y = 0.01;

    Renderer.render（場(chǎng)景，相機(jī)）;
}
Animate（）;

此代碼設(shè)置了一個(gè)帶有旋轉(zhuǎn)線框綠色立方體的基本場(chǎng)景。一旦完成此運(yùn)行，您就已經(jīng)進(jìn)入了3D領(lǐng)域。

早期理解的關(guān)鍵概念

為了超越基礎(chǔ)知識(shí)，請(qǐng)關(guān)注這些基本思想：

• 坐標(biāo)系：三。JS使用右撇子坐標(biāo)系。 x =正確，y =向上，z =朝向你（在屏幕上）。
• 幾何與材料：
  • 幾何定義形狀（立方體，球體，自定義網(wǎng)格）。
  • 材料定義了它的外觀（顏色，紋理，光澤）。
• 照明類型：
  • MeshBasicMaterial對(duì)光線無(wú)反應(yīng)（適合測(cè)試）。
  • MeshLambertMaterial和MeshPhongMaterial Do - 您需要燈光等DirectionalLight或PointLight 。
• 動(dòng)畫循環(huán)：使用requestAnimationFrame()更新每個(gè)幀場(chǎng)景。

使其互動(dòng)

三個(gè)最佳部分之一是使場(chǎng)景交互式。您可以響應(yīng)鼠標(biāo)運(yùn)動(dòng)，點(diǎn)擊或滾動(dòng)事件。

例如，僅在用戶單擊時(shí)才旋轉(zhuǎn)立方體：

讓旋轉(zhuǎn)= false;
Renderer.domelement.AddeventListener（'click'，（）=> {
    旋轉(zhuǎn)=！旋轉(zhuǎn);
}）;

函數(shù)animate（）{
    requestAnimationFrame（Animate）;

    如果（旋轉(zhuǎn)）{
        Cube.Rotation.Y = 0.02;
    }

    Renderer.render（場(chǎng)景，相機(jī)）;
}
Animate（）;

您還可以使用諸如OrbitControls之類的庫(kù)來(lái)讓用戶使用鼠標(biāo)pan，縮放和旋轉(zhuǎn)相機(jī)：

 const Controls = new Trix.orbitControls（相機(jī)，Renderer.domelement）;

只需在示例文件夾中包含OrbitControls.js文件。

入門技巧

• 使用樣板：從一個(gè)簡(jiǎn)單的HTML文件開始，該文件通過(guò)CDN包括三個(gè)。

   <script src =“ https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js”> </script>

• 檢查示例：官方的Trix.js網(wǎng)站上充滿了您可以從中學(xué)習(xí)的工作演示。
• 開發(fā)人員工具：調(diào)整問(wèn)題大?。繖z查您的畫布尺寸。使用window.addEventListener('resize', ...)調(diào)整渲染器的大小和相機(jī)縱橫比。
• 性能：避免在動(dòng)畫循環(huán)中創(chuàng)建新對(duì)象。請(qǐng)?jiān)诳赡艿那闆r下重用矢量和矩陣。

---

3.JS大大降低了3D Web開發(fā)的障礙。一旦了解場(chǎng)景圖形結(jié)構(gòu)以及對(duì)象如何相互作用，就可以開始構(gòu)建從動(dòng)畫背景到完整3D游戲的所有內(nèi)容。從小開始，經(jīng)常進(jìn)行實(shí)驗(yàn)，不要害怕破壞事物 - 這就是您的學(xué)習(xí)方式。

基本上，只有幾行代碼，您已經(jīng)可以創(chuàng)建沉浸式網(wǎng)絡(luò)體驗(yàn)了。

以上是為初學(xué)者提供的三級(jí)：在網(wǎng)絡(luò)上創(chuàng)建3D體驗(yàn)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！