React中<primitive>标签未被浏览器识别问题求助

1. 修正组件导出错误 #

你的代码最后错误导出了Computers组件，但这个组件必须在Canvas上下文内才能正常渲染<primitive>。你应该导出包含Canvas的ComputersCanvas组件：

export default ComputersCanvas // 替换原来的 export default Computers

直接渲染Computers时，<primitive>不在react-three-fiber的Canvas环境中，React会将其识别为未知HTML标签，从而触发警告。

2. 改用@react-three/drei的GLTF组件替代primitive #

可以用drei提供的<GLTF>组件简化GLTF模型加载，避免手动处理primitive：

import { GLTF } from '@react-three/drei'

const Computers = () => {
  return <GLTF src="/lowpoly_earth/scene.gltf" />
}

这个组件会自动处理模型的加载与渲染，比手动使用<primitive>更可靠，也能减少出错概率。

3. 检查依赖版本兼容性 #

确保@react-three/fiber、three和@react-three/drei的版本相互兼容。可以尝试重新安装依赖：

npm uninstall three @react-three/fiber @react-three/drei
npm install three @react-three/fiber @react-three/drei

版本不匹配可能导致底层API无法被正常识别。

4. 确认模型路径正确性 #

检查/lowpoly_earth/scene.gltf的路径是否正确，确保模型文件放在项目的public目录下（如使用Create React App等脚手架），路径错误可能导致模型加载失败，间接引发异常。

内容的提问来源于stack exchange，提问作者jernst146