1

I want to load a .glb model into three.js using the GLTFLoader. I succeeded in creating a rotating 3D mesh on a canvas--without errors in the console. However, attempting to replace that with the .glb model returns the following:

    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

The VM229646 address leads to the following:

Syntax Error location

Here is my index.js file:

    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()

I sense that my index.html file is attempting to be read, but I'm not sure. How can I resolve this?

I am using Parcel if that's relevant, and I have the parcel-plugin-asset-copier installed.

2
  • Are you sure that url for the glb file is correct? Is it missing a dot at the beginning of the url? Looks somewhat more like a 404 server response is being fed into the parser.
    – Radio
    Aug 28, 2022 at 3:26
  • 2
    Resolved by tweaking my directory and, most importantly, serving my .glb correctly. | 1. Install this parcel plug-in: github.com/elwin013/parcel-reporter-static-files-copy | 2. Add a ".parcelrc" file and "Static" folder to your project. Configure them as outlined in the directions. | 3. Place .glb file in the "Static" folder. | 4. Build.
    – Hikiki Me
    Aug 28, 2022 at 11:58

1 Answer 1

0

The qmark.glb need to be placed in the public folder and then you can load your glf:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.