GLTFLoader() loads relevant data, but does not display it

my source is listed at nicerapp_v2/na3D.source.js at dc08abe56f247b77e0559da062bcb39cfa86ddbd · nicerapp/nicerapp_v2 · GitHub

and my output is viewable (and debug-able) at 3D backgrounds browser on nicer.app

Please help solve my problem!

Could you specify:

  1. What exactly seems to be the problem? (“it’s not working” and 150 lines of code is not a problem or a question.)
  2. What did you try so far? Did you check other geometries / lights / setup / model viewers? Did you spend time trying to narrow-down the issue?

We’re happy to help and answer hard questions / solve specific issues - but if you’d simply like someone to do all the debugging and work for you, please consider posting in #jobs instead. :upside_down_face:

Please excuse me for being a noob who simply posts his code, and a link to the defective page, hoping that someone would be able to point me to the source of the problem.

I have tried using https://gltf-viewer.donmccurdy.com/ on the same dataset as in the call to
this.loader.load( ‘/nicerapp/3rd-party/3D/models/002/scene.gltf’, function ( gltf ) {
, and that works, but as you can see on my own test page, all i get is a blank black screen.

i’ve only started using threejs since tonight, so i wouldn’t know how to check other geometries (i did play with the z value for the camera distance, increasing it from 2 to 50 → no results there) / lights, i wouldn’t know how to set up, “setup” i don’t even know what you mean by that, “model viewers” could be something like https://gltf-viewer.donmccurdy.com/ right? problem with that is that it loads up a heck of a lot more code. i’d like to keep things as simple as possible. but i suppose i could claw my way through it’s code to see how it does things.

i was hoping for a little actual help here, instead of getting treated like a noob who needs to pay for your services…

hey, you did help :slight_smile:

adding an ambientLight with intensity=100 and a camera.position.z of 500, fixed the problem :slight_smile:
i’ll be uploading the sources shortly…

1 Like

the animation is still botched though, hoping you can help me out a little more…
(now uploading new sources to github and my server)

Yes, we do love gold. :money_with_wings: But on a serious note - it’s not really about the money, what I meant is that it’s just polite to show that you’ve invested a reasonable amount of your own time and tried everything you could find - instead of just going the easy way and asking others to solve the issue.

I’m glad it works :blush: For the future - it’s a good practice to set a scene.background to some lighter color (ex. scene.background = new THRE.Color(0xff00ff);.) When you forget to add a light, or some texture or a material fails to load for any reason - the model will still load correctly, but appear black. And you won’t know about it, since it’s a black model on a black background. :sweat_smile:

As for this - you seem to be rotating only the elements hit by a raycast. Raycasting picks up submeshes within the loaded model - so in the end you rotate only the small parts of your entire camera (maybe this will explain a bit better - it’s a single cat model, but still only parts are highlighted.)

ok… i certainly didn’t mean to be disrespectful, i was just a bit disappointed when a 3D framework that’s as well established as threejs just doesnt work out of the box…

i think i know why my rotation animation is failing… i update the object.rotation.x and .y for t.scene.children, and with this model, that’s causing parts of the model to rotate independently and in an erroneous way compared to other parts of the model.
what would be a good way to fix this??..

You could just rotate the model, since it’s kept saved as this.cube:

// Instead of this
for (var i=0; i<intersects.length; i++) {
  intersects[i].object.rotation.x += 0.02;
  intersects[i].object.rotation.y += 0.02;
}

// Use this
if (intersects[0]) {
  this.cube.rotation.x += 0.02;
  this.cube.rotation.y += 0.02;
}

ok, that’s much better (i’ve updated my demo page and github sources)…

but it’s still not quite there. colors are not quite right, and there’s a bug in the rotation rendering (parts of the camera aren’t visible during the onhover anim)…

i’m also wondering… if i have to set the ambient light to a specific value per model that i load, won’t that cause incompatibilities if i start to load in multiple differing models that i find on sites like sketchfab.com?

and the same for the camera .z value?

threejs just doesnt work out of the box

[…] colors are off […] there’s a bug in the rotation rendering […]

While I can understand the initial frustrations - I’d still suggest to go through the docs (maybe also discoverthree.js.) Three is just a 3D library, not a plug-and-play Unreal Engine - it makes 3D a bit easier, but it still does definitely require some reading to understand stuff like tone mapping, camera clipping, and PBR materials a lot of models use these days - since it’s the developers responsibility to set all that up.

okay, setting the ambient light intensity to 350 nearly fixes the color tone problems, and camera .position.z to 700 fixes that missing rendering during the animation…

still, i now dread downloading and using multiple models at the same time.

but i’ll test it anyway, before i head off to bed (it’s 04:32am over here)…

if you could keep an eye on this thread for just 10 to 15 minutes more, that would be very much appreciated :slight_smile:

ok i’ve updated my sources and live view again ( nicerapp_v2/na3D.source.js at ae79b3e60a27b796274ef2db8eca06c813e2750f · nicerapp/nicerapp_v2 · GitHub and 3D backgrounds browser on nicer.app ), but i now face having to tweak the position .x, and .z, which would give me a distorted view if i were to move the camera to a top-down view… how does threejs wrap itself around such eventualities, which given the market at sites like sketchfab.com, is extremely likely to occur?

also, colors are still off, and textures aint loading for the human figure in my demo…
any idea what could be the cause of this?

i’m off to bed btw, feel free to respond to this when you have time and appetite to answer…

ok, from your cat-model example earlier, i get that setting gltf.scene.scale.setScalar(10) on the smaller model, will fix that particular problem.

now i’m only left with the fact that the textures look very cheap on the 002 gltf (the photo camera model), and are non-existent on the man figure (the 001 gltf in my code)…

i’ll try to google my way through this, and if i find an answer i’ll update this thread, but i’ll also check this thread periodically for any new tips that others might leave here.

many thanks in advance for any help you provided or might provide

ok!! :smiley:
getting it all to work very correctly was basically a cut-n-paste job, using the published code for https://gltf-viewer.donmccurdy.com/

i’ve of course also updated my own code at github (see further up this page for link) and live demo (also see further up this page for link).

feel free to copy it! :slight_smile:

FYI : the demo that this thread is about is now listed at a different URL, namely 3D backgrounds browser on nicer.app

For an index of all of my 3D demos, see the front page at https://nicer.app

Full sources listed at GitHub - nicerapp/nicerapp_v2

FYI : i do not do this to promote my site. i do this so that others have an easy way to get started with threejs.