Select to view content in your preferred language

How to use original colors for GLTF geometry

385
2
Jump to solution
09-25-2023 08:33 AM
BenjaminLecuona
New Contributor II

Hello community,

I would like to load a GLTF on a map using its orignal symbology.

Following this documentation (https://developers.arcgis.com/javascript/latest/visualization/3d-visualization/visualizing-points-3d...), I am able to convert a GLTF into a single geometry and add it to a map.

But the symology of the loaded geometry is not the same as the original.

Original (expected)
Loaded

BenjaminLecuona_0-1695655238119.png

BenjaminLecuona_1-1695655277098.png

 

What I do is to add the geometry without specifying any symbology. Maybe it is incorrect?

 

 

 

Mesh.createFromGLTF(location, "https://developers.arcgis.com/javascript/latest//sample-code/geometry-mesh-elevation/live/pine_tree.glb")
.then(function (geometry) {
    geometry.scale(1, { origin: location });
    geometry.rotate(-90, 0, 0);
    const graphic = new Graphic({geometry});
    view.graphics.add(graphic);
})
.catch(console.error);

 

 

 

As you can see in my sample code (https://codepen.io/blecuona/pen/ZEVxXxN), colors are automatically modified.

I am doing something wrong? Is there any solution to my problem?

Thanks for your help.

0 Kudos
1 Solution

Accepted Solutions
Martin_B
Esri Contributor

Hello, Benjamin!

You are correct in that you would need to specify symbology when creating a geometry object.

This modification of your code provides the result you are looking for:

const graphic = new Graphic({
                          geometry,
                          symbol: {
                            type: "mesh-3d",
                            symbolLayers: [{
                              type: "fill",
                              material: {
                                colorMixMode: "tint"
                              }
                            }]
                          }});

 

Hope this helps! 🙂

Martin I. Bekkos
Geodata AS - Esri Distributor Norway

View solution in original post

0 Kudos
2 Replies
Martin_B
Esri Contributor

Hello, Benjamin!

You are correct in that you would need to specify symbology when creating a geometry object.

This modification of your code provides the result you are looking for:

const graphic = new Graphic({
                          geometry,
                          symbol: {
                            type: "mesh-3d",
                            symbolLayers: [{
                              type: "fill",
                              material: {
                                colorMixMode: "tint"
                              }
                            }]
                          }});

 

Hope this helps! 🙂

Martin I. Bekkos
Geodata AS - Esri Distributor Norway
0 Kudos
BenjaminLecuona
New Contributor II

I didn't saw your answer, so thank you it is perfect!

Specifiy material.colorMixMode is not necessary, default values are enough.