シーンの構築

PlayCanvas Reactを使用して、シンプルな3Dシーンをステップバイステップで構築しましょう。照明を当てた球体のある基本的なシーンを作成し、ブラウザで実際に動作するのを見ます。

開始点

まず、Applicationコンポーネントを使用して、アプリケーションの基本的な構造を作成しましょう。

import { Application } from '@playcanvas/react'

export default function App() {
  return (
    <Application>
      {/* ここに3Dシーンが入ります */}
    </Application>
  )
}

これにより、空の3Dシーンが作成されます。しかし、まだ何もレンダリングされたものは見えません。カメラといくつかのコンテンツが必要です。

カメラの追加

シーンを表示するにはカメラが必要です。PlayCanvas Reactでは、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>
  )
}

これで、画面中央に白い球体が表示されるはずです！

インタラクティブにする

Reactを使用する大きな利点の1つは、インタラクティブ性を簡単に追加できることです。球体がクリックに反応するようにしましょう。

結果を表示するには、デモタブをクリックしてください。

コード
デモ

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

export default function Interactive() {
  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"
        onClick={() => confetti()}
        onPointerOver={() => document.body.style.cursor = 'pointer'}
        onPointerOut={() => document.body.style.cursor = 'default'} >
        <Render type="sphere" />
      </Entity>
    </Application>
  )
}

Web Componentsとの主な違い

Web Componentsと比較してPlayCanvas Reactでシーンを構築する場合：

コンポーネント構造: <pc-app>のようなHTMLタグの代わりに、<Application>のようなReactコンポーネントを使用します。
PropsとAttributes: HTML属性の代わりに、camelCaseのReact props（例: clearColor）を使用します。
イベント処理: Reactのイベントシステムを直接使用できます（例: onClick）。
状態管理: 動的な動作のためにuseStateのようなReactフックを活用できます。
型安全性: 型安全性を持つ完全なTypeScriptサポート。

次のステップ

最初のシーンを構築したので、次に試してみてください：

異なる形状（box、cylinder、coneなど）のオブジェクトを追加する
異なるライトタイプ（point、spot）を試す
OrbitControlsスクリプトで動きを追加する
RigidBodyおよびCollisionコンポーネントを追加して物理を探索する

これで基本は理解できたので、より多くの例についてはドキュメントを参照してください。

開始点​

カメラの追加​

ライトの追加​

オブジェクトの追加​

インタラクティブにする​

Web Componentsとの主な違い​

次のステップ​

開始点