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

<pc-script>

<pc-script>タグは、スクリプトコンポーネントを定義するために使用されます。

使用法

属性

属性タイプデフォルト説明
enabledBoolean"true"コンポーネントの有効状態

2つのスクリプトを保持する1つのスクリプトコンポーネントです — rotate がキューブを回転させ、pulse がスケールを脈動させます。どちらかの <pc-script-instance> タグを削除したり、<pc-script> コンポーネントに enabled="false" を設定して両方を無効にしたりしてみましょう:

ライブサンプル
<pc-app>
<pc-scene>
<pc-entity name="camera" position="0 0 3">
<pc-camera clear-color="#1d1f2b"></pc-camera>
</pc-entity>
<pc-entity name="light" rotation="45 30 0">
<pc-light></pc-light>
</pc-entity>
<pc-entity name="cube">
<pc-render type="box"></pc-render>
<pc-script>
<pc-script-instance name="rotate"></pc-script-instance>
<pc-script-instance name="pulse"></pc-script-instance>
</pc-script>
</pc-entity>
</pc-scene>
</pc-app>
<script type="module">
import { registerScript, Script } from 'playcanvas';
import { whenReady } from '@playcanvas/web-components';

await whenReady('pc-app');

class Rotate extends Script {
update(dt) {
this.entity.rotate(0, 90 * dt, 0);
}
}

class Pulse extends Script {
time = 0;

update(dt) {
this.time += dt;
const s = 1 + 0.2 * Math.sin(this.time * 3);
this.entity.setLocalScale(s, s, s);
}
}

registerScript(Rotate, 'rotate');
registerScript(Pulse, 'pulse');
</script>

JavaScriptインターフェース

ScriptComponentElement APIを使用して、<pc-script>要素をプログラムで作成および操作できます。