Beginner troubles

Questions
,
1

Hi, I’m trying to swap out the .glb file in this example [Parallax](html: https://munrocket.github.io/parallax-effect/examples/threejs.html) and for some reason every .glb/.gltf file I export from blender results in a black screen, whereas any I download from the threejs demo page work fine. My files work on the GLTF viewer, with textures/materials and everything looks perfect. I’m obviously doing something wrong and I don’t want to waste anyones time so any links to anything that could help would be really appreciated, I’ve read through all I can find and I’m not getting anywhere.

Here’s an example of the file I’m trying to use:

sg2.glb (189.7 KB)

I also have no idea how to have just one 3D object, the sample code has the head repeated with different colours.

Any tips or guidance would help this newbie out a lot, thank you! :slight_smile:

2

The model loads fine in the three.js editor: https://threejs.org/editor/

When the screen is black, you have probably not added any lights to your scene. Try to add e.g. an ambient and directional light.

3

Thank you for replying and not telling me that I’m and idiot!
I have tried that to no avail.
I had a look in the inspector on google chrome (I’m using brackets to run/test this currently) and I’m getting these errors:

TypeError: Cannot read property ‘setAttribute’ of undefined
at threejs.html:89
at GLTFLoader.js:85
at GLTFLoader.js:1464
_onError @ GLTFLoader.js:58

4

You have to share your entire code (e.g. as a GitHub repo) so it’s possible to investigate this issue.

5

I hope I’ve done this correctly:
Example

I’ve literally only changed the name of the .glb and the texture images so far and I’ve already broken it!

6

The problem is that the example code makes assumptions about how the glTF asset is structured. So this line

let geometry = gltf.scene.children[ 0 ].geometry;

extracts a geometry from the assets which is later used to create an InstancedMesh. This code does not work with your asset since gltf.scene.children[ 0 ] is a Camera which has no geometry.

BTW: It seems this example patches shader code in order to implement support InstancedMesh with colors. With the latest release r120, this is not necessary anymore thanks to InstancedMesh.setColorAt(). Check out how this new method is use here:

https://threejs.org/examples/physics_ammo_instancing

7

Thank you so much for your time! Wasn’t expecting to get this much guidance!
If I wanted only one 3D object and not the instances and varied shaders would I just remove that section of code? So there’s just one 3D object that responds to face tracking?

8

Well, I guess. However, I did not study the code of the example in detail. So I can’t tell you if it works when you just add gltf.scene to the scene graph.

11

Hi, I think I’m kinda there, I haven’t given up and wasn’t waiting for someone to do it for me, thanks for the help so far!

Here’s the very rough and rudimentary example: 3D Head-tracking

Just need to figure out how to add reflection and make the material appear more metallic now, maybe some lighting and shadows too :slight_smile: