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

Question

我想在我的 Vue 应用程序中使用 GLTFLoader 将 .glTF 文件加载到 three.js。但是，当我尝试使用 GLTFLoader:

加载 .gltf 文件时，我继续在控制台中收到此错误

Unexpected token < in JSON at position 0

我已经在 Vue.js 组件中实例化了 Three.js 和 GLTFLoader。

经过一番研究，我发现这是因为 glTF 资产 returns 一个 HTML 站点的 HTTP 请求。我检查了网络响应，'modeltest.gltf' 内容类型是 'text/html'。

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

在另一个线程之后，出现类似问题的原因是网络服务器不提供 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 在本地主机上运行ning？如何让 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 文件夹而不是任何其他组件目录中，这样可以解决您的问题。

Answer 2

就我而言，GLTF Loader 还需要许可证文件。一旦我的加载程序能够访问许可证文件以及 .gltf 文件或相关纹理，错误就消失了

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

Unexpected token < in JSON at position 0 - glTFLoader in Three.js and Vue app

json

three.js

vue.js

gltf