跳到主要内容

天空盒

类型​

类

默认用法​

下面的每个示例都可以用 WebGPU（默认）或 WebGL 渲染器查看 —— 切换标签页进行对比。

import { useEffect, useRef } from 'react'
import { Scene, SkyBox } from 'react-three-lite'
import type * as THREE from 'three'

export default function SkyBoxComponent() {
  const skyBoxRef = useRef<SkyBox | null>(null)

  const handleCreated = (scene: THREE.Scene, { camera }: { camera: THREE.Camera }) => {
    if (camera) {
      camera.position.set(0, 1.5, 3)
    }

    const skyBox = new SkyBox([
      '/images/examples/skybox/right.jpg',
      '/images/examples/skybox/left.jpg',
      '/images/examples/skybox/top.jpg',
      '/images/examples/skybox/bottom.jpg',
      '/images/examples/skybox/front.jpg',
      '/images/examples/skybox/back.jpg'
    ])
    skyBoxRef.current = skyBox
    scene.background = skyBox.scene
  }

  useEffect(() => {
    return () => {
      skyBoxRef.current?.scene.dispose()
      skyBoxRef.current = null
    }
  }, [])

  return (
    <Scene
      style={{ marginTop: '10px', width: '100%', height: '300px' }}
      onCreated={handleCreated}
    />
  )
}

属性​

名称类型描述
sceneTHREE.CubeTexture用于 THREE.Scene 背景的立方体纹理。

方法​

名称参数描述
constructor(images: string[]) => voidimages 包含六张图片，分别是立方体的右、左、上、下、前、后。