Javascript Load Models Three.js GLTFLoader语法错误JSON.parse

我按照discoverthreejs.com上的教程学习如何使用Three.js

我不担心通过three.js创建网格和几何体

问题是当我想加载来自blender或其他的模型时

我使用blender 2.8创建模型并将其导出为.glb文件。我用gtlf查看器测试了文件，一切正常

但是，当我想将带有Three.js的模型导入到我的网站时，我会出现以下错误：

我认为它来自于我的模型，我试图用gltf或glb导出它：同样的错误

我在网上下载了另一个模型：同样的错误

如果有帮助的话，我会使用parcel.js

{
  "name": "cedric_grvl",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "clean": "rm -rf dist",
    "dev": "parcel src/index.html --host 192.168.0.37 --open Firefox"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^9.7.3",
    "parcel-bundler": "^1.12.4",
    "postcss-custom-properties": "^9.0.2",
    "postcss-modules": "^1.4.1",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.23.7",
    "three": "^0.111.0"
  }
}

一切都在我的index.js中测试

以下是我对Three.js的称呼：（这里一切都很好）

下面是Three.js的函数（教程）（这里都很好）

问题是我可能做错了什么

const loader = new GLTFLoader();

const url = "./assets/models/test.glb";

// Here, 'gltf' is the object that the loader returns to us
const onLoad = ( gltf ) => {

  console.log( gltf );

};

loader.load( url, onLoad );

我一直在想路径的问题 我试过：

'/src/assets/models/test.glb'
'assets/models/test.glb'

以下是我的文件夹结构：

---

Thx for your time

在您的代码中按如下方式导入模型

import MODEL from './assets/Horse.glb'

模型将是glb资产的路径，然后使用它进行加载，如下所示：

loader.load( MODEL, function ( glb ) {
    that.scene.add( glb.scene );
  }, undefined, function ( error ) {
    console.error( error );
});

---

你能用浏览器的开发工具验证一下

glb

文件是否真的被加载了吗？它似乎被加载了，我添加了一个截图@mugen87你能在这个线程中分享

glb

吗？我想它不是来自glb文件，因为我用了另一个不是来自我的搅拌机应用程序的，就是它，我必须复制glb文件。包裹插件资产副本的工作@Mugen87 Thx非常感谢您

import MODEL from './assets/Horse.glb'

loader.load( MODEL, function ( glb ) {
    that.scene.add( glb.scene );
  }, undefined, function ( error ) {
    console.error( error );
});