解决React-Three-Fiber中“标签未识别”警告的教程

import { Suspense, useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";

import CanvasLoader from '../Loader'

// 原始代码中的Computers组件
const Computers = () => {
  const computer = useGLTF('/lowpoly_earth/scene.gltf')

  return (
      // 这里的<primitive>导致警告
      <primitive object={computer.scene}/>
  )
} 

const ComputersCanvas = () => {
  return(
    <Canvas
      frameloop="demand"
      shadows
      camera={{ }}
      gl={{ preserveDrawingBuffer: true }}
    >
      <Suspense fallback={<CanvasLoader />}>
        <OrbitControls 
          enableZoom 
          autoRotate
          maxPolarAngle={Math.PI / 2}
          minPolarAngle={Math.PI / 2}
        />
        <Computers /> {/* 这里调用了Computers组件 */}
      </Suspense>

      <Preload all />
    </Canvas>
  )
}

export default Computers

import { Suspense, useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";

import CanvasLoader from '../Loader';

// 修正后的Computers组件
const Computers = () => {
  // 使用useGLTF hook加载模型
  const computer = useGLTF('/lowpoly_earth/scene.gltf');

  // 返回一个Three.js的primitive对象
  // React现在将其视为Computers组件的内部实现，
  // 而不是一个未识别的HTML标签
  return (
    <mesh> {/* 可以选择用一个<mesh>或其他Three.js对象包裹，提供更好的结构 */}
      {/* 调整位置、旋转、缩放等，确保模型在场景中正确显示 */}
      <primitive 
        object={computer.scene} 
        scale={[0.7, 0.7, 0.7]} // 示例：调整模型大小
        position={[0, -3.25, 0]} // 示例：调整模型位置
        rotation={[-0.01, -0.2, -0.1]} // 示例：调整模型旋转
      />
    </mesh>
  );
};

const ComputersCanvas = () => {
  return (
    <Canvas
      frameloop="demand"
      shadows
      camera={{ position: [20, 3, 5], fov: 25 }} // 示例：设置相机位置和视场
      gl={{ preserveDrawingBuffer: true }}
    >
      {/* 添加环境光和点光源，使模型可见 */}
      <ambientLight intensity={0.5} />
      <pointLight intensity={1} position={[10, 10, 10]} />
      {/* 可选：添加聚光灯 */}
      <spotLight
        position={[-20, 50, 10]}
        angle={0.12}
        penumbra={1}
        intensity={1}
        castShadow
        shadow-mapSize={1024}
      />

      <Suspense fallback={<CanvasLoader />}>
        <OrbitControls
          enableZoom={false} // 示例：禁用缩放
          autoRotate // 自动旋转
          maxPolarAngle={Math.PI / 2}
          minPolarAngle={Math.PI / 2}
        />
        <Computers /> {/* 正确调用Computers组件 */}
      </Suspense>

      <Preload all />
    </Canvas>
  );
};

export default ComputersCanvas; // 通常导出Canvas组件，而不是内部模型组件