跳到主要内容

<pc-sky>

<pc-sky> 用图像提供绘制在其他内容后的天空背景,启用 lighting 时,还提供材质照明与反射环境。

用法

属性​

属性类型默认值说明
asset资源 ID-必须引用 texture 资源
centerVector3"0 0.01 0"天空中心 X Y Z,范围 0 到 1,用于 box 和 dome
enabledBoolean(布尔)"true"是否绘制背景,不影响 lighting,false 时仍照亮场景
intensityNumber(数字)"1"天空及其照明亮度
lightingBoolean(布尔)"false"是否同时提供图像照明和反射,在图像加载时读取
mip-levelNumber(数字)"0"天空盒 mip,0 最清晰,增大选择更模糊层,无需修改纹理。需要 lighting 生成模糊 mip
rotationVector3"0 0 0"X Y Z 角度制欧拉角
scaleVector3"100 100 100"X Y Z 缩放,用于 box 和 dome
typeEnum(枚举)"infinite""box" | "dome" | "infinite",隐藏时仍保留类型

示例​

等距柱状纹理采用 dome 投影并照亮场景。拖动环顾,可改为 infinite、旋转 0 90 0、enabled=false 仅保留光照,或提高 mip-level 柔化:

实时示例
<pc-app>
<pc-asset src="https://cdn.jsdelivr.net/npm/[email protected]/scripts/esm/camera-controls.mjs"></pc-asset>
<pc-asset id="skybox" src="https://developer.playcanvas.com/assets/sepulchral-chapel-rotunda-4k.webp"></pc-asset>
<pc-scene>
<pc-sky asset="skybox" type="dome" center="0 0.05 0" scale="20 20 20" lighting></pc-sky>
<pc-entity name="camera" position="0 1.5 5">
<pc-camera clear-color="#1d1f2b"></pc-camera>
<pc-script>
<pc-script-instance name="cameraControls" enable-pan="false" pitch-range="-90 0" zoom-range="2 12"></pc-script-instance>
</pc-script>
</pc-entity>
<pc-entity name="sphere" position="0 1 0">
<pc-render type="sphere"></pc-render>
</pc-entity>
</pc-scene>
</pc-app>

JavaScript 接口​

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

各 attribute 有对应 property。天空本身位于底层 Scene 的 sky 和环境图集中,可通过 pc-scene.scene 访问。

另请参阅​

示例:GLB 加载器、产品查看器和级联阴影。