<primitive> 标签在此浏览器中无法识别

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在反应纤维中导入gltf模型，但它给出了上述错误

Answer 1

我也有同样的问题，即使在模型组件中，也应该在画布元素中使用wrap原语。这对我很有效。…

import React from "react";
import * as THREE from "three";
import { Suspense, useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
import CanvasLoader from "../Loader";
// import { hemisphereLight } from "three";
const Computers = () => {
const computer = useGLTF("./desktop_pc/scene.gltf");
return (
<Canvas>
<mesh>
<hemisphereLight intensity={0.15} groundColor="black" />
<pointLight intensity={1} />
<primitive object={computer.scene} />
</mesh>
</Canvas>
);
};
const ComputersCanvas = () => {
return (
<Canvas
frameLoop="demand"
shadows
camera={{ position: [20, 3, 5], fov: 25 }}
gl={{ preserveDrawingBuffer: true }}
>
<Suspense fallback={<CanvasLoader />}>
<OrbitControls
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>
<mesh>
<Computers />
</mesh>
</Suspense>
<Preload all />
</Canvas>
);
};
export default Computers;

Answer 2

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