核心概念

PlayCanvas React 是引擎的轻量封装，以简洁声明式接口暴露全部引擎功能，并增加便捷能力。引擎能实现的内容，React 版本也能实现。

应用

Application 是根组件，初始化引擎并提供渲染上下文。应用中的一个画布对应一个 Application。

可通过属性配置填充模式、分辨率模式和图形设备。

<Application>
  {/* Your scene content */}
</Application>

详情见 Application API。

基础

引擎使用实体组件系统（ECS），将行为和数据分离，与 React 声明式组织方式契合，便于理解维护场景。

例如，摄像机由 Entity 和 Camera 组成。实体提供位置、旋转，Camera 提供渲染能力。下面对比 React 和 JavaScript：

React

app.jsx

<Application>
  <Entity name='camera' position={[0, 0, 5]}>
    <Camera />
  </Entity>
</Application>

JavaScript

app.js

const app = new Application();
app.init();

const camera = new Entity('camera');
camera.setPosition(0, 0, 5);
camera.create('camera')
app.root.addChild(camera);
app.start();

组件

同实体可添加多个组件，各自提供不同功能。React 可使用引擎中的各类组件，包括：

• Light：平行光、点光和聚光灯。
• Camera：透视与正交。
• Render：球体、盒体、圆柱、圆锥、平面等。
• RigidBody：刚体与碰撞。
• Collision：碰撞。
• Anim：动画与蒙皮。
• GSplat：高斯泼溅。
• Screen：界面屏幕。
• RigidBody：刚体。
• Anim：动画与蒙皮。

下面介绍最常用组件。

摄像机

通过 Entity 容器挂载 Camera：

import { Application, Entity } from '@playcanvas/react'
import { Camera } from '@playcanvas/react/components'

export default function App() {
  return (
    <Application>
      <Entity name="camera" position={[0, 0, 5]}>
        <Camera />
      </Entity>
    </Application>
  )
}

摄像机位于正 Z 的 5 单位处，默认沿负 Z 观察原点，画面为默认灰色清屏色。

灯光

添加平行光照亮场景：

import { Application, Entity } from '@playcanvas/react'
import { Camera, Light } from '@playcanvas/react/components'

export default function App() {
  return (
    <Application>
      <Entity name="camera" position={[0, 0, 5]}>
        <Camera />
      </Entity>
      <Entity name="light" rotation={[45, 45, 0]}>
        <Light type="directional" />
      </Entity>
    </Application>
  )
}

灯光旋转为斜照，为对象提供更有层次的明暗。

基本图元

通过 Render 添加球体：

import { Application, Entity } from '@playcanvas/react'
import { Camera, Light, Render } from '@playcanvas/react/components'

export default function App() {
  return (
    <Application>
      <Entity name="camera" position={[0, 0, 5]}>
        <Camera />
      </Entity>
      <Entity name="light" rotation={[45, 45, 0]}>
        <Light type="directional" />
      </Entity>
      <Entity name="sphere">
        <Render type="sphere" />
      </Entity>
    </Application>
  )
}

现在屏幕中央应显示一个白球。

后续步骤

继续学习交互、资源管理和物理，即可开始自己的项目。