json - JSON 中位置 0 的意外标记 < - Three.js 和 Vue 应用程序中的 glTFLoader

Question

我想在我的 Vue 应用程序中使用 GLTFLoader 将 .glTF 文件加载到three.js中。但是，当我尝试使用 GLTFLoader 加载 .gltf 文件时，我继续在控制台中收到此错误:Unexpected token < in JSON at position 0 我已经在 Vue.js 组件中实例化了 Three.js 和 GLTFLoader。
经过一些研究，我可以看出这是因为对 glTF Assets 的 HTTP 请求返回了一个 HTML 站点。我检查了网络响应，并且“modeltest.gltf”内容类型是“text/html”。

Content-Type: text/html; charset=UTF-8
Status Code: 200 OK 
Request URL: http://localhost:8080/assets/modeltest.gltf

在另一个线程之后，类似问题的原因是 Web 服务器不提供 glTF 而是 HTML 内容( https://discourse.threejs.org/t/syntaxerror-unexpected-token-in-json-at-position-0/13810/3 )。如果我在本地主机上运行应用程序，服务器是否仍然是问题的原因？
我尝试将我的 3d 模型转换为 .obj 格式，然后运行 ​​OBJLoader。然而，当加载器在访问“modeltest.obj”文件时尝试解析 HTML 时会发生同样的事情。
当我运行 vue-cli-service serve 时，是否无法加载连接到服务器的 glTF Vue 正在本地主机上运行？在终端？如何让 glTFLoader 正确解析我的 glTF 文件，而不是作为 HTML？
我曾尝试将 glTF 文件加载到该站点，并且它正确加载 https://gltf-viewer.donmccurdy.com/
任何建议将不胜感激。感谢您的阅读。
我的文件结构如下:

3D Model Path:
src/assets/modeltest.gltf
Vue Component Path:
src/components/ThreeTest.vue

我的 Vue 组件的代码如下所示:

<template>
    <div id="container"></div>
</template>

<script>
import * as Three from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

export default {
  name: 'ThreeTest',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      model: null,
    }
  },
  methods: {
    init: function() {
      let container = document.getElementById('container');

      this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
      this.camera.position.z = 1;

      this.scene = new Three.Scene();

      let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2);
      let material = new Three.MeshNormalMaterial();

      this.mesh = new Three.Mesh(geometry, material);
      this.scene.add(this.mesh);

      this.renderer = new Three.WebGLRenderer({antialias: true});
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(this.renderer.domElement);

      // Instantiate a loader
      var loader = new GLTFLoader();

      // Load a glTF resource
      loader.load(
        // resource URL
        '../assets/modeltest.gltf',
        // called when the resource is loaded
        function ( gltf ) {     
          console.log(gltf);   
          this.scene.add( gltf.scene);
        },
        // called while loading is progressing
        function ( xhr ) {
          console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
        },
        // called when loading has errors
        function ( error ) {
          console.log(error)
          console.log( 'An error happened ' + error );
          
        }
      );
    },
    animate: function() {
        requestAnimationFrame(this.animate);
        this.mesh.rotation.x += 0.01;
        this.mesh.rotation.y += 0.02;
        this.renderer.render(this.scene, this.camera);
    }
  },
  mounted() {
      this.init();
      this.animate();
  }
}
</script>

<style scoped>
 #container{
   height: 100vh;
 }
</style>

Answer 1

把modeltest.gltf在公共(public)文件夹而不是任何其他组件目录中，这将解决您的问题。