JSON 中位置 0 的意外令牌 < - Three.js 和 Vue 应用程序中的 glTFLoader答案

【问题标题】：Unexpected token < in JSON at position 0 - glTFLoader in Three.js and Vue appJSON 中位置 0 的意外令牌 < - Three.js 和 Vue 应用程序中的 glTFLoader
【发布时间】：2021-01-21 19:23:42
【问题描述】：

我想在我的 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-cli-service serve 时，是否无法加载连接到 Vue 在 localhost 上运行的服务器的 glTF？如何让 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>

【问题讨论】：

你检查过请求的实际内容是什么吗？如果您使用网络浏览器访问http://localhost:8080/assets/modeltest.gltf，您会得到文件还是 HTML 页面？
通常在 Vue 中静态文件是从 public 文件夹提供的，而不是从 src 提供。
感谢您的留言。当我转到http://localhost:8080/assets/modeltest.gltf 时，我得到一个 HTML 页面，即 Vue 应用程序。画布渲染但没有 gltf 模型（只是盒子地理）
我已将 .gltf 的副本放在公用文件夹中，并将组件中的路径指定为 ('../assets/modeltest.gltf') 仍然出现相同的错误。
文件放错地方了。请参阅cli.vuejs.org/guide/… 并确保 URL 有效（您可以通过浏览器直接访问 URL 来下载它）。如果文件位于公用文件夹的根目录中，则 URL 为 http://localhost:8080/modeltest.gltf。

标签： json vue.js three.js gltf

【解决方案1】：

将modeltest.gltf 放在公用文件夹而不是任何其他组件目录中，这样可以解决您的问题。

【讨论】：

【解决方案2】：

在我的例子中，GLTF 加载器也需要许可证文件。一旦我的加载器能够访问许可证文件以及 .gltf 文件或相关纹理，错误就消失了

【讨论】：