跳到主要内容

标签参考

本页按用途列出全部标签,说明它们形成的文档结构,并提供各标签参考。

标签如何组合​

每个文档结构类似:<pc-app> 包含资源和一个 <pc-scene>,场景包含实体,实体包含所需各类型组件及子实体:

<pc-app>
<!-- Resources are declared once and referenced by id -->
<pc-asset id="sky" src="sky.webp"></pc-asset>
<pc-asset id="robot" src="robot.glb"></pc-asset>
<pc-material id="gold" diffuse="#d4af37" metalness="1"></pc-material>
<pc-wasm name="Ammo" glue="ammo.wasm.js" wasm="ammo.wasm.wasm"></pc-wasm>
<pc-scene>
<pc-sky asset="sky"></pc-sky>
<!-- An entity takes one of each component tag, and nests entities and models -->
<pc-entity name="camera" position="0 2 6">
<pc-camera></pc-camera>
</pc-entity>
<pc-entity name="crate" position="0 3 0">
<pc-render type="box" material="gold"></pc-render>
<pc-collision></pc-collision>
<pc-rigid-body type="dynamic"></pc-rigid-body>
</pc-entity>
<!-- A model is an entity that instantiates a GLB; a node binds to a node inside it -->
<pc-model asset="robot">
<pc-anim clip="idle">
<pc-anim-clip name="idle"></pc-anim-clip>
</pc-anim>
<pc-node name="head">
<pc-light type="spot"></pc-light>
</pc-node>
</pc-model>
</pc-scene>
</pc-app>

三个标签代表引擎实体,均可包含组件:<pc-entity>、<pc-model>、<pc-node>。模型内组件挂到模型宿主,节点内组件挂到被绑定节点,支持与普通实体相同的组件。

各标签页说明所需父项。多数位置错误会在控制台警告,编写时建议保持控制台打开。

按用途分类​

结构​

构成文档的五类结构:应用、场景,以及三个实体宿主。

标签说明
<pc-app>应用根元素,定义图形设备及所包含的资源和场景。
<pc-scene>场景及全局雾、曝光和重力。
<pc-entity>具有名称和变换的实体,容纳组件与子实体。
<pc-model>从 GLB 实例化三维模型的实体。
<pc-node>绑定已加载模型内节点并覆盖其属性。

资源​

作为 pc-app 直接子项声明一次,使用方通过 id 引用。

标签说明
<pc-asset>声明应用加载的资源。
<pc-material>声明渲染组件可引用的材质。
<pc-wasm>声明 Ammo 等 WebAssembly 模块。

渲染​

标签说明
<pc-camera>用于渲染场景的摄像机。
<pc-light>平行光、全向光或聚光灯,可选阴影。
<pc-render>以材质绘制基本形状的渲染组件。
<pc-sprite>绘制静态或动画二维精灵。
<pc-sprite-clip>精灵组件的一段动画。
<pc-gsplat>渲染三维高斯泼溅。
<pc-particle-system>由 JSON 配置资源驱动的粒子系统。
<pc-sky>基于图像的天空盒。

动画​

标签说明
<pc-anim>播放动画片段的组件。
<pc-anim-clip>分配给动画组件的单段片段。

物理​

物理需要通过 <pc-wasm> 声明 Ammo。

标签说明
<pc-collision>供触发器和刚体使用的碰撞组件。
<pc-rigid-body>静态、动态或运动学刚体。
<pc-joint>约束两个刚体的物理关节。

用户界面​

<pc-screen> 包含带 <pc-element> 的实体树,其余标签为元素添加行为。

标签说明
<pc-screen>渲染元素组件的屏幕。
<pc-element>文本、图像或组界面元素。
<pc-button>具有悬停、按下和未激活状态的按钮。
<pc-layout-group>将子元素排列为行或列的布局组。
<pc-layout-child>布局组内逐子项的尺寸规则。
<pc-scroll-view>显示内容实体一部分的滚动视口。
<pc-scrollbar>控制滚动视图的可拖动滚动条。

音频​

标签说明
<pc-sound>容纳声音槽位的组件。
<pc-sound-slot>分配给声音组件的单个声音。
<pc-audio-listener>空间声音的监听点。

脚本​

标签说明
<pc-script>容纳脚本实例的组件。
<pc-script-instance>分配给脚本组件的单个脚本。

通用约定​

各标签共用属性规则:未设置或移除时采用默认值,无效值会警告并回退。类型列说明 Boolean、Number、Enum、Vector、Color、String,以及资源、材质和实体引用的写法,详见属性。

标签名称与引擎组件的对应关系

去掉 pc- 前缀和连字符即可得到引擎组件 ID,例如 pc-layout-group 对应 entity.layoutgroup,pc-rigid-body 对应 entity.rigidbody,pc-audio-listener 对应 entity.audiolistener。反向转换需要恢复单词分隔,但 scrollbar 仍为 pc-scrollbar,scrollview 则为 pc-scroll-view。引擎 ID 连写是为了作为 JavaScript property 使用,而 HTML 标签可以含连字符。

可重复子项使用父标签作为前缀:<pc-anim> 内放 <pc-anim-clip>,<pc-sound> 内放 <pc-sound-slot>,<pc-sprite> 内放 <pc-sprite-clip>,<pc-script> 内放 <pc-script-instance>。

除 <pc-material> 外,所有标签异步初始化并触发 ready,此时 whenReady() 也完成,时机详见 ready 事件。各标签页事件一节仅列出专有事件。

全部标签:A–Z​

<pc-anim> · <pc-anim-clip> · <pc-app> · <pc-asset> · <pc-audio-listener> · <pc-button> · <pc-camera> · <pc-collision> · <pc-element> · <pc-entity> · <pc-gsplat> · <pc-joint> · <pc-layout-child> · <pc-layout-group> · <pc-light> · <pc-material> · <pc-model> · <pc-node> · <pc-particle-system> · <pc-render> · <pc-rigid-body> · <pc-scene> · <pc-screen> · <pc-script> · <pc-script-instance> · <pc-scrollbar> · <pc-scroll-view> · <pc-sky> · <pc-sound> · <pc-sound-slot> · <pc-sprite> · <pc-sprite-clip> · <pc-wasm>