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

開始

始める前に、Node.js 18以降がインストールされていることを確認してください。

NPMからのインストール​

PlayCanvas Web Componentsは、NPMでパッケージとして利用できます。 次のようにインストールできます（PlayCanvas Engineも同様に）：

npm install playcanvas @playcanvas/web-components --save-dev

次に、HTMLファイルでインポートマップが必要になります。これは、Web ComponentsがPlayCanvas Engine（外部依存関係）を見つけられるようにするためです。

<script type="importmap">
    {
        "imports": {
            "playcanvas": "/node_modules/playcanvas/build/playcanvas.mjs"
        }
    }
</script>

その後、Web Componentsを次のようにインポートできます。

<script type="module" src="/node_modules/@playcanvas/web-components/dist/pwc.mjs"></script>

これで、PlayCanvas Web Componentsのいずれかの要素をHTMLに組み込むことができます！

CDNの使用​

ライブラリをローカルパッケージからロードする代わりに、CDN（jsDelivrなど）からロードすることを選択できます。この場合、インポートマップを更新します。

<script type="importmap">
    {
        "imports": {
            "playcanvas": "https://cdn.jsdelivr.net/npm/playcanvas@2.6.0/build/playcanvas.mjs"
        }
    }
</script>

コンポーネントは次のようにインポートされます。

<script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.2.5/dist/pwc.mjs"></script>

ボイラープレートHTML​

最小限のボイラープレートHTMLファイルでどのように見えるか見てみましょう。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>My PlayCanvas Web Components App</title>
        <script type="importmap">
            {
                "imports": {
                    "playcanvas": "https://cdn.jsdelivr.net/npm/playcanvas@2.6.0/build/playcanvas.mjs"
                }
            }
        </script>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.2.5/dist/pwc.mjs"></script>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <!-- あなたのPlayCanvas Web Components要素はここに配置されます -->
    </body>
</html>

これで、PlayCanvas Web Componentsを使用して3Dシーンを構築する準備ができました！