Glb position error

Questions
1

So i found an old project that uses json and i thought to learn and teach myself i thought i would try and load a new model in glb format instead but i am getting these two errors:

Uncaught SyntaxError: Unexpected token g in JSON at position 0
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.f.onreadystatechange (three.min-game.js:169)
f.onreadystatechange @ three.min-game.js:169

Uncaught TypeError: Cannot read properties of undefined (reading 'position')
    at HTMLDocument.onDocumentMouseDown

any idea’s? here’s a pen:

2

Looks like you’re creating a GLTFLoader but still loading the GLB with JSONLoader here:

var loader = new THREE.JSONLoader();
var loader2 = new GLTFLoader();
loader.load( "https://jokertattoo.co.uk/spider.js", bugLoaded );	
loader.load( 'https://jokertattoo.co.uk/gun.glb', ...

Also note that three.js r52 is quite old (older than the glTF 2.0 format) and mixing newer loaders with older versions of the three.js library will likely cause some issues.

1 Like
3

Ah I forgot to add the 2 lol
is works now kind of i’m getting this error now tho:
projScreenMat is not defined

im also having trouble getting the glb in view is there anything i can do to help me position if so i can see it on the scene/camera ? i’ve played with a few values i cant seem to get it in view though

4

Not sure I can help on the error, but possibly related to the older three.js version? It’s pretty important that the versions match.

I usually do something like this to get the size of the model and center it, or using OrbitControls can help too.

1 Like
5

So i tried this:

const box = new Box3().setFromObject(hammer);
    const size = box.getSize(new Vector3()).length();
    const center = box.getCenter(new Vector3());	
				
                hammer.position.x += (hammer.position.x - center.x);
    hammer.position.y += (hammer.position.y - center.y);
    hammer.position.z += (hammer.position.z - center.z);
     scene.add(hammer);
console.log(hammer.position);

i’ve used it before as well so i know for sure it works to center models but for some reason its not putting this glb into view:

I have even tested the model in your gltf-viewer https://gltf-viewer.donmccurdy.com
and it works fine in there, im stumped

6

working but without the gun.glb showing:

7

An error is visible in the console coming from the GLTFLoader onLoad callback:

Screen Shot 2021-09-22 at 8.10.14 PM

There are several issues in this section of the code, seems like too much is inside that traverse() loop.

  loader2.load( 'https://jokertattoo.co.uk/gun.glb',  function ( gltfgame ) {
hammer = gltfgame.scene;
        gltfgame.scene.traverse( function ( child ) {

            if ( child.isMesh ) {
                child.frustumCulled = false;
               
                
				hammer.position.y = 120;
				scene.add(hammer);

				
				var h = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
8

I’ve changed it to nice and simple now and I’ve changed the model to one i know that works just for testing but still nothing shows up:

  loader2.load( 'https://jokertattoo.co.uk/minimal.glb',  function ( gltfgame ) {
hammer = gltfgame.scene;
        gltfgame.scene.traverse( function ( child ) {

            if ( child.isMesh ) {
                child.frustumCulled = false;
               
                
    }
			
				hammer.position.y = 50;
          hammer.position.z = -120;
          hammer.position.x = 0;
				scene.add(hammer);

		

        } );
  });