react webgl_使用Three.js，React和WebGL构建游戏

最新推荐文章于 2024-06-26 09:52:34 发布

dingshi7798

最新推荐文章于 2024-06-26 09:52:34 发布

阅读量849

点赞数

文章标签：游戏 python java vue 编程语言 ViewUI

原文链接：https://www.sitepoint.com/building-a-game-reactjs-and-webgl/

版权

react webgl

我正在制作一款名为“ 变色龙魅力”的游戏。 它由Three.js，React和WebGL构建。 这是对这些技术如何使用react-three-renderer （缩写为R3R）一起工作的介绍。

在SitePoint上查看《 WebGL 入门指南以及React和JSX入门》，以了解React和WebGL的介绍。本文和随附的代码使用ES6语法。

拿着一个红色药片和一个蓝色药片的手，与在一条胳膊的一个变色蜥蜴。

一切如何开始

前一段时间， Pete Hunt开玩笑说在#reactjs IRC频道中使用React构建游戏：

我敢打赌，我们可以用React做第一人称射击游戏！
敌人有<Head /> <Body> <Legs>等。

我笑了。他笑了。每个人都玩得很开心。 “到底是谁做的？” 我想知道

几年后，这正是我正在做的事情。

Charisma The Chameleon是一款游戏，您在其中收集能量道具，使自己收缩以解决无限的分形迷宫。我从事React开发已经有几年了，我很好奇是否有一种使用React来驱动Three.js的方法。那是R3R引起我注意的时候。

为什么要React？

我知道您在想什么： 为什么？ 幽默一下。考虑使用React驱动3D场景的一些原因如下：

“声明式”视图使您可以清晰地将场景渲染与游戏逻辑分离。
设计易于推理的组件，例如<Player /> ， <Wall /> ， <Level />等。
“热”（实时）重新加载游戏资产。更改纹理和模型，并在场景中实时更新它们！
使用Chrome浏览器之类的本地浏览器工具检查和调试3D场景作为标记。
使用Webpack在依赖关系图中管理游戏资产，例如<Texture src={ require('../assets/image.png') } />

让我们设置一个场景，以了解这一切的工作原理。

React和WebGL

我已经创建了一个示例GitHub存储库以随附本文。克隆存储库，并按照自述文件中的说明运行代码并遵循。它使SitePointy成为3D机器人！

SitePointy 3D机器人截图

警告：R3R仍处于测试阶段。 其API易变，将来可能会更改。 目前，它仅处理Three.js的子集。 我发现它足以完成一个完整的游戏，但是您的里程可能会有所不同。

整理视图代码

使用React来驱动WebGL的主要好处是我们的视图代码与游戏逻辑脱钩了。这意味着我们渲染的实体是易于推理的小组件。

R3R公开了包装Three.js的声明性API。例如，我们可以这样写：

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

现在，我们有了带相机的空3D场景。将网格添加到场景就像包含一个<mesh />组件并为其提供<geometry />和<material /> 。

<scene>
  …
  <mesh>
    <boxGeometry
      width={ 1 }
      height={ 1 }
      depth={ 1 }
    />
    <meshBasicMaterial
      color={ 0x00ff00 }
    />
</mesh>

在引擎盖下，这将创建THREE.Scene并自动添加带有THREE.BoxGeometry的网格。 R3R可以处理任何变化使旧场景产生差异。如果将新网格物体添加到场景，则不会重新创建原始网格物体。就像普通的React和DOM一样，3D场景仅使用差异进行更新。

因为我们在React中工作，所以我们可以将游戏实体分成组件文件。示例存储库中的Robot.js文件演示了如何使用纯React视图代码表示主要角色。这是一个“无状态功能”组件，表示它不包含任何本地状态：

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

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

现在，在我们的3D场景中加入<Robot /> ！

<scene>
  …
  <mesh>…</mesh>
  <Robot
    position={…}
    rotation={…}
  />
</scene>

您可以在R3R GitHub存储库上查看API的更多示例，或在随附的项目中查看完整的示例设置。

组织游戏逻辑

等式的后半部分处理游戏逻辑。让我们给我们的机器人SitePointy一些简单的动画。

SitePointy具有生命力

传统上，游戏循环如何运作？他们接受用户输入，分析旧的“世界状态”，并返回新的世界状态以进行渲染。为了方便起见，让我们将“游戏状态”对象存储在组件状态中。在更成熟的项目中，您可以将游戏状态移至Redux或Flux商店。

我们将使用浏览器的requestAnimationFrame API回调驱动我们的游戏循环，并在GameContainer.js中运行循环。为了给机器人制作动画，让我们基于传递给requestAnimationFrame的时间戳计算一个新位置，然后将新位置存储在state中。

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

调用setState()会触发子组件的重新渲染，并更新3D场景。我们将状态从容器组件传递到呈现性的<Game />组件：

render() {
  const { robotPosition } = this.state;
  return <Game
    robotPosition={ robotPosition }
  />;
}

我们可以使用一种有用的模式来帮助组织此代码。更新机器人位置是基于时间的简单计算。将来，它可能还会考虑先前游戏状态中的先前机器人位置。接收某些数据，对其进行处理并返回新数据的函数通常称为reducer 。我们可以将运动代码抽象为化简函数！

现在我们可以编写一个干净，简单的游戏循环，其中仅包含函数调用：

import robotMovementReducer from './game-reducers/robotMovementReducer.js';

// …

gameLoop() {
  const oldState = this.state;
  const newState = robotMovementReducer( oldState );
  this.setState( newState );
}

要在游戏循环中添加更多逻辑，例如处理物理，请创建另一个reducer函数，并将先前的reducer的结果传递给它：

const newState = physicsReducer( robotMovementReducer( oldState ) );

随着游戏引擎的增长，将游戏逻辑组织成单独的功能变得至关重要。使用reducer模式，该组织非常简单。

资产管理

这仍然是R3R不断发展的领域。对于纹理，可以在JSX标签上指定url属性。使用Webpack，您可以要求图像的本地路径：

<texture url={ require( '../local/image/path.png' ) } />

使用此设置，如果您更改磁盘上的图像，您的3D场景将实时更新！这对于快速迭代游戏设计和内容非常宝贵。

对于其他资产（如3D模型），您仍然必须使用Three.js的内置加载器（如JSONLoader）对其进行处理。我尝试使用自定义的Webpack加载器加载3D模型文件，但最终，这样做耗费了很多精力。将模型视为二进制数据并使用file-loader加载它们会更容易。这样仍然可以实时重载模型数据。您可以在示例代码中看到这一点。

调试

R3R支持适用于Chrome和Firefox的React开发人员工具扩展。您可以检查场景，就像是原始DOM！将鼠标悬停在检查器中的元素上会在场景中显示其边界框。您还可以将鼠标悬停在纹理定义上，以查看场景中哪些对象使用了这些纹理。

使用react-three-renderer和React devtools调试场景

您也可以加入我们的React三渲染器Gitter聊天室，以帮助调试您的应用程序。

性能考量

在构建Charisma The Chameleon时，我遇到了此工作流程特有的几个性能问题。

我使用Webpack的热装时间长达三十秒！这是因为每次重装时都必须将大型资产重新写入捆绑中。解决方案是实施Webpack的DLLPlugin ，它将重新加载时间减少到五秒钟以下。
理想情况下，场景每帧渲染应只调用一个setState() 。对游戏进行性能分析后，React本身就是主要瓶颈。每帧多次调用setState()会导致双重渲染并降低性能。
经过一定数量的对象后， R3R的性能将不如原始Three.js代码。对我来说，这大约有1,000个对象。您可以在示例中的 “基准”下将R3R与Three.js进行比较。

Chrome DevTools时间轴功能是用于调试性能的出色工具。直观地检查您的游戏循环很容易，并且比DevTools的“配置文件”功能更具可读性。

而已！

查看Charisma The Chameleon，以了解使用此设置可能发生的情况。虽然这个工具链还很年轻，但是我发现React with R3R是整洁地组织WebGL游戏代码所不可或缺的。您还可以查看小型但不断增长的R3R示例页面，以查看一些组织良好的代码示例。

本文由Mark Brown和Kev Zettler进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！

翻译自: https://www.sitepoint.com/building-a-game-reactjs-and-webgl/

react webgl

dingshi7798

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react webgl_使用Three.js，React和WebGL构建游戏

react webgl 我正在制作一款名为“ 变色龙魅力”的游戏。它由Three.js，React和WebGL构建。这是对这些技术如何使用react-three-renderer （缩写为R3R）一起工作的介绍。在SitePoint上查看《 WebGL 入门指南以及React和JSX入门》，以了解React和WebGL的介绍。本文和随附的代码使用ES6语法。一切如何开始 ...
复制链接

扫一扫