Threejs Gltf meshes rendering position issue

[pallab_kole]

I am facing problem with some of mesh not rendering on it’s proper position. I think all are marging and getting same position. But with the same attributes all are rendering in exact position.

I have uploaded my codebase to a Sandbox - CodeSandbox

Only my problem with the mesh position. I want the rendering with mesh approch not with primitive approch. Please help me out.

[Omar_Shehata]

Not sure I fully understand, are you trying to set each mesh here at a different position? if so, you can specify the position attribute on the mesh element to do so. For example, this is what it currently looks by default:

And here I give each mesh a different Y position based on its index:

If the current positions are incorrect, what is the correct or expected position for each mesh?

[pallab_kole]

If I am using primitive it’s rendering in proper position what I need by using mesh. I dont want to use mesh because faceing problem to customize material dynamically.

[Omar_Shehata]

Ok, I see what you mean.

Your problem is that instead of adding the top level scene object, you are adding all of its children manually, which flattens the hierarchy defined in the source glTF file, so all the transformations (position but also orientation/scale etc) will get reset.

You can see this hierarchy in Blender. Here I’m selecting one of the diamond pieces, and you can see its parent node has an x/y offset on it.

In order to add this to a ThreeJS scene you must add the top level scene object, like in this code example three.js docs

I think the equivalent of this in react-three-fiber is:

<primitive object={scene} />

So then you want to change the material of each mesh? If so, you can it like this:

import * as THREE from "three"; // import at the top of the file

// the inside of `MyModel`:

  const overrideMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
  scene.traverse((node) => {
    if (node.type == "Mesh") {
      node.material = overrideMaterial;
    }
  });

Here we iterate over all nodes inside of scene, find which one is of type mesh, and then we change its material.

[Omar_Shehata]

Here is the full example:

App.js (1.3 KB)

[pallab_kole]

Actually I need to make it more dynamic like Outline/Edge selection for same type of mesh. It’s being very complicate to me with the primitive. I am looking for alternative way. I want to build something like the 3D showcase.

[drcmda]

you are mapping through the meshes without picking up their positions. if you want to take control of the scene this is what gltfjsx is for. now you can give anything you want custom properties or materials without having to traverse and mutate the scene.

as for pixotronics, you find most of the effects in drei and the fiber eco system: soft shadows, refraction, bloom, to name a few but there are countless more.

Diamond ring - CodeSandbox

[pallab_kole]

This become very helpful to me. Thank you very much. Can you please help me, how to use gltfjsx from react?