three.js导入GLTF错误(Unexpected token '<'， "<

Question

尝试在three.js中导入我的第一个.gltf模型，当出现黑屏和此错误

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
at JSON.parse (<anonymous>)
at GLTFLoader.parse (GLTFLoader.js:315:21)
at Object.onLoad (GLTFLoader.js:205:11)
at three.module.js:39951:38

我的进口

import * as THREE from 'three';
import { PerspectiveCamera } from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'

let loader = new GLTFLoader();
loader.load( './js/assets/brain.gltf', function ( gltf )
{
brain = gltf.scene;
brain.scale.set(2, 2, 2);
brain.position.y = 4;
scene.add(brain);
} );  

HTML

<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module" src="./js/index.js" defer></script>
</body>

我的路径通往资产的道路似乎是正确的，对吧?

我尝试了不同的gltf，尝试了GLB文件，并尝试更改我的路径，但收到相同的错误

Answer 1

我也遇到了同样的问题意外标记'<'， " 通过在react的公共文件夹中添加.glb文件夹来修复我的问题我使用了

npx GLTFjsx <name.glb>

创建一个react组件

通过使用来自@react-three/drei的useGLTF钩子加载模型

希望这能解决问题谢谢你