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

Question

浏览器无法识别标签。我正在构建一个没有加载我的 3D 模型的 react 和 three.js 项目。我通过查看文档和其他东西尝试了很多方法，但它没有用。这是我的代码。

import { Suspense, useEffect, useRef, useState } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Preload, useGLTF } from '@react-three/drei';
import CanvasLoader from '../Loader';

const Computers = () => {
  const computer = useGLTF('./desktop_pc/scene.gltf');

  return (
    <mesh>
      <hemisphereLight intensity={0.15} groundColor="black" />
      <pointLight intensity={1} />
      <primitive object={computer.scene} />
    </mesh>
  );
};

const ComputerCanvas = () => {
  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}
        />
        <Computers />
      </Suspense>
      <Preload all />
    </Canvas>
  );
};

export default Computers;

我尝试查看并实施官方文档，但它没有用。

Answer 1

而不是“导出默认计算机”类型“导出默认 ComputerCanvas”

精通JavaScript😊😊

Answer 2

我有相同的情况（错误）：“警告：使用不正确的大小写。对 React 组件使用 PascalCase，对 HTML 元素使用小写。”等等

此代码来自YouTube：https://youtu.be/0fYi8SGA20k 第二天错误就消失了。 可能是由于 VS Code 重启，Chrome 浏览器。