跳到主要内容

<pc-script-instance>

<pc-script-instance> 为父 <pc-script> 的实体添加一个脚本实例，name 指定已注册类，其余属性配置实例。

用法
  • 必须直接位于 <pc-script> 下。
  • 通过 <pc-asset> 加载模块注册类，或在 pc-app 就绪后自行调用 registerScript()。

属性​

属性类型默认值说明
attributesString（字符串）-JSON 属性对象，用于嵌套结构及 title 等与 HTML 保留名称冲突的脚本属性
enabledBoolean（布尔）"true"脚本启用状态
nameString（字符串）-类注册名称，即 scriptName 或 registerScript() 指定名称

其他非保留属性映射到同名脚本项，kebab-case 对应 camelCase，例如 focus-point → focusPoint。按默认值类型解析，不能推断时可用 asset:、entity:、vec2:、vec3:、vec4:、color:。entity: 裸值为名称，id 应写 entity:#id。同名项同时出现在 JSON 中时，逐属性优先。详见脚本行为。

声明值是配置依据。pc-model 改资源时保留宿主与脚本实例，存活实例会重新应用声明配置，覆盖声明属性的运行时修改。因此运行状态应放在标记未声明的 property 中。pc-node 重新绑定则是新实体，脚本重新创建。

类不必先注册，元素会等待，到达后创建实例，并在 initialize() 前应用全部声明属性。脚本资源全部加载结束仍缺类时会警告，通常是忘记 pc-asset 或 name 与 scriptName 不匹配。元素仍持续等待，因此稍后注册也可成功。

事件​

通过 addEventListener() 监听：

事件说明
scriptattributeschange设置 attributes JSON 或 scriptAttributes 时触发，detail.attributes 为新对象；逐属性修改不触发
scriptenablechange每次设置 enabled 都触发，即使值没变，detail.enabled 为新状态
scriptnamechange已有 name 后改名时触发，detail.oldName 和 detail.newName 为两名称；父 <pc-script> 销毁旧脚本并创建新脚本

三者均冒泡。父组件监听并应用到引擎，也可在祖先统一观察多个实例。逐属性由父组件直接观察元素变化，如需自行观察，可用 MutationObserver。

示例​

立方体挂载 rotate。脚本通常来自资源，也可从内联模块注册，实例会等待类到达。可修改旋转速度：

实时示例
<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>
        </pc-entity>
    </pc-scene>
</pc-app>
<script type="module">
    import { registerScript, Script } from 'playcanvas';
    import { whenReady } from '@playcanvas/web-components';

    // Wait for the application, then register the script class
    await whenReady('pc-app');

    class Rotate extends Script {
        update(dt) {
            this.entity.rotate(10 * dt, 20 * dt, 30 * dt);
        }
    }

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

JavaScript 接口​

可以通过 ScriptInstanceElement API创建和操作元素。

实例创建后就绪，等待 whenReady 或 ready()，再通过 script 访问活动 Script，或将对象赋给 scriptAttributes，等同 attributes JSON 通道。

另请参阅​

示例：补间、太阳系和注释热点。