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 资源的 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 在本地主机上运行的服务器的 glTF 是否失败vue-cli-service serve？如何让 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公共文件夹而不是任何其他组件目录中，这将解决您的问题。