该浏览器无法识别 React Three Fiber 网格标签

Question

我正在关注 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;

这些是我收到的警告

1. 警告： <hemisphereLight /> 使用了不正确的大小写。React 组件使用 PascalCase，HTML 元素使用小写。
2. 警告：此浏览器无法识别标签 <hemisphereLight>。如果您打算渲染 React 组件，请以大写字母开头。
3. 警告：React 无法识别groundColorDOM 元素上的 prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写groundcolor。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除
4. 警告：<pointLight /> 使用了不正确的大小写。React 组件使用 PascalCase，HTML 元素使用小写
5. 警告：此浏览器无法识别标签 <pointLight>。如果您打算渲染 React 组件，请以大写字母开头。
6. 警告：此浏览器无法识别标签 <primitive>。如果您打算渲染 React 组件，请以大写字母开头。
7. 警告：此浏览器无法识别标签 <mesh>。如果您打算渲染 React 组件，请以大写字母开头。

任何人都可以解决这个问题吗？谢谢！！

Answer 1

我也发生了同样的错误，这就是我修复它的方法。

您当前正在将export default Computer 其更新为export default ComputerCanvas ，这应该可以修复它。

Answer 2

您当前正在导出默认计算机。更新为导出默认 ComputerCanvas

那么如果你已经创建了CanvasLoader，它会给出 --index-bb759d07.esm.js:215 R3F 树中不允许文本！这可能是杂散的空格或字符。

所以尝试删除 fallback={<CanvasLoader />，这修复了所有错误

Answer 3

1. 删除修复fallback={<CanvasLoader /> 了 <Suspense fallback={<CanvasLoader />}>我的所有问题，包括计算机对象的刷新问题。

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