三.js GLTFLoader() "Unexpected token"错误

Question

我想使用GLTFLoader将.glb模型加载到three.js中。我成功地在画布上创建了一个旋转的3D网格——控制台中没有错误。然而，试图用.glb模型替换它会返回以下结果：

VM229545 index.975ef6c8.js:29577 

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
at JSON.parse (<anonymous>)
at GLTFLoader.parse (VM229545 index.975ef6c8.js:29637:27)
at Object.onLoad (VM229545 index.975ef6c8.js:29588:23)
at VM229545 index.975ef6c8.js:24157:47

VM229646地址导致以下内容：

语法错误位置

这是我的index.js文件：

import '../CSS/main.css'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
const gltfLoader = new GLTFLoader()
gltfLoader.load('./assets/qmark.glb', (gltf) => {
scene.add(gltf.scene)
})
// Canvas
const canvas = document.querySelector('#upperq')
// Scene
const scene = new THREE.Scene()
// Lights
const pointLight = new THREE.PointLight(0xffffff, 0.1)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
window.addEventListener('resize', () =>
{
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 2
scene.add(camera)
// Controls
// const controls = new OrbitControls(camera, canvas)
// controls.enableDamping = true
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
alpha: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
/**
* Animate
*/
const clock = new THREE.Clock()
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
// Update objects
// sphere.rotation.y = .5 * elapsedTime
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()

我感觉到我的index.html文件正试图被读取，但我不确定。我该如何解决此问题？

如果相关的话，我正在使用Parcel，并且我安装了Parcel插件资产复印机。

Answer 1

qmark.glb需要放在公用文件夹中，然后您可以加载您的glf:

gltfLoader.load('/qmark.glb', (gltf) => {
scene.add(gltf.scene)
})