核心要點(diǎn)

• 使用React驅(qū)動(dòng)遊戲開發(fā)中的3D場景，具有諸多優(yōu)勢，包括清晰地將場景渲染與遊戲邏輯分離，易於理解的組件，遊戲資源的實(shí)時(shí)重載，以及能夠使用原生瀏覽器工具將3D場景作為標(biāo)記進(jìn)行檢查和調(diào)試。
• react-three-renderer (R3R) 提供了一個(gè)聲明式API，它封裝了Three.js，允許將視圖代碼與遊戲邏輯解耦，並創(chuàng)建小型易於理解的組件。
• 隨著遊戲引擎的增長，使用reducer模式將游戲邏輯組織成單獨(dú)的函數(shù)至關(guān)重要。這種模式允許創(chuàng)建簡潔明了的遊戲循環(huán)，並輕鬆地向遊戲循環(huán)添加更多邏輯。
• 使用Three.js、React和WebGL構(gòu)建遊戲的過程中，調(diào)試和性能方面的考慮是獨(dú)一無二的。使用Chrome DevTools的時(shí)間軸功能對(duì)於調(diào)試性能來說非常寶貴，而實(shí)現(xiàn)諸如最小化React中重新渲染次數(shù)之類的策略可以幫助優(yōu)化性能。

我正在製作一款名為“變色龍魅力”的遊戲。它使用Three.js、React和WebGL構(gòu)建。本文介紹了這些技術(shù)如何使用react-three-renderer（縮寫為R3R）協(xié)同工作。

請(qǐng)查看SitePoint上的《WebGL入門指南》和《React和JSX入門指南》，了解React和WebGL的介紹。本文和隨附的代碼使用ES6語法。

一切的開始

一段時(shí)間前，Pete Hunt在#reactjs IRC頻道中開了一個(gè)玩笑，說要用React來製作遊戲：

我敢打賭我們可以用React製作一款第一人稱射擊遊戲！敵人有

等等。我笑了。他也笑了。大家都玩得很開心。 “世界上誰會(huì)這麼做？”我想。

幾年後，我做的正是這件事。

《變色龍魅力》是一款收集增強(qiáng)道具的遊戲，這些道具會(huì)讓你縮小以解決無限分形迷宮。我已經(jīng)做了幾年的React開發(fā)者，我很想知道是否有辦法使用React驅(qū)動(dòng)Three.js。這時(shí)，R3R吸引了我的注意。

為什麼選擇React？

我知道你在想什麼：為什麼？請(qǐng)容我解釋一下。以下是一些考慮使用React驅(qū)動(dòng)3D場景的原因：

• “聲明式”視圖允許你清晰地將場景渲染與遊戲邏輯分離。
• 設(shè)計(jì)易於理解的組件，例如<player></player>、<wall></wall>、<level></level>等等。
• 遊戲資源的“熱”（實(shí)時(shí)）重載。更改紋理和模型，並實(shí)時(shí)查看它們?cè)趫鼍爸械母拢?
• 使用原生瀏覽器工具（如Chrome檢查器）將3D場景作為標(biāo)記進(jìn)行檢查和調(diào)試。
• 使用Webpack在依賴關(guān)係圖中管理遊戲資源，例如<texture require="" src="%7B"></texture>

讓我們?cè)O(shè)置一個(gè)場景來了解這一切是如何工作的。

React和WebGL

我創(chuàng)建了一個(gè)示例GitHub存儲(chǔ)庫來配合本文。克隆存儲(chǔ)庫並按照README中的說明運(yùn)行代碼並繼續(xù)學(xué)習(xí)。它以SitePointy 3D機(jī)器人為主角！

警告：R3R仍在測試階段。其API不穩(wěn)定，將來可能會(huì)發(fā)生變化。目前它只處理Three.js的一個(gè)子集。我發(fā)現(xiàn)它足夠完整，可以構(gòu)建一個(gè)完整的遊戲，但你的結(jié)果可能會(huì)有所不同。

組織視圖代碼

使用React驅(qū)動(dòng)WebGL的主要好處是我們的視圖代碼與遊戲邏輯解耦。這意味著我們渲染的實(shí)體是小而易於理解的組件。

R3R公開了一個(gè)封裝Three.js的聲明式API。例如，我們可以編寫：

<code><scene>></scene>
  <perspectivecamera>    position={ new THREE.Vector3( 1, 1, 1 )
  />
>
</perspectivecamera></code>

現(xiàn)在我們有一個(gè)帶有攝像機(jī)的空3D場景。向場景添加網(wǎng)格就像包含<mesh></mesh>組件並賦予它<geometry></geometry>和<material></material>一樣簡單。

<code><scene>></scene>
  …
  <mesh>></mesh>
    <boxgeometry></boxgeometry>      width={ 1 }
      height={ 1 }
      depth={ 1 }
    />
    <meshbasicmaterial></meshbasicmaterial>      color={ 0x00ff00 }
    />
>
</code>

在幕後，這將創(chuàng)建一個(gè)THREE.Scene並自動(dòng)添加一個(gè)帶有THREE.BoxGeometry的網(wǎng)格。 R3R處理舊場景與任何更改的差異。如果你向場景添加一個(gè)新的網(wǎng)格，則不會(huì)重新創(chuàng)建原始網(wǎng)格。就像使用普通的React和DOM一樣，3D場景只更新差異。

因?yàn)槲覀冊(cè)赗eact中工作，所以我們可以將游戲?qū)嶓w分離到組件文件中。示例存儲(chǔ)庫中的Robot.js文件演示瞭如何使用純React視圖代碼表示主要角色。它是一個(gè)“無狀態(tài)函數(shù)”組件，這意味著它不保存任何本地狀態(tài)：

<code>const Robot = ({ position, rotation }) => <group></group>  position={ position }
  rotation={ rotation }
>
  <mesh> rotation={ localRotation }></mesh>
    <geometryresource></geometryresource>      resourceId="robotGeometry"
    />
    <materialresource></materialresource>      resourceId="robotTexture"
    />
  >
>;
</code>

現(xiàn)在我們將<robot></robot>包含在我們的3D場景中！

<code><scene>></scene>
  …
  <mesh>></mesh>…>
  <robot></robot>    position={…}
    rotation={…}
  />
>
</code>

你可以在R3R GitHub存儲(chǔ)庫上查看更多API示例，或者在隨附的項(xiàng)目中查看完整的示例設(shè)置。

組織遊戲邏輯

等式的另一半是處理遊戲邏輯。讓我們給我們的機(jī)器人SitePointy添加一些簡單的動(dòng)畫。

傳統(tǒng)的遊戲循環(huán)是如何工作的？它們接受用戶輸入，分析舊的“世界狀態(tài)”，並返回新的世界狀態(tài)以進(jìn)行渲染。為方便起見，讓我們將“遊戲狀態(tài)”對(duì)象存儲(chǔ)在組件狀態(tài)中。在一個(gè)更成熟的項(xiàng)目中，你可以將游戲狀態(tài)移動(dòng)到Redux或Flux存儲(chǔ)中。

我們將使用瀏覽器的requestAnimationFrame API回調(diào)來驅(qū)動(dòng)我們的遊戲循環(huán)，並在GameContainer.js中運(yùn)行循環(huán)。為了動(dòng)畫化機(jī)器人，讓我們根據(jù)傳遞給requestAnimationFrame的時(shí)間戳計(jì)算一個(gè)新的位置，然後將新的位置存儲(chǔ)在狀態(tài)中。

<code><scene>></scene>
  <perspectivecamera>    position={ new THREE.Vector3( 1, 1, 1 )
  />
>
</perspectivecamera></code>

調(diào)用setState()將觸發(fā)子組件的重新渲染，並更新3D場景。我們將狀態(tài)從容器組件傳遞到演示性<game></game>組件：

<code><scene>></scene>
  …
  <mesh>></mesh>
    <boxgeometry></boxgeometry>      width={ 1 }
      height={ 1 }
      depth={ 1 }
    />
    <meshbasicmaterial></meshbasicmaterial>      color={ 0x00ff00 }
    />
>
</code>

我們可以應(yīng)用一個(gè)有用的模式來幫助組織這段代碼。更新機(jī)器人位置是一個(gè)簡單的基於時(shí)間的計(jì)算。將來，它還可能考慮來自先前遊戲狀態(tài)的先前機(jī)器人位置。一個(gè)接受一些數(shù)據(jù)、處理它並返回新數(shù)據(jù)的函數(shù)通常被稱為reducer。我們可以將移動(dòng)代碼抽象成一個(gè)reducer函數(shù)！

現(xiàn)在我們可以編寫一個(gè)簡潔明了的遊戲循環(huán)，其中只包含函數(shù)調(diào)用：

<code>const Robot = ({ position, rotation }) => <group></group>  position={ position }
  rotation={ rotation }
>
  <mesh> rotation={ localRotation }></mesh>
    <geometryresource></geometryresource>      resourceId="robotGeometry"
    />
    <materialresource></materialresource>      resourceId="robotTexture"
    />
  >
>;
</code>

要向遊戲循環(huán)添加更多邏輯，例如處理物理，請(qǐng)創(chuàng)建另一個(gè)reducer函數(shù)並將其傳遞給先前reducer的結(jié)果：

<code><scene>></scene>
  …
  <mesh>></mesh>…>
  <robot></robot>    position={…}
    rotation={…}
  />
>
</code>

隨著遊戲引擎的增長，將游戲邏輯組織成單獨(dú)的函數(shù)變得至關(guān)重要。使用reducer模式，這種組織非常簡單。

資源管理

這仍然是R3R的一個(gè)發(fā)展領(lǐng)域。對(duì)於紋理，你可以在JSX標(biāo)籤上指定一個(gè)url屬性。使用Webpack，你可以要求本地圖像路徑：

<code>// …
gameLoop( time ) {
  this.setState({
    robotPosition: new THREE.Vector3(
      Math.sin( time * 0.01 ), 0, 0
    )
  });
}
</code>

有了這個(gè)設(shè)置，如果你更改磁盤上的圖像，你的3D場景將實(shí)時(shí)更新！這對(duì)於快速迭代遊戲設(shè)計(jì)和內(nèi)容非常寶貴。

對(duì)於其他資源（如3D模型），你仍然必須使用Three.js的內(nèi)置加載器（如JSONLoader）來處理它們。我嘗試過使用自定義Webpack加載器來加載3D模型文件，但最終工作量太大，沒有好處。將模型視為二進(jìn)制數(shù)據(jù)並使用文件加載器加載它們更容易。這仍然可以實(shí)現(xiàn)模型數(shù)據(jù)的實(shí)時(shí)重載。你可以在示例代碼中看到這一點(diǎn)。

調(diào)試

R3R支持Chrome和Firefox的React開發(fā)者工具擴(kuò)展。你可以像檢查普通DOM一樣檢查你的場景！將鼠標(biāo)懸停在檢查器中的元素上會(huì)在場景中顯示它們的邊界框。你還可以將鼠標(biāo)懸停在紋理定義上以查看場景中哪些對(duì)象使用這些紋理。

你還可以加入react-three-renderer Gitter聊天室，以獲得有關(guān)調(diào)試應(yīng)用程序的幫助。

性能注意事項(xiàng)

在構(gòu)建《變色龍魅力》時(shí)，我遇到了一些此工作流程特有的性能問題。

• 我使用Webpack的熱重載時(shí)間長達(dá)30秒！這是因?yàn)槊看沃剌d都必須將大型資源寫入包中。解決方案是實(shí)現(xiàn)Webpack的DLLPlugin，這將重載時(shí)間縮短到5秒以下。
• 理想情況下，你的場景每幀渲染應(yīng)該只調(diào)用一次setState()。在分析我的遊戲後，React本身是主要的瓶頸。每幀調(diào)用setState()多次會(huì)導(dǎo)致雙重渲染並降低性能。
• 超過一定數(shù)量的對(duì)像後，R3R的性能將比普通的Three.js代碼差。對(duì)我來說，大約是1000個(gè)對(duì)象。你可以在示例中的“基準(zhǔn)測試”中比較R3R和Three.js。

Chrome DevTools的時(shí)間軸功能是調(diào)試性能的絕佳工具。你可以輕鬆地直觀地檢查遊戲循環(huán)，而且它比DevTools的“配置文件”功能更易於閱讀。

就是這樣！

查看《變色龍魅力》以了解使用此設(shè)置可以實(shí)現(xiàn)的功能。雖然此工具鏈還很年輕，但我發(fā)現(xiàn)使用R3R的React對(duì)於清晰地組織我的WebGL遊戲代碼至關(guān)重要。你還可以查看小型但不斷增長的R3R示例頁面，以查看一些組織良好的代碼示例。

本文由Mark Brown和Kev Zettler進(jìn)行同行評(píng)審。感謝所有SitePoint的同行評(píng)審人員，使SitePoint的內(nèi)容達(dá)到最佳狀態(tài)！

使用ReactJS和WebGL構(gòu)建遊戲的常見問題解答（FAQ）

使用ReactJS和WebGL構(gòu)建遊戲的先決條件是什麼？

要開始使用ReactJS和WebGL構(gòu)建遊戲，你需要對(duì)JavaScript、HTML和CSS有基本的了解。還需要了解ReactJS（一個(gè)流行的用於構(gòu)建用戶界面的JavaScript庫）。此外，了解WebGL（Web圖形庫）（一個(gè)用於渲染交互式3D和2D圖形的JavaScript API）至關(guān)重要。熟悉ES6語法、npm（Node包管理器）和命令行也將大有裨益。

如何將Unity與ReactJS集成？

可以使用react-unity-webgl包將Unity與ReactJS集成。此包允許你將Unity WebGL構(gòu)建嵌入到ReactJS應(yīng)用程序中。你可以使用npm安裝它並將其導(dǎo)入到你的項(xiàng)目中。然後，你可以使用包提供的Unity組件將你的Unity遊戲嵌入到你的ReactJS應(yīng)用程序中。

使用React創(chuàng)建3D應(yīng)用程序的不同方法有哪些？

有幾種方法可以使用React創(chuàng)建3D應(yīng)用程序。最流行的方法之一是使用Three.js，這是一個(gè)用於創(chuàng)建和顯示動(dòng)畫3D計(jì)算機(jī)圖形的跨瀏覽器JavaScript庫。另一種方法是直接使用WebGL，但這可能更複雜。其他庫（如react-three-fiber和react-unity-webgl）也可以用於使用React創(chuàng)建3D應(yīng)用程序。

如何使用WebGL創(chuàng)建交互式3D圖形？

WebGL允許你直接在瀏覽器中創(chuàng)建交互式3D圖形，無需插件。你可以使用WebGL的API創(chuàng)建複雜的3D圖形、動(dòng)畫和遊戲。但是，WebGL的API是低級(jí)的，直接使用可能很複雜。因此，許多開發(fā)人員更喜歡使用像Three.js這樣的庫，這些庫為WebGL提供了更高級(jí)別的接口。

react-unity-webgl在遊戲開發(fā)中的作用是什麼？

react-unity-webgl包允許你將Unity WebGL構(gòu)建嵌入到ReactJS應(yīng)用程序中。這意味著你可以使用Unity創(chuàng)建複雜的3D遊戲，然後輕鬆地將它們集成到你的ReactJS應(yīng)用程序中。如果你想創(chuàng)建一個(gè)基於Web的遊戲或交互式3D應(yīng)用程序，這將特別有用。

如何優(yōu)化我的ReactJS和WebGL遊戲以提高性能？

優(yōu)化使用ReactJS和WebGL構(gòu)建的遊戲可能涉及多種策略。這些策略包括最小化React中的重新渲染次數(shù)，使用WebGL的內(nèi)置性能功能（如requestAnimationFrame）實(shí)現(xiàn)流暢的動(dòng)畫，以及為Web優(yōu)化3D模型和紋理。

我可以使用ReactJS和WebGL構(gòu)建手機(jī)遊戲嗎？

是的，你可以使用ReactJS和WebGL構(gòu)建在移動(dòng)設(shè)備上的Web瀏覽器中運(yùn)行的遊戲。但是，對(duì)於原生移動(dòng)遊戲，你可能需要考慮使用Unity或Unreal Engine等遊戲開發(fā)平臺(tái)，這些平臺(tái)可以直接導(dǎo)出到iOS和Android。

如何在我的ReactJS和WebGL遊戲中處理用戶輸入？

可以使用標(biāo)準(zhǔn)JavaScript事件處理程序在ReactJS和WebGL遊戲中處理用戶輸入。你可以監(jiān)聽鍵盤、鼠標(biāo)和觸摸事件，然後相應(yīng)地更新遊戲狀態(tài)。 ReactJS還提供合成事件，可以用來以一致的方式跨不同瀏覽器處理用戶輸入。

我可以將其他JavaScript庫與ReactJS和WebGL一起使用嗎？

是的，你可以將其他JavaScript庫與ReactJS和WebGL一起使用。例如，你可能會(huì)使用Three.js進(jìn)行3D圖形處理，使用Howler.js進(jìn)行音頻處理，或使用Matter.js進(jìn)行物理處理。關(guān)鍵是確保這些庫可以在你的遊戲中無縫協(xié)同工作。

如何調(diào)試我的ReactJS和WebGL遊戲？

可以使用Web瀏覽器中的開發(fā)者工具調(diào)試使用ReactJS和WebGL構(gòu)建的遊戲。這些工具允許你檢查HTML、CSS和JavaScript代碼，查看控制臺(tái)日誌，並逐步調(diào)試代碼。此外，React開發(fā)者工具是一個(gè)瀏覽器擴(kuò)展，允許你檢查React組件層次結(jié)構(gòu)、道具和狀態(tài)。

以上是用三分，react和webGL構(gòu)建遊戲的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！