使用 PlayCanvas React

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

起点

先用基础 PlayCanvas React 组件建立结构：

import { Application } from '@playcanvas/react'

export default function App() {
    return (
        <Application graphicsDeviceOptions={{ antialias: false }} >
        </Application>
    );
}

这将创建适合 Web 的空 3D 场景，仍需相机和内容才能看见。

性能优化

Application 配置 graphicsDeviceOptions={{ antialias: false }}，减少主要瓶颈——片元处理负载，优化性能。参见性能。

添加相机

通过 Entity、Camera 和 CameraControls 添加相机：

import { Application, Entity } from '@playcanvas/react'
import { Camera, Script } from '@playcanvas/react/components'
import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs'

export default function App() {
    return (
        <Application graphicsDeviceOptions={{ antialias: false }} >
            <Entity name="Camera" position={[0, 0, 2.5]}>
                <Camera />
                <Script script={CameraControls} />
            </Entity>
        </Application>
    );
}

相机位于 Z 轴正方向 2.5 单位，默认沿负 Z 观察原点。CameraControls 支持：

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

添加高斯泼溅

使用 useSplat hook 和 GSplat 组件添加玩具猫：

import { Application, Entity } from '@playcanvas/react'
import { Camera, GSplat, Script } from '@playcanvas/react/components'
import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs'
import { useSplat } from '@playcanvas/react/hooks'

function ToyCat() {
    const { asset } = useSplat('toy-cat.sog');
    if (!asset) return null;

    return (
        <Entity position={[0, -0.7, 0]} rotation={[0, 0, 180]}>
            <GSplat asset={asset} />
        </Entity>
    );
}

export default function App() {
    return (
        <Application graphicsDeviceOptions={{ antialias: false }} >
            <Entity name="Camera" position={[0, 0, 2.5]}>
                <Camera />
                <Script script={CameraControls} />
            </Entity>
            <ToyCat />
        </Application>
    );
}

这里包含几个关键部分：

• useSplat：从 URL 加载资源。
• 条件渲染：if (!asset) return null; 确保加载前不渲染。
• 位置与朝向：Y 为 -0.7，绕 Z 旋转 180 度。
• 单实体：ToyCat 返回包含 GSplat 的单个 Entity。

完整代码

完整 React 组件如下：

import { Application, Entity } from '@playcanvas/react'
import { Camera, GSplat, Script } from '@playcanvas/react/components'
import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs'
import { useSplat } from '@playcanvas/react/hooks'

function ToyCat() {
    const { asset } = useSplat('toy-cat.sog');
    if (!asset) return null;

    return (
        <Entity position={[0, -0.7, 0]} rotation={[0, 0, 180]}>
            <GSplat asset={asset} />
        </Entity>
    );
}

export default function App() {
    return (
        <Application graphicsDeviceOptions={{ antialias: false }} >
            <Entity name="Camera" position={[0, 0, 2.5]}>
                <Camera />
                <Script script={CameraControls} />
            </Entity>
            <ToyCat />
        </Application>
    );
}

最终结果

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

动手试试

将完整 JSX 放入组件并运行应用，查看首个高斯泼溅应用，再使用 PlayCanvas React 继续扩展。