Uncaught SyntaxError: Unexpected token ‘:’ (at abarth131.gltf?import:2:9)

Question

so i’m trying to make a simple game with three.js My first step here is loading a GLTF file, but gives me this error: Uncaught SyntaxError: Unexpected token ‘:’ (at abarth131.gltf?import:2:9)

What i tried?
check the path
change the GLTF to public
in GLTF viewer the model loads normally

I dont know

here is my code:

let scene, camera, renderer, light

function init(){
  scene = new three.Scene()
  scene.background = new three.Color(0xdddddd)

  camera = new three.PerspectiveCamera(40, window.innerWidth/window.innerHeight,1 ,5000)
  light = new three.AmbientLight(0x404040, 100)
  scene.add(light)

  renderer = new three.WebGLRenderer({antialias:true})
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  let loader = new GLTFLoader()
  loader.load('../public/abarth131/abarth131.gltf', (gltf) => {
    scene.add(gltf.scene)
    renderer.render(scene,camera)
  })
}
init()

Im developing with Vite, in vanilla JS (sorry if my english is weird, i speak spanish)
Any help will be received!

EDIT: the error showed on chrome dev tools

There must be something wrong with the gltf file, can you share it's content? If it's too big, a couple of the first lines will be enough. — Smileek
– Smileek, Commented Feb 5 at 18:47
it worked because i need to: 1. make my gltf file to glb 2. put into the public folder 3. i dont know why i cant make the things what i like — Jesús Fernández
– Jesús Fernández, Commented Feb 5 at 19:19
Please check out this thread on three.js discussions: discourse.threejs.org/t/unexpected-token-at-scene-gltf-import14/… — looks like .glb format is preferred, but also it says that the textures should be at the same folder as the .gltf file. — Smileek
– Smileek, Commented Feb 6 at 8:50

Proteus · Accepted Answer · 2025-02-15 18:33:22Z

0

You should try to set up your path like this: '/abarth131/abarth131.gltf'

And check your vite.config.jsfile.

export default {
  assetsInclude: ['**/*.gltf', '**/*.glb'],
  server: {
    fs: {
      allow: ['..']
    }
  }
}

I hope this will help you.

edited Feb 15 at 18:33

Proteus

7473 silver badges24 bronze badges

answered Feb 14 at 16:51

chain saw

12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Proteus Feb 15 at 11:07

Welcome to Stack Overflow! While your solution might be perfectly working, you should improve it by sharing more information thus making it a little more clear. Why does this work? Are there any sources supporting this solution? You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Uncaught SyntaxError: Unexpected token ‘:’ (at abarth131.gltf?import:2:9)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related