跳到主要内容

<pc-scene>

<pc-scene> 定义应用渲染的场景，包括实体层级根，以及作用于全部内容的雾、曝光、高斯泼溅、光照和重力。

用法

属性​

属性类型默认值说明
exposureNumber（数字）"1"整体亮度倍率。通过底层 scene.physicalUnits 启用物理光照单位后忽略
fogEnum（枚举）"none"雾类型："none" | "linear" | "exp" | "exp2"
fog-colorColor（颜色）"0 0 0"空格分隔 RGB、十六进制或颜色名称
fog-densityNumber（数字）"0"指数雾密度
fog-endNumber（数字）"1000"线性雾结束距离
fog-startNumber（数字）"1"线性雾起始距离
gsplat-ditherEnum（枚举）"bluenoise"随机渲染覆盖率抖动："bayer2" | "bayer4" | "bayer8" | "bayer16" | "bluenoise" | "ignnoise"。仅启用 gsplat-stochastic 时生效，时间抗锯齿下蓝噪声效果最佳
gsplat-splat-budgetNumber（数字）"1000000"全场景高斯点预算，在流式资源间分配，按预算模式使用。0 或更小表示无预算，详见细节层级
gsplat-splat-budget-modeEnum（枚举）"target""target" | "limit"。target 无论距离都提高细节直至用满，limit 按各 <pc-gsplat> 距离决定，只为满足预算而降低，详见细节层级
gsplat-stochasticBoolean（布尔）"false"WebGPU 随机 Alpha 渲染：不排序，使用抖动覆盖率和深度写入。省排序但带噪声，需时间抗锯齿平滑。依赖深度，保持 <pc-app> 的 depth-buffer 启用，WebGL 忽略
gsplat-use-fogBoolean（布尔）"true"是否应用场景雾
gsplat-use-tonemapBoolean（布尔）"true"是否应用摄像机色调映射与场景曝光。false 保留存储颜色，适合已可直接显示的捕获；雾仍生效
gravityVector3"0 -9.81 0"刚体重力 X Y Z
lighting-max-lightsNumber（数字）"255"每帧聚簇灯光上限，引擎限制在 1 到设备上限之间，最多 65535，超出灯光被忽略。超过 255 会使灯光网格内存翻倍

应用启动或向运行中应用插入 pc-scene 时，设置都会在脚本 initialize() 前应用，因此脚本从一开始就读取到正确值。应用和物理时间缩放位于 <pc-app>。

事件​

场景是所有实体祖先，因此实体指针事件会冒泡到它，可在此统一委托处理，通过 event.target 查命中实体：

document.querySelector('pc-scene').addEventListener('click', (event) => {
    console.log(`Clicked ${event.target.getAttribute('name')}`);
});

场景监听器也计入事件分发条件，实体自身无需监听。按下和释放位于不同顶层实体时，click 目标为最近共同祖先 pc-scene。指针整体进入或离开场景实体时还触发 pointerenter／pointerleave，可用于统一切换光标。

示例​

方块逐渐隐入线性雾。可修改 fog-color，使其匹配摄像机 clear-color，或将 fog 改为 exp、fog-density 为 0.15：

实时示例
<pc-app>
    <pc-scene fog="linear" fog-color="#4a5568" fog-start="2" fog-end="10">
        <pc-entity name="camera" position="0 1.5 4" rotation="-10 0 0">
            <pc-camera clear-color="#4a5568"></pc-camera>
        </pc-entity>
        <pc-entity name="light" rotation="45 30 0">
            <pc-light></pc-light>
        </pc-entity>
        <pc-entity name="box-1" position="-1 0.5 0">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="box-2" position="0 0.5 -3">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="box-3" position="1 0.5 -6">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="box-4" position="2 0.5 -9">
            <pc-render type="box"></pc-render>
        </pc-entity>
        <pc-entity name="ground" position="0 -0.5 -4" scale="10 1 20">
            <pc-render type="box"></pc-render>
        </pc-entity>
    </pc-scene>
</pc-app>

JavaScript 接口​

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

scene 是底层 Scene，用于配置雾、曝光和天空。所属应用创建前为 null，页面代码应先等待就绪。

另请参阅​

示例：基本形状和旋转立方体。