メインコンテンツまでスキップ

PlayCanvas Web Components

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

上のシーンはドラッグで周回できます。シーン内のすべてのオブジェクト、ライト、マテリアルはHTMLで宣言されています。これは、ソースコード付きで公開されている30以上のライブサンプルのひとつです。

Web Componentsとは？​

Web Components は再利用可能なカスタムHTML要素であり、シンプルで宣言的なインターフェースの背後に複雑な機能をカプセル化します。PlayCanvas Web Componentsは、PlayCanvas Engineの全機能を使いやすいHTMLタグでラッピングします。

<!-- HTMLだけで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>

これがプログラムのすべてです。レンダリング結果は次のとおりです。

指向性ライトに照らされた白い球体

PlayCanvas Web Componentsを使用する理由​

🚀 JavaScript不要​

マークアップだけで、完全でインタラクティブな3Dシーンを作成できます。ビルドステップもエンジンのボイラープレートも不要で、必要にならない限りJavaScriptを書くこともありません。

🔧 すべての属性がライブ​

属性はエンジンの機能に直接対応し、実行時の変更にも反応します。JavaScriptから、あるいはブラウザの開発者ツールから属性を更新すると、シーンは即座に更新されます。共通の規約については属性を参照してください。

⚡ フルスペックのエンジンが土台​

これは簡略化されたおもちゃのレイヤーではありません。何千ものウェブアプリケーションを支えているものと同じPlayCanvas Engineがレンダリングを担い、WebGPUファーストでWebGL 2への自動フォールバックを備えています。

🌍 フレームワークではなくウェブ標準​

Custom Elementsに基づいて構築されているため、プレーンなHTMLページでも、任意のフレームワークと組み合わせても動作します。ブラウザに求めるのは、WebGL 2またはWebGPU、ES Modules、Custom Elementsだけです。いずれも現行のChrome、Edge、Firefox、Safariで標準対応しています。

こんな方に最適​

  • 複雑な3Dプログラミングを学ぶことなくウェブサイトに3D要素を追加したいコンテンツクリエイター
  • 既存のHTML/CSSワークフローに3Dグラフィックスを統合したいウェブ開発者
  • おなじみのウェブ技術を通じて3Dの概念を教えている教育者
  • 3Dのアイデアやコンセプトのラピッドプロトタイピング
  • インタラクティブな製品ショーケースやデモを作成しているマーケティングチーム
Reactをお使いですか？

アプリをReactで構築している場合は、React流のバインディングを提供するPlayCanvas Reactをご覧ください。Web Componentsはフレームワークを一切必要とせず、HTMLが動く場所ならどこでも動作します。

オープンソース＆MITライセンス​

Web ComponentsはGitHubでMITライセンスの下、オープンに開発されています。個人・商用を問わず自由に利用でき、コントリビューションも歓迎です。

このセクションの内容​

まずは「開始」ガイドから始めましょう。数分でシーンをレンダリングできます。

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