Unexpected token ':' (at scene.gltf?import:2:14)

Questions
1

Hey i was working on a react project and i wanted to use the three js gltf loader to showcase a gltf file i have, however after adding the gltf file in the gltf loader the error message Unexpected token ‘:’ (at scene.gltf?import:2:14) pops up. ive checked to make sure the gltf file itself is not the issue and it seems to work perfectly fine in other software. below i will provide the react js code.

import { GLTFLoader } from “three/examples/jsm/loaders/GLTFLoader”;
import rolexmodelgltf from “./assets/scene.gltf”;

const glftLoader = new GLTFLoader();
glftLoader.load(rolexmodelgltf, (gltfScene) => {
test.scene.add( gltfScene.scene );
});

2

Is your gltf model working properly in gltf viewer ?

3

yes when i drag the folder which containes the gltf model into a gltf veiwer it works perfectly fine, however would it be possible that the three js gltf loader must also load the textures file that comes with the scene.gltf file?

4

gltfs are (often) not self contained and way too big. use glb.

also react thee fiber, wouldn’t putting three into react like that loose you all integration? it goes against the point of react, to express imperative systems declaratively.

models especially can be handled declaratively, for instance GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components this tool will also create a compressed glb that is self contained.

npx gltfjsx yourmodel.gltf --transform

will create two files,

  • yourmodel-transformed.glb, a compressed model with up to 95% compression ratio
  • Yourmodel.jsx, a declarative react component where the whole scene is yours to control

otherwise, loading a model as a blob couldn’t be simpler gltf simple example - CodeSandbox

also check out React Three Fiber Documentation for some inspiration. the eco system has hundreds of drop in components for realistic rendering.

2 Likes
5

ps, since you’re trying to load a rolex, you might like these two examples

6

Yes if you’re using the gltf format all associated textures need to be in the same directory as the gltf file, the loader will handle these fine, I think you just need to load the model through it’s path rather than trying to import it first…

//remove this
import rolexmodelgltf from “”;

//load directly through the path
const glftLoader = new GLTFLoader();
glftLoader.load("./assets/scene.gltf", (gltfScene) => {
test.scene.add( gltfScene.scene );
});
7

thank you for this answer ive checked out the link and looks promising :slight_smile: