Complete noob banging his head

Questions
1

For a new startup i created in FreeCAD an object which i would like to show on the webpage using three.js. So first i converted the stl to a glb and gltf and started my journey in finding how to work with three.js to render it. Using the https://blackthread.io/gltf-converter/ to convert the STL and a few of his samples to get started i updated my webserver MIME types etc and got the sample code to work.

Now when i replace the sample gbl file with my converted file it doesn’t render. Though when i upload the stl into the webpage it shows in the preview the object very nicely including lighting etc.

Worked several days on this topic and i’m about to give up as a lot of the information is so overwhelming that i don’t know where to start anymore or what i’m doing wrong.

Can someone help me getting started? i can share the stl, glb, gltf, js and html files if that helps in finding what i’m doing wrong.

Much appreciated in advance.

Regards,

Martin Meuwese

2

Then please share the STL and GLB file in this thread. In this way, the community can verify if the assets are okay.

3

MoonitorTopCover.stl (200.3 KB)

topcover.glb (313.3 KB) topcover.gltf (385.9 KB)

4

Your .glb and .gltf files both load fine here:

https://gltf-viewer.donmccurdy.com/

Can you share the code you are using to load them?

1 Like
5

They are made available gltf.html (1.3 KB)

what i did is pick the bird example and changed only 1 of the birds out for my glb. Though of starting simple by adjusting an existing template.

app.js (3.4 KB)

7

It seems you camera is positioned too close to the glTF asset. Try to move it a bit further away.

8

http://www.moonilogger.com/gltf.html

I changed the Camera position from 1->100 and above which makes the parrots be further away though nothing renders of the TopCover in the view.

and the far view from 100 -> 2000 but nothing.

camera = new THREE.PerspectiveCamera( 45, container.clientWidth / container.clientHeight, 1, 100 );

this is what you suggested right?

changed the position set as wel: camera.position.set( -1.5, 1.5, 6.5 );

with no success. It almost looks like the object just doesn’t load?

9

The object does load, you can see this in the Network tab of your browser.

Sorry, according to your live example you have not updated your code. In app.js, you still have these lines of code:

camera = new THREE.PerspectiveCamera( 95, container.clientWidth / container.clientHeight, 1, 100 );
camera.position.set( -1.5, 1.5, 6.5 );

I have asked you to update to something like:

camera = new THREE.PerspectiveCamera( 95, container.clientWidth / container.clientHeight, 1, 1000 );
camera.position.set( -1.5, 1.5, 250 );
10

FOUND IT - it was the animation loader that was the cause of the issue. :slight_smile: My god how stupidly simple to be overlooked.