加载 Three.js GLTFLoader 模型时遇到 JSON.parse 语法错误

Question

我通过遵循discoverthreejs.com上的教程学习了如何使用Three.js。

我不担心通过three.js创建网格和几何体。

问题出现在我想要加载来自blender或其他软件的模型时。

我使用blender 2.8创建我的模型，并将其导出为.glb文件。我使用一个gtlf查看器测试该文件，一切都按预期进行。

但是当我想使用Three.js将我的模型导入到网站时，我遇到了这个错误：

我以为是模型的问题，我试图将其导出为gltf或glb格式：但仍然出现同样的错误。

我下载了网上另一个可用的模型：但仍然出现同样的错误。

如果有帮助的话，我使用parcel.js。

{
  "name": "cedric_grvl",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "clean": "rm -rf dist",
    "dev": "parcel src/index.html --host 192.168.0.37 --open Firefox"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^9.7.3",
    "parcel-bundler": "^1.12.4",
    "postcss-custom-properties": "^9.0.2",
    "postcss-modules": "^1.4.1",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.23.7",
    "three": "^0.111.0"
  }
}

我在我的index.js中测试所有内容。

这是我调用Three.js的方式：（一切都很好）

*index.js*

import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

以下是Three.js的函数（教程）（一切良好）：

*index.js*

// these need to be accessed inside more than one function so we'll declare them first
let container;
let camera;
let controls;
let renderer;
let scene;
let mesh;

function init() {

  container = document.querySelector( `[data-js="canvas"]` );

  scene = new THREE.Scene();
  scene.background = new THREE.Color( 0xFFFFFF );

  createCamera();
  createControls();
  createLights();
  createMeshes();
  createRenderer();

  // start the animation loop
  renderer.setAnimationLoop( () => {

    update();
    render();

  } );

}

function createCamera() {

  camera = new THREE.PerspectiveCamera(
    35, // FOV
    container.clientWidth / container.clientHeight, // aspect
    0.1, // near clipping plane
    100, // far clipping plane
  );

  camera.position.set( -4, 4, 10 );

}

function createControls() {

  controls = new OrbitControls( camera, container );

}

function createLights() {

  const ambientLight = new THREE.HemisphereLight(
    0xddeeff, // sky color
    0x202020, // ground color
    5, // intensity
  );

  const mainLight = new THREE.DirectionalLight( 0xffffff, 5 );
  mainLight.position.set( 10, 10, 10 );

  scene.add( ambientLight, mainLight );

}



function createMeshes() {

  const geometry = new THREE.BoxBufferGeometry( 2, 2, 2 );

  const material = new THREE.MeshStandardMaterial( { color: 0x800080 } );

  mesh = new THREE.Mesh( geometry, material );

  scene.add( mesh );

}

function createRenderer() {

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( container.clientWidth, container.clientHeight );

  renderer.setPixelRatio( window.devicePixelRatio );

  renderer.gammaFactor = 2.2;
  renderer.gammaOutput = true;

  renderer.physicallyCorrectLights = true;

  container.appendChild( renderer.domElement );

}

// perform any updates to the scene, called once per frame
// avoid heavy computation here
function update() {

  // Don't delete this function!

}

// render, or 'draw a still image', of the scene
function render() {

  renderer.render( scene, camera );

}

// a function that will be called every time the window gets resized.
// It can get called a lot, so don't put any heavy computation in here!
function onWindowResize() {

  // set the aspect ratio to match the new browser window aspect ratio
  camera.aspect = container.clientWidth / container.clientHeight;

  // update the camera's frustum
  camera.updateProjectionMatrix();

  // update the size of the renderer AND the canvas
  renderer.setSize( container.clientWidth, container.clientHeight );

}

window.addEventListener( 'resize', onWindowResize );

// call the init function to set everything up
init();

问题可能出在这里，我做错了什么。

const loader = new GLTFLoader();

const url = "./assets/models/test.glb";

// Here, 'gltf' is the object that the loader returns to us
const onLoad = ( gltf ) => {

  console.log( gltf );

};

loader.load( url, onLoad );

我一直在思考路径问题。 我尝试了：

'/src/assets/models/test.glb'
'assets/models/test.glb'

这是我的文件夹结构：

感谢您的时间

- user7637140

---

请在这个帖子中分享“glb”文件，好吗？ - Mugen87

我认为这不是来自glb文件，因为我尝试了另一个不来自我的blender应用程序的文件。 - user7637140

我尝试以gltf格式导出文件。它做了同样的事情。 - user7637140

你能把你的代码/项目分享到Github仓库吗？ - Mugen87

就是这样了，我需要复制glb文件。parcel-plugin-asset-copy可以完成任务@Mugen87，非常感谢您。 - user7637140

Answer 1

我找到了一个解决方案discourse.threejs.org

const parcelPath = new URL('./public/models/hands.glb', import.meta.url);
         
loader.load( parcelPath.href  , function ( glb ) {
        that.scene.add( glb.scene );
});

- Luhn

Answer 2

嘿，把路径写成这样：

let gltf = new GLTFLoader();
gltf.load(
    'PATH....',(model_scene)=>{
      scene.add(model_scene.scene) 
   }
)

- mr samiasolias

Answer 3

在你的代码中像这样导入模型。

import MODEL from './assets/Horse.glb'

模型将是到 glb 资源的路径，然后可以像这样加载：

loader.load( MODEL, function ( glb ) {
    that.scene.add( glb.scene );
  }, undefined, function ( error ) {
    console.error( error );
});

- Anthony Sherritt

---

我得到了以下信息：@parcel/core：没有找到_Assets/Horse.glb_的转换器。 - Luhn