logo标签列表

React Three Fiber的网格标签在这个浏览器中无法识别。

reactjsthree.jsreact-three-fiberreact-three-drei
8
我正在按照YouTube上的一个3D作品集教程进行学习，但遇到了这个错误。我在试图渲染一个网格，但控制台显示出一个警告："该元素在此浏览器中无法识别"。浏览器能够正常渲染其他部分，但是这部分代码没有被渲染出来。 以下是代码块：
const Computers = () => {
    const computer = useGLTF("./desktop_pc/scene.gltf");
    console.log(computer);
    return (
        <mesh>
            <hemisphereLight intensity={0.15} groundColor="black" />
            <pointLight intensity={1} />
            <primitive
                object={computer.scene}
                scale={0.75}
                position={[0, -3.25, 1.5]}
                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 }}>
            <Suspense fallback={<CanvasLoader />}>
                <OrbitControls
                    enableZoom={false}
                    maxPolarAngle={Math.PI / 2}
                    minPolarAngle={Math.PI / 2}
                />
                <Computers />
            </Suspense>
            <Preload all />
        </Canvas>
    );
};
export default Computers;

这些是我收到的警告信息

警告：< hemisphereLight /＆gt;使用不正确的大小写。对于React组件，请使用PascalCase，对于HTML元素，请使用小写。
警告：此浏览器中未识别标记< hemisphereLight>。如果您想要呈现React组件，请以大写字母开头命名。
警告：React不会在DOM元素上识别'groundColor'属性。如果您有意要将其显示为自定义属性，请将其拼写为小写的'groundcolor'。如果您从父组件意外传递了它，请从DOM元素中删除它。
警告：< pointLight /＆gt;使用不正确的大小写。对于React组件，请使用PascalCase，对于HTML元素，请使用小写。
警告：此浏览器中未识别标记< pointLight>。如果您想要呈现React组件，请以大写字母开头命名。
警告：此浏览器中未识别标记< primitive>。如果您想要呈现React组件，请以大写字母开头命名。
警告：此浏览器中未识别标记< mesh>。如果您想要呈现React组件，请以大写字母开头命名。

有人可以解决这个问题吗？谢谢！

5个回答
12

我也遇到了同样的错误，这是我如何解决它的方法。

你当前正在使用 export default Computer 将其更新为 export default ComputerCanvas 那应该就可以解决问题了。

6

你目前正在执行 export default Computer。请将其更新为 export default ComputerCanvas

如果您还没有创建 CanvasLoader，则会出现错误 -- index-bb759d07.esm.js:215 Text is not allowed in the R3F tree! This could be stray whitespace or characters.

因此，请尝试删除 fallback={<CanvasLoader />，这样可以修复所有错误

5

  1. 从 <Suspense fallback={<CanvasLoader />}> 中移除 fallback={<CanvasLoader />} 解决了所有问题，包括与计算机对象的刷新问题。

  2. 确保使用 export default ComputersCanvas; 替代 export default Computers;

1
一个简单的修复方法是更新CanvasLoader组件，如下所示。最重要的是更改导出。
import { useProgress, Html } from "@react-three/drei";
const CanvasLoader = () => {
  const { progress } = useProgress();
  return (
    <Html>
      <span className="canvas-load"></span>
      <p
        style={{
          fontSize: 14,
          color: "#f1f1f1",
          fontWeight: 800,
          marginTop: 40,
        }}
      >
        {progress.toFixed(0)}%
      </p>
    </Html>
  );
};

export default CanvasLoader;
0
我在代码中做了一些更改，就像这样：
const ComputersCanvas = () => {
  return (
    <Canvas
      frameloop="demand"
      shadows
      camera={{ position: [20, 3, 5], fov: 25 }}
      gl={{ preserveDrawingBuffer: true }}
    >
      <Suspense>
        <OrbitControls
          enableZoom={false}
          maxPolarAngle={Math.PI / 2}
          minPolarAngle={Math.PI / 2}
        />
        <Computers />
      </Suspense>
      <Preload all />
    </Canvas>
  );
};

export default ComputersCanvas;

我注意到特别是这部分。
<Suspense fallback={<CanvasLoader />}>

还出现了错误。如果在CanvasLoader后面不加空格写，它就会停止工作。

为了解决这个问题，您需要调整加载器，像这样：

import { Html, useProgress } from "@react-three/drei";

const Loader = () => {
  const { progress } = useProgress();

  return (
    <Html>
      <span className="canvas-loader"></span>
      <p>{progress.toFixed(2)}%</p>
    </Html>
  );
};

export default Loader;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接