跳到主要内容

使用 Web Components

使用 PlayCanvas Web Components 逐步创建可交互环绕的 3D 玩具猫场景。

起点​

新建 index.html，复制入门指南的示例页面，清空 body 内内容。

使用 <pc-app> 和 <pc-scene> 添加基础结构：

<pc-app antialias="false" max-pixel-ratio="1">
    <pc-scene>
    </pc-scene>
</pc-app>

这创建空 3D 场景，仍需相机和数据才能看到内容。

性能优化

在 pc-app 禁用 antialias，将 max-pixel-ratio 限制为 1，按 CSS 分辨率渲染，以降低主要瓶颈——片元处理负载。参见性能。

加载资源​

先通过 <pc-asset> 定义控制脚本与数据资源：

<pc-app antialias="false" max-pixel-ratio="1">
    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs"></pc-asset>
    <pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.sog"></pc-asset>
    <pc-scene>
    </pc-scene>
</pc-app>

添加了两个资源：

  • 支持场景环绕的相机控制脚本。
  • 玩具猫的压缩 PLY。

添加相机​

通过 <pc-entity> 和 <pc-camera> 添加：

<pc-app antialias="false" max-pixel-ratio="1">
    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs"></pc-asset>
    <pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.sog"></pc-asset>
    <pc-scene>
        <pc-entity position="0 0 2.5">
            <pc-camera></pc-camera>
        </pc-entity>
    </pc-scene>
</pc-app>

相机位于 Z 轴正方向 2.5 单位，默认沿负 Z 观察，正对稍后放置数据的原点。

添加相机控制​

通过 <pc-script> 和 <pc-script-instance> 添加控制脚本：

<pc-app antialias="false" max-pixel-ratio="1">
    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs"></pc-asset>
    <pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.sog"></pc-asset>
    <pc-scene>
        <pc-entity position="0 0 2.5">
            <pc-camera></pc-camera>
            <pc-script>
                <pc-script-instance name="cameraControls"></pc-script-instance>
            </pc-script>
        </pc-entity>
    </pc-scene>
</pc-app>

控制支持：

  • 左键拖动：环绕。
  • 中键拖动：平移。
  • 滚轮：缩放。

添加高斯泼溅​

通过 <pc-gsplat> 加入玩具猫：

<pc-app antialias="false" max-pixel-ratio="1">
    <pc-asset src="https://cdn.jsdelivr.net/npm/playcanvas/scripts/esm/camera-controls.mjs"></pc-asset>
    <pc-asset id="toy" src="https://developer.playcanvas.com/assets/toy-cat.sog"></pc-asset>
    <pc-scene>
        <pc-entity position="0 0 2.5">
            <pc-camera></pc-camera>
            <pc-script>
                <pc-script-instance name="cameraControls"></pc-script-instance>
            </pc-script>
        </pc-entity>
        <pc-entity position="0 -0.7 0" rotation="0 0 180">
            <pc-gsplat asset="toy"></pc-gsplat>
        </pc-entity>
    </pc-scene>
</pc-app>

位置在原点下方，Y 为 -0.7，绕 Z 转 180 度以调整朝向。asset="toy" 引用之前定义的资源。

最终结果​

完成后，应看到可环绕、平移和缩放的交互式玩具猫。

动手试试

将完整 HTML 复制到文件并在浏览器打开，体验首个应用，再使用 PlayCanvas 引擎继续扩展。