Playcanvas、3Dアプリを作成するための軽量で宣言的なライブラリ「PlayCanvas React」を発表！

PlayCanvasは、3Dアプリケーション開発をより簡単かつ効率的にするため、軽量で宣言的なライブラリ「PlayCanvas React」を発表しました。

PlayCanvas Reactとは
1. シーンの作成方法の例
採用例
ライセンスについて
リソース

PlayCanvas Reactとは

PlayCanvas Reactは、PlayCanvasエンジンのAPIをReact向けに薄くラップしたライブラリです。

これにより、Reactの宣言的なアプローチを活用して、アセット管理、物理演算、ガウシアンスプラッティング、オーディオなどを使用して、複雑な3Dコンテンツを構築できます。

Introducing PlayCanvas React

■エディタとエンジンについて

PlayCanvasエンジンは、すべての基盤となるオープンソースのJavaScriptライブラリです。PlayCanvas Reactは、このエンジンの上にReactフレンドリーな構文を提供する薄いラッパーとして機能します。

一方、PlayCanvasエディタは、資産管理、シーンの構成、迅速な反復を可能にする強力なブラウザベースのツールです。Editorは、アセット管理、シーン構成、迅速なイテレーションのためのツール一式を提供しますが、PlayCanvas Reactは、Reactコードの中から3Dコンテンツを構築することに重点を置いています。Reactとそのエコシステムに精通している開発者にとって、PlayCanvas Reactはコード中心のワークフローを提供し、より大規模なReactアプリケーション内で3Dコンテンツを直接構築するのに適しています。

Reactとは
Reactは、Facebook（現Meta）によって開発されたJavaScriptライブラリで、ユーザーインターフェース（UI）を構築するために使用されます。特にコンポーネントベースのアプローチを採用しており、再利用可能なUIパーツを作成できます。

シーンの作成方法の例

@playcanvas/reactを使用すると、エンティティとコンポーネントを使ってシーンを作成できます。これはPlayCanvasのエディタやエンジンと同様の概念です。

エンティティには位置、回転、スケールがあり、シーンの基本的な構成要素となります。一方、コンポーネントはエンティティに動作を追加します。たとえば、<Render/> コンポーネントをエンティティに追加すると、メッシュをレンダリングできます。

コード例

import { Application, Entity } from '@playcanvas/react';
import { Script as PcScript } from 'playcanvas';

// エンティティを回転させるスクリプト
class Spinner extends PcScript {
  update(dt) {
    this.entity.rotate(0, this.speed * dt, 0);
  }
}

// 初めての @playcanvas/react の例
export const HelloWorld = () => {
  const material = useMaterial({ diffuse: 'gray' });

  return <Entity>
    {/* カメラエンティティを作成 */}
    <Entity name='camera' position={[4, 3, 4]}>
      <Camera clearColor='#111111' fov={28} />
    </Entity>

    {/* 回転するボックスのエンティティを作成 */}
    <Entity position={[0, 0.5, 0]}>
      <Render type='box' material={material} />
      <Script script={Spinner} speed={10}/>
    </Entity>
  </Entity>;
};

PlayCanvas APIに慣れている方は、すぐに活用できるでしょう。エンジンで利用可能なコンポーネントシステム（剛体、衝突、物理演算など）をそのまま使用できます。詳細は入門ガイドを参照してください。

Reactのバックグラウンドを持つ開発者にとっては、既存のReactプロジェクトに簡単に統合できる点も魅力です。