Load Models Three.js GLTFLoader Syntax error JSON.parse

Hello,

I also asked this question on stackoverflow.

I learn how to use Three.js by following the tutorial on discoverthreejs.com.

I have no worries about creating meshes and geometry via three.js

The problem is when I want to load models coming from blender or others.

I use blender 2.8 to create my model and export it as a .glb file. I test the file with a gtlf viewer and everything works as expected.

enter image description here

But as soon as I want to import my model with Three.js to my website, I get this error:

enter image description here

enter image description here

I thought it came from my model, I tried to export it in gltf or glb: same error.

I downloaded another model available on the web: same error.

I use parcel.js if it helps.

{
  "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"
  }
}


Everything is test in my index.js.

Here is how I call Three.js: (all is good here)

*index.js*

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

Here are the function for Three.js (tutorial)(all good here)

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


Problem is here maybe I do something wrong.


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


I’ve been thinking about a problem with the path
I tried :

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

Here is my folder structure:

enter image description here

Thx for your time

/cc

I didn’t know what the best option was

It’s okay to post at both places. However, linking is nice since you prevent that two or more devs do redundant help.

test.glb needs to be test.gltf, you can export from blender, select “glTF Embedded” in the “format” dropdown to the right

If this helps anyone, make sure your glb files are in the public folder in a react project.

1 Like

In my case, I was trying to load .gltf files and this solved the problem, thanks!