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

使用Three.js和Vue构建3D应用程序时，glTFLoader是一个非常有用的工具。glTFLoader允许我们加载和渲染glTF文件，这是一种用于表示3D模型和场景的开放标准格式。然而，有时在使用glTFLoader时会遇到一些问题，特别是当JSON文件中出现意外标记时。

javascript
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
export default {
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(this.renderer.domElement);
      const loader = new GLTFLoader();
      loader.load('model.gltf', (gltf) => {
        this.scene.add(gltf.scene);
        this.animate();
      }, (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
      }, (error) => {
        console.error('An error happened', error);
      });
      this.camera.position.z = 5;
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.renderer.render(this.scene, this.camera);
    }
  }
};

javascript
loader.load('model.gltf', (gltf) => {
  // 预处理JSON文件，替换意外标记
  gltf = JSON.parse(JSON.stringify(gltf).replace(/  this.scene.add(gltf.scene);
  this.animate();
}, (xhr) => {
  console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}, (error) => {
  console.error('An error happened', error);
});

javascript
loader.load('model.gltf', (gltf) => {
  // 预处理JSON文件，替换所有的"<"字符
  gltf = JSON.parse(JSON.stringify(gltf).replace(/  this.scene.add(gltf.scene);
  this.animate();
}, (xhr) => {
  console.log((xhr.loaded / xhr.total * 100) + '% loaded');
}, (error) => {
  console.error('An error happened', error);
});