PlayCanvas Web Components

PlayCanvas Web Componentsを使えば、HTMLだけでリアルタイム3Dをウェブページに組み込むことができます。各 <pc-*> タグはPlayCanvas Engineの構成要素（アプリ、シーン、カメラ、ライト）をラップしているため、ページの他の部分と同じ方法、つまりマークアップでインタラクティブな3Dシーンを構成できます。

上の草原はドラッグで見回せます。カメラ、太陽、霞、サウンドはHTML要素で、空を描き、地形や木々、草を生成するスクリプトもHTML要素です。これは、ソースコード付きで公開されている40以上のライブサンプルのひとつです。

はじめる →サンプルを見る

最初のシーン

これは完全な3Dシーンです。このページ上で実際に動いていて、編集することもできます。入力するとプレビューが再実行されます。

ライブサンプル

<pc-app>
    <pc-scene>
        <pc-entity name="camera" position="0 0 3">
            <pc-camera></pc-camera>
        </pc-entity>
        <pc-entity name="light" rotation="45 45 0">
            <pc-light></pc-light>
        </pc-entity>
        <pc-entity name="ball">
            <pc-render type="sphere"></pc-render>
        </pc-entity>
    </pc-scene>
</pc-app>

<pc-app> はキャンバス、<pc-scene> はその中の世界です。各 <pc-entity> はその世界の中に位置を持つオブジェクトで、エンティティの中のタグがそのオブジェクトに能力を与えます。ここでは、ひとつ目がカメラ、ふたつ目がライトになり、3つ目が球体を描画します。次のような変更を試してみてください。

• ボールの type="sphere" を "cone"、"capsule"、"cylinder" に変える。
• <pc-light color="orange"> でライトに色を付ける。
• <pc-camera clear-color="midnightblue"> で背景を塗る。
• ボールのエンティティを複製し、position="1.2 0 0" でコピーを横に動かす。

このようなシーンを自分のページに置くには、ライブラリを読み込む2つの <script> タグを追加します。完全なファイルは開始に載っています。

作れるもの

同じタグで、球体ひとつから完成度の高い本格的な体験まで作れます。以下のショーケースはどれも1枚のHTMLページです。開くとその場で操作でき、ソースを読んだり、StackBlitzで改造したりできます。

Car Configurator

塗装色を選ぶと、スポーツカーの色が変わります。

Product Viewer

ドローンの部品にカーソルを合わせるとハイライトされ、クリックすると組み立てから引き出されます。

Solar System

ページをスクロールすると、太陽から8つの惑星を越えて旅します。

Gaussian Splat

フォトリアルな3Dキャプチャを <pc-gsplat> タグで描画します。

Third Person Controller

物理演算とブレンドされたアニメーションで、中庭を歩き、走り、ジャンプします。

Clock Tower

ローカル時刻に合わせて動く時計の機構を、ほこりの舞う光と鐘の音とともに。

サンプルブラウザには、ウェブカメラAR、車両やラグドール、パーティクル、ポジショナルサウンド、2Dと3Dのユーザーインターフェースなど、さらに多くのサンプルがあります。

PlayCanvas Web Componentsを使用する理由

• HTMLがそのままAPI。 ビルドステップもエンジンのボイラープレートもなしに、完全でインタラクティブなシーンをマークアップで構築できます。JavaScriptが必要になるのは、独自の動作を加えたいときだけです。
• すべての属性がライブ。 JavaScriptから、フレームワークから、あるいはブラウザの開発者ツールから直接属性を変更すると、シーンは即座に更新されます。共通の規約については属性を参照してください。
• フルスペックのエンジンが土台。 これは簡略化されたおもちゃのレイヤーではありません。何千ものウェブアプリケーションを支えているものと同じPlayCanvas Engineがレンダリングを担い、WebGPUファーストでWebGL 2への自動フォールバックを備えています。タグで足りないことがあれば、どの要素もエンジンのオブジェクトを渡してくれます。
• フレームワークではなくウェブ標準。 コンポーネントはCustom Elementsなので、プレーンなHTMLページでも、DOMに描画する任意のフレームワークと組み合わせても動作します。ブラウザに求めるのは、WebGL 2またはWebGPU、ES Modules、Custom Elementsだけです。いずれも現行のChrome、Edge、Firefox、Safariで標準対応しています。
• エディタがすべてのタグを知っている。 パッケージにはCustom Elements Manifestが同梱されているため、VS CodeやJetBrains系のIDEがタグと属性を補完し、入力中にそのドキュメントを表示します。
• オープンソース、MITライセンス。 GitHubでオープンに開発されており、個人・商用を問わず自由に利用でき、コントリビューションも歓迎です。

どこから始めますか？

🚀 はじめて使う

CDNからライブラリを読み込むか、npm create playcanvas でプロジェクトを作成して、数分で最初のページをレンダリングします。

開始 →

📦 3Dモデルがある

glTFやGLBファイルを読み込み、その中身を確認し、マークアップから各パーツを調整します。

モデルの読み込み →

✨ Gaussian splatがある

スプラットビューアのページをステップバイステップで構築します。キャプチャを読み込み、周回できるカメラを加え、スプラットの描画に合わせてアプリを調整します。

Webコンポーネントの使用 →

🧩 インタラクティブにしたい

エンティティにスクリプトをアタッチして動きやゲームプレイを加え、マークアップから設定し、エンジンに同梱された既製のスクリプトを再利用します。

スクリプトで動作を追加する →

Reactをお使いですか？

Web ComponentsはHTMLが動く場所ならどこでも動作し、Reactも例外ではありません。シーンをフックやJSXを使ったReactコンポーネントとして書きたい場合は、PlayCanvas Reactをご覧ください。

このセクションの内容

• 開始 — CDNまたはnpmからライブラリを読み込み、最初のページをレンダリングします。
• シーンを構築する — カメラ、メッシュ、ライト、マテリアルを扱うステップバイステップのチュートリアルです。
• モデルの読み込み — glTFやGLBを読み込み、その中身を確認し、マークアップから調整します。
• 属性 — すべてのタグに共通する値の規約です。
• スクリプトで動作を追加する — エンティティにエンジンのスクリプトをアタッチして、動きやインタラクティブ性を加えます。
• プログラムによるアクセス — whenReady を使ってJavaScriptから実行中のアプリを操作します。
• テンプレートによる再利用可能なシーン — サブツリーを <template> に一度だけ宣言し、多数のライブインスタンスとしてクローンします。
• XR のサポート — シーンをVRやARに対応させます。
• タグリファレンス — すべての要素とその属性の一覧です。
• サンプル — ソースコード付きのライブデモ集です。