Adding multiple materials(layers) to a loaded object

Questions
1

Hi again.

At the moment I’m trying to add multiple materials/material-layers to an object.
The following link pretty much shows what I’m aiming for:

https://stackoverflow.com/questions/49702885/is-there-a-built-in-way-to-layer-textures-within-the-standard-pbr-shader/49708915#49708915

or in this fiddle:

http://jsfiddle.net/o6atcaeg/

Unlike in this example I’m trying to to add materials to an object I loaded with the gltf-loader.
(so there is no group like in “BoxBufferGeometry”)
So I was wondering if it’s possible to create an own group for my loaded object? Or is there a better way to add multiple materials to an object?

In my case -> I have a shiny object (base layer) which I want to have a rough-looking sticker for example. (second layer)

Thanks in advance!

2

Well, the same pattern (meaning geometry.addGroup( 0, Infinity, n );) should work with any kind of geometry.

3

Oh really? I thought BoxBufferGeometry was an exception. Well thanks, I’ll give it a try!

4

Okay, now I had the problem which gave me the impression that BoxBufferGeometry was an exception.

If I try the code → myObject.addGroup(0, Infinity, 0);
I get this error → myObject.addGroup is not a function.

To put it more into context:

let loader = new THREE.GLTFLoader();

            loader.load('myObjects/myObject.glb', function (gltf) {

                myObject = gltf.scene;

                myObject.addGroup(0, Infinity, 0);

                myObject.addGroup(0, Infinity, 1);

                let myMaterials = [material1, material2];

                myNewObject = new THREE.Mesh(myObject, materials);

                scene.add(myNewObject);

But the code stops working because of the error mentioned above.

myObject.traverse(function (child) {

                    if (child.isMesh) {

                        child.material = myNewMaterial;

               }

Even though the last code doesnt make much sense (assigning to myNewMaterial) I just wanted to show that myObject ist actually a mesh/geometry. (Because of “if(child.isMesh)”)

Is there a step I am missing? Or do I get something wrong?

5

addGroup() is a method of BufferGeometry, not Object3D, Group or Mesh.

https://threejs.org/docs/index.html#api/en/core/BufferGeometry.addGroup

6

Okay, thats what I kind of though. (thanks for the correction tho)

But what I actually wanted to know:
Is there a way to do something similar to my imported object?
Because I want a similar result for my object (like in the links I shared)

Because I want my object to have something like a group so I can add multiple materials/layers like in the examples.

7

You can try to traverse through gltf.scene and use addGroup() for all geometries you encounter in the hierarchy.

8

But I thought “addGroup” was only for BufferGeometry and not my imported myObject. (I only have one Object in my whole scene)

I think I’m misunderstanding something important here.
Am I able to add myObject to BufferGeometry?

9 
            loader.load('myObjects/myObject.glb', function (gltf) {

                myObject = gltf.scene;

                myObject.addGroup(0, Infinity, 0);

                myObject.addGroup(0, Infinity, 1);

                let myMaterials = [material1, material2];

                myNewObject = new THREE.Mesh(myObject, materials);

                scene.add(myNewObject);

As U mentioned → there is no “addGroup”-method for my object “myObject” since it’s no BufferGeometry.
But which step would you recommend if I want to give my object “myObject” multiple materials?

Now how should I be able to use addGroup() if I’m using an imported object ( and not a BufferGeometry)

Do I have to save/put “myObject” into another mesh or group?

Sorry but I’m still having trouble understanding your advice. :frowning:

10

Your imported object still consists of instances of BufferGeometry. You can log them like so:

gltf.scene.traverse( function( object ) {

    if ( object.geometry ) console.log( object.geometry );

} ):

You can use addGroup() on these instances.

11

okay, thanks. I’ll have a look!

12

My log looks like the following: ( There are like 20 of these B’s)

B {uuid: “9DA7E11F-CAB7-4B78-900D-338F64952845”, name: “”, type: “BufferGeometry”, index: M, attributes: {…}, …}

Am I still able to use these instances even though the “name” is empty? Am I still able to address them?

Or should I name them as I export the object ?

13

Empty names are not important for this issue.

14

Okay, thats good to know!
So these B’s are my BufferGeometry-Instances. Do I still need to parse them to get their information?
Because my code obviously doesn’t know what B is.

15

Okay, I think I got what I wanted.

let loader = new THREE.GLTFLoader();

            loader.load('myObjects/myObject.glb', function (gltf) {

                myObject = gltf.scene;

                let materials = [material1, material2];
          
                myObject.traverse(function (child) {

                    if (child.isMesh && child.geometry) {

                        let geometry = child.geometry;

                        geometry.clearGroups();

                        geometry.addGroup(0, Infinity, 0);

                        geometry.addGroup(0, Infinity, 1);

                        child.material = materials;

                    }

                })

                scene.add(myObject);

            });

        });

    }

I hope there are no major mistakes in this one. But thanks for leading me there!

16

Hi to all, the problem is that with this method after it is impossible to export the object with GLTFExporter

17

Hi
I tested this code
I have 2 material one is color and second is image png .
Second does not apear