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

Question

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

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

问题是当我想加载来自搅拌机或其他人的模型时。

我使用 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'

这是我的文件夹结构：

谢谢你的时间

Answer 1

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

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

模型将成为 glb 资产的路径，然后使用它来加载，如下所示：

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

Answer 2

我找到了解决方案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 );
});