GHAAAA! Why does this produce an error?

Questions
1

This is my code for my animated gltf… however I cannot access the position properties outside of this code, causing me to be able to update my gltfs position when a key is pressed.
CODE:

gltfLoader.load(‘Models/DroidPlayer/scene.gltf’ , function (gltf) {

const job = gltf.scene;

mixer2 = new THREE.AnimationMixer(job);
mixer2.clipAction(gltf.animations[0]).play();


mixer2.update( delta );

console.log("Cat Position",cat.position);


console.log(job);
console.log("Scale",job.scale);
console.log("Rotation",job.rotation);
console.log("Animations",job.animations);

var johnSchlitt1 = job.position.x;
var johnSchlitt2 = job.position.y;
var johnSchlitt3 = job.position.z;

console.log("Model Position",johnSchlitt1,johnSchlitt2, johnSchlitt3);
scene.add( job );

return johnSchlitt1, johnSchlitt2, johnSchlitt3;

})
var johnSchlitt1, johnSchlitt2, johnSchlitt3 = gltf();

console.log(johnSchlitt3);

2

Your const “job” is scoped within the gltf loader function, you’ll need to scope it outside of this loader function, var job globally and then assign to job in the loader, this will give you access in other functions of the code…

3

What do you intend to do with something like this:

function fn()
{
    return 1, 2, 3;
}
var a, b, c = fn();

Maybe you mean this:

function fn()
{
    return [1, 2, 3];
}
var [a, b, c] = fn();

In any case, when loading GLTF files, it is better to store the model in an outside variable, so that it is available afterwards.

4

Ok? can you give me an example…I have worked on this issue for 6 hours+, with no solution.

5

This example loads a GLTF model, stores it in two objects and modifies both of them from within the main animation loop.

https://codepen.io/boytchev/pen/KKrdqGX

1 Like
6

I’m tempted to mark that as a solution, however I’m still wondering…can I access the model.position property and set it equal to my players position….
My player is walking around fine, however I want a model as my player

7

that’s a javascript semantic, a numbered list returns the last item.

const a = 1, 2, 3; //a === 3
return 1, 2, 3; // 3

this also seems wrong to me

gltfLoader.load(‘Models/DroidPlayer/scene.gltf’ , function (gltf) {

overall this is all 90s era javascript. you do not use callbacks like that because it will create a pattern we used to call “callback hell”. threejs is asynchroneous in practically everything it does and javascript has means to deal with that: promises, async/await. using threejs without these, doing stuff in callbacks and hoping it’s available elsewhere, you couldn’t possibly making it harder on yourself.

using a gltf on the web is also problematic. these are 100 times larger than a glb.

8

Try it !!!

1 Like
9

Lol…I didn’t exist in the 90’s… I’m only 15, and I have been coding 1 year…That’s why I use forums… Thanks though…do you have better solution? I have done it this way forever, so IDK?

10

Yes…it works, thanks!

11

you picked up old js patterns. maybe start with this Learn ES2015 · Babel it’s going to teach you 2015 js. let/const, classes, arrow functions, destructuring, modules, promises. but you’d still need async/await - imo there is no point in trying threejs without these, you will start to think this library is a hellscape but really it’s your programming patterns.

ps

async function app() {
  const [font, hdri, gltf] = await Promise.all([
    new Promise((res, rej) => fontLoader.load("/font.json", res, rej)),
    new Promise((res, rej) => rgbeLoader.load("/warehouse.hdr", res, rej)),
    new Promise((res, rej) => gltfLoader.load("/model.glb", res, rej)),
  ])
  scene.add(gltf.scene)
  scene.background = hdri
  const font = new TextGeometry('hello', { font })
  ...
12

Alright…thank you for the suggestions. :grinning: :grinning:

13

Just to second what @drcmda says:

Using the old style is not bad, it works fine for simple situations. However, when you load many things (models, textures, fonts, whatever) and some of them rely on others to be already loaded, using such callback pattern becomes exponential nightmare.

14

Ok thanks for the clarification…
My model has animations that come with it… I know how to access those animations and implement them, but where do I put them in the code you gave me? I would assume I could put them in the function where we load the model in?

I went ahead and tried it and it doesn’t work…I’ll fix… Thanks for the help everyone