标签参考
本页按用途列出全部标签,说明它们形成的文档结构,并提供各标签参考。
标签如何组合
每个文档结构类似:<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>