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

Question

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

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

问题是当我想加载来自 blender 或其他工具的模型时。

我使用 blender 2.8 创建模型并将其导出为 .glb 文件。我使用 gtlf 查看器测试该文件，一切正常。

但是当我想将带有 Three.js 的模型导入我的网站时，我收到了这个错误:

我以为它来 self 的模型，我尝试用 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 Assets 的路径，然后使用它像这样加载:

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