Loading .js and/or .gltf model

I have tried multiple code samples, multiple guides, yet it still refuses to work. After loading model screen turns to black. Without it it works flawlessly.

Sample code:

var loader = new THREE.GLTFLoader();
loader.load( 'resources/x-wing.gltf', function ( gltf ) {
    gltf.position.x =3;
    gltf.position.y = 0;
    gltf.position.z = -9;
    scene.add( gltf.scene );
});

GLTFLoader is included. I have also tried OBJLoader.js, and LegacyJSONLoader.js, in multiple versions, but nothing works. Also tried multiple models, to be sure its not problem with file.

Iā€™m trying to do that for 8 hours straight now and it starts to be tiring.

You canā€™t load .json files with GLTFLoader. May I ask where have you seen this pattern?

/cc

Ok i have copied wrong sample, but it doesnā€™t work with .gltf either.
And you have found my question on stackoverflow, but so far no one was able to solve the problem. Thats why iā€™m asking here.

Can you please share your glTF file?

Donā€™t worry, we always link to duplicates at stackoverflow so itā€™s easier to follow the whole discussion. Many users like myself are active on both sites.

As i said i tried multiple files, but here is one from clara.io https://clara.io/view/a2d2eb63-c0ac-4ad0-9598-b4938e19f79a

Browser console shows error Object doesn't support this action
In line: var loader = new THREE.GLTFLoader();

Also multiple errors in imported libraries but i kinda ignore it, since i doubt that official Three.js libraries are full of errors. And after removal of loader lines it works fine even with imported libraries.

Um, itā€™s not possible to export to glTF from clara.io. So how have you created the glTF asset?

Any chances to share your entire code as an editable live example? Or maybe by sharing a GitHub repository?

Changing extension, in the end its just bunch of code. Unless iā€™m just incredibly stupid.
I would honestly prefer opening .js file but people say that GLTFLoader.js is the best thing that solves all of your life problems, so iā€™m focusing on that.

Full code - https://pastebin.com/8vxGm7E2 Whole code is a sample that iā€™m editing to add new objects to the scene. Horse variables - i tried to load horse model but this also failed.

Well, Iā€™m afraid that does not workā€¦Changing the extension of an image file from jpeg to png does also not work in the same way. If you canā€™t download glTF directly, I suggest you download Collada, FBX or OBJ and then convert to glTF with the converters mentioned in this guide.

Iā€™ve updated your code so it loads a glTF asset from the official repository. I removed a few bits to make it easier to see the minimal code which is necessary to display the glTF and your mesh definitions.

I have already converted something while waiting for response (since your previous post already suggested that its not that simple). Let me check that upgraded code out.
Edit
Exact same issue.
Browser console shows error Object doesn't support this action
In line: var loader = new THREE.GLTFLoader();
Itā€™s imported that way <script src="three.js-master/examples/jsm/loaders/GLTFLoader.js"></script>

This is what i see on my PC.
https://jsfiddle.net/bg13w7v2/3/

<script src="https://cdn.jsdelivr.net/npm/three@0.115/examples/jsm/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115/examples/jsm/loaders/GLTFLoader.js"></script>

You canā€™t do this since files in the jsm directory are ES6 modules. Try it with the files in the js directory.

Updated fiddle: https://jsfiddle.net/5v81x0nd/

BTW: It seems your code refers to a very old version of three.js. The API has changed in various areas so the code is ā€œnot yet up-to-dateā€.

I wouldnā€™t be surprised. I will be blunt - itā€™s for Computer Graphics laboratory in my university. So they probably use the same example for years. I usually manage to do this, but this time this file loading has defeated me.

The problem is we usually support only the latest version of three.js. Hence itā€™s a bit problematic for somebody like you who is ā€œforcedā€ to work with legacy code. Hope you get along with it :wink:

Ok, itā€™s actually working, thats very good news. But there is another issue. As you can see i have these pivots that help me rotate everything. Now i need to add newly loaded objects to these pivots. How am i supposed to do that, if i just load this, without using variable, so i canā€™t use it again.

Sorry, I really donā€™t understand the purpose of updateForFrame(). The implementations looks wrong since it adds objects to the scene graph per frame. If you run this application for a certain amount of time while animating, the FPS drops more and more until the browser crashes. I guess the pivot points should be added once and then just updated. Maybe like so:

https://jsfiddle.net/tox07ghw/

You can now access the variables pivot1-pivot5 from your entire code since they are in global space.

Yeah, its not amazing solution, but its more of an example than professional creation. I just want downloaded model as a variable. This implementation works, but i canā€™t do anything to it after loader.load() ends.
Edit
Okay, you can add it to pivot inside the function. It works flawlessly now.

Thank you Mugen, i appreciate the help. It would be hard without you.

1 Like