three.js - 标签在此浏览器中无法识别

Question

import React, { Suspense } from 'react'
import { useGLTF } from '@react-three/drei'

const MagicRoom = () => {
  // Importing model
  const Model = () => {
    const gltf = useGLTF('./libs/the_magic_room/scene.gltf', true)
    return <primitive object={gltf.scene} dispose={null} scale={1} />
  }
  return (
    <Suspense fallback={null}>
      <Model />
    </Suspense>
  )
}

export default MagicRoom

我正在尝试使用primitive在 react-fiber 中导入 gltf 模型，但它给出了上述错误

Answer 1

primitive占位符可以在@react-three/fiber中找到，导入此模块将解决错误。所以最终的代码看起来像：

import React, { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { useGLTF } from '@react-three/drei'

const MagicRoom = () => {
  // Importing model
  const Model = () => {
    const gltf = useGLTF('./libs/the_magic_room/scene.gltf', true)
    return <primitive object={gltf.scene} dispose={null} scale={1} />
  }
  return (
    <Canvas>
      <Suspense fallback={null}>
        <Model />
      </Suspense>
    </Canvas>
  )
}

export default MagicRoom