開始
始める前に、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シーンを構築する準備ができました!