核心要點

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

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

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

一切的開始

一段時間前，Pete Hunt在#reactjs IRC頻道中開了一個玩笑，說要用React來制作游戲：

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

等等。我笑了。他也笑了。大家都玩得很開心?！笆澜缟险l會這么做？”我想。

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

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

為什么選擇React？

我知道你在想什么：為什么？請容我解釋一下。以下是一些考慮使用React驅動3D場景的原因：

• “聲明式”視圖允許你清晰地將場景渲染與游戲邏輯分離。
• 設計易于理解的組件，例如<player></player>、<wall></wall>、<level></level>等等。
• 游戲資源的“熱”（實時）重載。更改紋理和模型，并實時查看它們在場景中的更新！
• 使用原生瀏覽器工具（如Chrome檢查器）將3D場景作為標記進行檢查和調試。
• 使用Webpack在依賴關系圖中管理游戲資源，例如<texture require="" src="%7B"></texture>

讓我們設置一個場景來了解這一切是如何工作的。

React和WebGL

我創(chuàng)建了一個示例GitHub存儲庫來配合本文?？寺〈鎯觳凑誖EADME中的說明運行代碼并繼續(xù)學習。它以SitePointy 3D機器人為主角！

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

組織視圖代碼

使用React驅動WebGL的主要好處是我們的視圖代碼與游戲邏輯解耦。這意味著我們渲染的實體是小而易于理解的組件。

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

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

現(xiàn)在我們有一個帶有攝像機的空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)建一個THREE.Scene并自動添加一個帶有THREE.BoxGeometry的網(wǎng)格。R3R處理舊場景與任何更改的差異。如果你向場景添加一個新的網(wǎng)格，則不會重新創(chuàng)建原始網(wǎng)格。就像使用普通的React和DOM一樣，3D場景只更新差異。

因為我們在React中工作，所以我們可以將游戲實體分離到組件文件中。示例存儲庫中的Robot.js文件演示了如何使用純React視圖代碼表示主要角色。它是一個“無狀態(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存儲庫上查看更多API示例，或者在隨附的項目中查看完整的示例設置。

組織游戲邏輯

等式的另一半是處理游戲邏輯。讓我們給我們的機器人SitePointy添加一些簡單的動畫。

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

我們將使用瀏覽器的requestAnimationFrame API回調來驅動我們的游戲循環(huán)，并在GameContainer.js中運行循環(huán)。為了動畫化機器人，讓我們根據(jù)傳遞給requestAnimationFrame的時間戳計算一個新的位置，然后將新的位置存儲在狀態(tài)中。

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

調用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>

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

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

<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)添加更多邏輯，例如處理物理，請創(chuàng)建另一個reducer函數(shù)并將其傳遞給先前reducer的結果：

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

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

資源管理

這仍然是R3R的一個發(fā)展領域。對于紋理，你可以在JSX標簽上指定一個url屬性。使用Webpack，你可以要求本地圖像路徑：

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

有了這個設置，如果你更改磁盤上的圖像，你的3D場景將實時更新！這對于快速迭代游戲設計和內容非常寶貴。

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

調試

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

你還可以加入react-three-renderer Gitter聊天室，以獲得有關調試應用程序的幫助。

性能注意事項

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

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

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

就是這樣！

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

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

使用ReactJS和WebGL構建游戲的常見問題解答（FAQ）

使用ReactJS和WebGL構建游戲的先決條件是什么？

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

如何將Unity與ReactJS集成？

可以使用react-unity-webgl包將Unity與ReactJS集成。此包允許你將Unity WebGL構建嵌入到ReactJS應用程序中。你可以使用npm安裝它并將其導入到你的項目中。然后，你可以使用包提供的Unity組件將你的Unity游戲嵌入到你的ReactJS應用程序中。

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

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

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

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

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

react-unity-webgl包允許你將Unity WebGL構建嵌入到ReactJS應用程序中。這意味著你可以使用Unity創(chuàng)建復雜的3D游戲，然后輕松地將它們集成到你的ReactJS應用程序中。如果你想創(chuàng)建一個基于Web的游戲或交互式3D應用程序，這將特別有用。

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

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

我可以使用ReactJS和WebGL構建手機游戲嗎？

是的，你可以使用ReactJS和WebGL構建在移動設備上的Web瀏覽器中運行的游戲。但是，對于原生移動游戲，你可能需要考慮使用Unity或Unreal Engine等游戲開發(fā)平臺，這些平臺可以直接導出到iOS和Android。

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

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

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

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

如何調試我的ReactJS和WebGL游戲？

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

以上是用三分，react和webGL構建游戲的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！