跳到主要内容

可移动元素

类型​

类

默认用法​

import { Scene, Movable } from 'react-three-lite'
import { GLTFLoader } from 'react-three-lite'

function App() {
  const handleCreated = async (scene, { camera }) => {
    camera.position.set(0, 1.5, 3)

    // 使用GLTFLoader函数版本加载模型
    const model = await GLTFLoader('/models/perseverance-draco.glb', true)
    model.scale.set(0.8, 0.8, 0.8)
    scene.add(model)

    // 创建可移动元素，起始位置为 [0, 0, -1]
    const element = new Movable(model, [0, 0, -1])

    // 在10秒内将模型移动到 [0, 0, 0]
    element.moveTo([0, 0, 0], 10000)
  }

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

属性​

名称类型描述
sceneTHREE.Group要展示和移动的模型。

方法​

名称参数描述
constructor(model: THREE.Group, position: [number, number, number]) => voidmodel 操作的模型；position 初始位置。
moveTo(position: [number, number, number], duration: number) => voidduration 是从一个位置移动到另一个位置的持续时间，单位为毫秒。