场景

类型

组件

默认用法

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

WebGPU

import { Scene } from 'react-three-lite'

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

WebGL

import { Scene } from 'react-three-lite'

function App() {
  return (
    <Scene
      rendererType="webgl"
      style={{ marginTop: '10px', width: '100%', height: '300px' }}
    />
  )
}

颜色背景

WebGPU

import { Scene } from 'react-three-lite'

function App() {
  return (
    <Scene
      style={{ marginTop: '10px', width: '100%', height: '400px' }}
      bgColor="#98F5F9"
    />
  )
}

WebGL

import { Scene } from 'react-three-lite'

function App() {
  return (
    <Scene
      rendererType="webgl"
      style={{ marginTop: '10px', width: '100%', height: '400px' }}
      bgColor="#98F5F9"
    />
  )
}

图片背景

WebGPU

import { Scene } from 'react-three-lite'

function App() {
  return (
    <Scene
      style={{ marginTop: '10px', width: '100%', height: '300px' }}
      bgImage="/images/examples/bg.jpg"
    />
  )
}

WebGL

import { Scene } from 'react-three-lite'

function App() {
  return (
    <Scene
      rendererType="webgl"
      style={{ marginTop: '10px', width: '100%', height: '300px' }}
      bgImage="/images/examples/bg.jpg"
    />
  )
}

属性

名称	类型	默认值	描述
modelValue	THREE.Scene	THREE.Scene	可选 组件挂载后，值将变为 THREE.Scene 实例。
renderer	WebGPURenderer | WebGLRenderer		可选 传入自定义渲染器实例，优先级高于 rendererType。
rendererType	'webgpu' | 'webgl'	'webgpu'	可选 渲染器后端。'webgpu' 使用 WebGPURenderer（WebGPU 不可用时自动回退到 WebGL2 后端），'webgl' 使用经典 WebGLRenderer。
bgColor	String		可选 场景的背景颜色。
bgImage	String		可选 场景的背景图片。
camera	THREE.Camera	THREE.PerspectiveCamera	可选 默认为 PerspectiveCamera。
light	THREE.Light	THREE.HemisphereLight	可选 默认为 HemisphereLight。
axesHelper	THREE.AxesHelper | boolean	THREE.AxesHelper	可选 默认为 AxesHelper，设为 false 隐藏。
gridHelper	THREE.GridHelper | boolean	THREE.GridHelper	可选 默认为 GridHelper，设为 false 隐藏。
controls	OrbitControls | boolean	OrbitControls	可选 默认为 OrbitControls，设为 false 禁用。

事件

名称	参数	描述
onCreated	(scene, {camera, light, axesHelper, gridHelper, controls}) => void	组件挂载并创建场景时调用。
onBeforeFrame	(renderer: WebGPURenderer | WebGLRenderer, scene: THREE.Scene, components: {camera, light, axesHelper, gridHelper, controls}) => void	每帧渲染前调用。
onFrame	(renderer: WebGPURenderer | WebGLRenderer, scene: THREE.Scene, components: {camera, light, axesHelper, gridHelper, controls}) => void	每帧渲染时调用。
onAfterFrame	(renderer: WebGPURenderer | WebGLRenderer, scene: THREE.Scene, components: {camera, light, axesHelper, gridHelper, controls}) => void	每帧渲染后调用。