英文:
The React Three Fiber mesh tag is unrecognized in this browser
问题
- 警告:
<hemisphereLight />使用了不正确的大小写。对于 React 组件，请使用 PascalCase，对于 HTML 元素，请使用小写。 - 警告: 标签
<hemisphereLight>在此浏览器中无法识别。如果您打算渲染一个 React 组件，请使用大写字母开头的名称。 - 警告: React 不识别 DOM 元素上的
groundColor属性。如果您有意希望它出现在 DOM 中作为自定义属性，请拼写为小写的groundcolor。如果是意外从父组件传递的，请从 DOM 元素中删除它。 - 警告:
<pointLight />使用了不正确的大小写。对于 React 组件，请使用 PascalCase，对于 HTML 元素，请使用小写。 - 警告: 标签
<pointLight>在此浏览器中无法识别。如果您打算渲染一个 React 组件，请使用大写字母开头的名称。 - 警告: 标签
<primitive>在此浏览器中无法识别。如果您打算渲染一个 React 组件，请使用大写字母开头的名称。 - 警告: 标签
<mesh>在此浏览器中无法识别。如果您打算渲染一个 React 组件，请使用大写字母开头的名称。
请问有人可以解决这个问题吗？谢谢！
英文:
I am following a 3d portfolio tutorial from Youtube and got caught in this error. Here I am trying to render a mesh but the console is showing a warning that "This element is unrecognized in this browser". The browser is rendering the rest but this part of the code is not getting rendered.
Here is the code block:
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;
And these are the warnings I am getting
- Warning: <hemisphereLight /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
- Warning: The tag <hemisphereLight> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
- Warning: React does not recognize the
groundColorprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasegroundcolorinstead. If you accidentally passed it from a parent component, remove it from the DOM element - Warning: <pointLight /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements
- Warning: The tag <pointLight> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
- Warning: The tag <primitive> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
- Warning: The tag <mesh> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
Can anyone please solve this issue. Thanks!!
答案1
得分: 12
发生了相同的错误，这是我是如何修复它的。
你当前正在使用 export default Computer
将其更新为 export default ComputerCanvas
那应该就可以解决。
英文:
Same error happened for me, this is how I fixed it.
You are currently doing export default Computer
Update that to export default ComputerCanvas
and that should fix it.
答案2
得分: 6
请将以下部分更新为 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 /> 移除，这将修复所有错误。
英文:
You are currently doing export default Computer. Update that to export default ComputerCanvas
then if you have !created CanvasLoader already it gives -- index-bb759d07.esm.js:215 Text is not allowed in the R3F tree! This could be stray whitespace or characters.
so try removing fallback={<CanvasLoader />, this fix all the errors
答案3
得分: 4
-
从
<Suspense fallback={<CanvasLoader />}>中删除fallback={<CanvasLoader />解决了所有问题，包括计算机对象的刷新问题。 -
请确保在
export default Computers;的位置使用export default ComputersCanvas;。
英文:
-
Removing
fallback={<CanvasLoader />from<Suspense fallback={<CanvasLoader />}>fixed all my issues including the refresh problem with the computer object. -
make sure to use
export default ComputersCanvas;in place ofexport default Computers;
答案4
得分: 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;
这是你要求的代码部分的中文翻译，没有其他内容。
英文:
A simple fix was to update the CanvasLoader component as shown below. Most importantly, change the export.
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;
答案5
得分: 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;
英文:
I made some changes in the code like this:
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;
I noticed that particulary this part:
<Suspense fallback={<CanvasLoader />}>
Also gave an error. If you write it without the space after the CanvasLoader, it stops working.
To fix this you will need to adjust the loader like so:
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;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论