html 加载 three.js 中GLTFloader 报错 ：SyntaxError: Unexpected token ＜ in JSON at position 6

因为使用paracel构建 它加载地址是打包后地址

加载资源应如下所示

源码所示

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader';

import Terrain_Free_001 from "url:./public/Terrain_Free_001.glb"
const loader = new GLTFLoader();
console.log(Terrain_Free_001)
loader.load(Terrain_Free_001,function (glb) {
  // 控制台查看返回结构：包含一个网格模型Mesh的组Group

  console.log(glb.scene);
  
})

/**
 * 自定义图形
 */


var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
//类型数组创建顶点数据
var vertices = new Float32Array([
  0, 0, 0, //顶点1坐标
  50, 0, 0, //顶点2坐标
  0, 100, 0, //顶点3坐标

  50, 0, 10, //顶点6坐标
  0, 0, 10, //顶点4坐标
  0, 0, 100, //顶点5坐标
 

  0,100,0,
  0,0,100,
  0,0,0,
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;


// 点渲染模式
var material = new THREE.PointsMaterial({
    color: 0xff0000,
    size: 10.0 //点对象像素尺寸
  }); //材质对象
  var points = new THREE.Points(geometry, material); //点模型对象


/* // 三角面(网格)渲染模式
var material = new THREE.MeshBasicMaterial({
  color: 0x0000ff, //三角面颜色
  side: THREE.DoubleSide //两面可见
}); //材质对象
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh 添加到场景 */

   /**
     * 创建场景对象Scene
     */
   var scene = new THREE.Scene();
   //scene.add(mesh); //网格模型添加到场景中
   scene.add(points); //点对象添加到场景中
   /**
    * 光源设置
    */

   //点光源
   var point = new THREE.PointLight(0xffffff);
   point.position.set(400, 200, 300); //点光源位置
   scene.add(point); //点光源添加到场景中
   //环境光
   var ambient = new THREE.AmbientLight(0x444444);
   scene.add(ambient);
   // console.log(scene)
   // console.log(scene.children)
   /**
    * 相机设置
    */
   var width = window.innerWidth; //窗口宽度
   var height = window.innerHeight; //窗口高度
   var k = width / height; //窗口宽高比
   var s = 250; //三维场景显示范围控制系数，系数越大，显示的范围越大
   //创建相机对象
   var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
   camera.position.set(200, 300, 200); //设置相机位置
   camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
   /**
    * 创建渲染器对象
    */
   var renderer = new THREE.WebGLRenderer();
   renderer.setSize(width, height);//设置渲染区域尺寸
   renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
   document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
   //执行渲染操作   指定场景、相机作为参数
   // renderer.render(scene, camera);

   /**
    *  自动渲染
   */

   
/*     // 渲染函数
   function render() {
       renderer.render(scene,camera);//执行渲染操作
       mesh.rotateZ(0.01);//每次绕y轴旋转0.01弧度
       requestAnimationFrame(render);//请求再次执行渲染函数render  加入此行可自动刷新
   }
   //间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)，每秒渲染50次
   //etInterval("render()",20);
   render(); */
/**
 * 
 * 鼠标操作
 */


   function render() {
     renderer.render(scene,camera);//执行渲染操作
     requestAnimationFrame(render);//请求再次执行渲染函数render
     }
   render();
   var controls = new OrbitControls(camera,renderer.domElement);//创建控件对象
   //controls.addEventListener('change', render);//监听鼠标、键盘事件


// 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
var axisHelper = new THREE.AxisHelper(250);
scene.add(axisHelper);

//点光源偏移 改变光源亮度

// point.position.set(0, 0, 0);
/**
 * 
 * 模型导入以及加载
 */
var geometryexplore = new THREE.BoxGeometry(100, 100, 100);



   var material = new THREE.MeshLambertMaterial({
     color: 0x00ff00,
     opacity:0.1,
     transparent:true
   }); //材质对象Material
   var meshexplore = new THREE.Mesh(geometryexplore, material); //网格模型对象Mesh
// 控制台查看立方体数据
console.log(geometryexplore);
// 控制台查看geometry.toJSON()结果
console.log(geometryexplore.toJSON());
// JSON对象转化为字符串
console.log(JSON.stringify(geometryexplore.toJSON()));
// JSON.stringify()方法内部会自动调用参数的toJSON()方法
console.log(JSON.stringify(geometryexplore));

scene.add(meshexplore);


// 打印材质
console.log(material);
console.log(material.toJSON());
console.log(JSON.stringify(material));


// 打印场景
console.log(scene);
console.log(scene.toJSON());
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader';

import Terrain_Free_001 from "url:./public/Terrain_Free_001.glb"
const loader = new GLTFLoader();
console.log(Terrain_Free_001)
loader.load(Terrain_Free_001,function (glb) {
  // 控制台查看返回结构：包含一个网格模型Mesh的组Group

  console.log(glb.scene);
  
})

/**
 * 自定义图形
 */


var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
//类型数组创建顶点数据
var vertices = new Float32Array([
  0, 0, 0, //顶点1坐标
  50, 0, 0, //顶点2坐标
  0, 100, 0, //顶点3坐标

  50, 0, 10, //顶点6坐标
  0, 0, 10, //顶点4坐标
  0, 0, 100, //顶点5坐标
 

  0,100,0,
  0,0,100,
  0,0,0,
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;


// 点渲染模式
var material = new THREE.PointsMaterial({
    color: 0xff0000,
    size: 10.0 //点对象像素尺寸
  }); //材质对象
  var points = new THREE.Points(geometry, material); //点模型对象


/* // 三角面(网格)渲染模式
var material = new THREE.MeshBasicMaterial({
  color: 0x0000ff, //三角面颜色
  side: THREE.DoubleSide //两面可见
}); //材质对象
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh 添加到场景 */

   /**
     * 创建场景对象Scene
     */
   var scene = new THREE.Scene();
   //scene.add(mesh); //网格模型添加到场景中
   scene.add(points); //点对象添加到场景中
   /**
    * 光源设置
    */

   //点光源
   var point = new THREE.PointLight(0xffffff);
   point.position.set(400, 200, 300); //点光源位置
   scene.add(point); //点光源添加到场景中
   //环境光
   var ambient = new THREE.AmbientLight(0x444444);
   scene.add(ambient);
   // console.log(scene)
   // console.log(scene.children)
   /**
    * 相机设置
    */
   var width = window.innerWidth; //窗口宽度
   var height = window.innerHeight; //窗口高度
   var k = width / height; //窗口宽高比
   var s = 250; //三维场景显示范围控制系数，系数越大，显示的范围越大
   //创建相机对象
   var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
   camera.position.set(200, 300, 200); //设置相机位置
   camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
   /**
    * 创建渲染器对象
    */
   var renderer = new THREE.WebGLRenderer();
   renderer.setSize(width, height);//设置渲染区域尺寸
   renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
   document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
   //执行渲染操作   指定场景、相机作为参数
   // renderer.render(scene, camera);

   /**
    *  自动渲染
   */

   
/*     // 渲染函数
   function render() {
       renderer.render(scene,camera);//执行渲染操作
       mesh.rotateZ(0.01);//每次绕y轴旋转0.01弧度
       requestAnimationFrame(render);//请求再次执行渲染函数render  加入此行可自动刷新
   }
   //间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)，每秒渲染50次
   //etInterval("render()",20);
   render(); */
/**
 * 
 * 鼠标操作
 */


   function render() {
     renderer.render(scene,camera);//执行渲染操作
     requestAnimationFrame(render);//请求再次执行渲染函数render
     }
   render();
   var controls = new OrbitControls(camera,renderer.domElement);//创建控件对象
   //controls.addEventListener('change', render);//监听鼠标、键盘事件


// 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
var axisHelper = new THREE.AxisHelper(250);
scene.add(axisHelper);

//点光源偏移 改变光源亮度

// point.position.set(0, 0, 0);
/**
 * 
 * 模型导入以及加载
 */
var geometryexplore = new THREE.BoxGeometry(100, 100, 100);



   var material = new THREE.MeshLambertMaterial({
     color: 0x00ff00,
     opacity:0.1,
     transparent:true
   }); //材质对象Material
   var meshexplore = new THREE.Mesh(geometryexplore, material); //网格模型对象Mesh
// 控制台查看立方体数据
console.log(geometryexplore);
// 控制台查看geometry.toJSON()结果
console.log(geometryexplore.toJSON());
// JSON对象转化为字符串
console.log(JSON.stringify(geometryexplore.toJSON()));
// JSON.stringify()方法内部会自动调用参数的toJSON()方法
console.log(JSON.stringify(geometryexplore));

scene.add(meshexplore);


// 打印材质
console.log(material);
console.log(material.toJSON());
console.log(JSON.stringify(material));


// 打印场景
console.log(scene);
console.log(scene.toJSON());