Applying Gradients to Imported .glb Model

Questions
1

The difference between the following two spheres - in terms of how their gradient colors were applied, comes down to one statement:

sphereGeometry = sphereGeometry.toNonIndexed();

Dome-Triangles

Dome-Smooth

Being that I really like the smoother look that .toNonIndexed() gives us, I tried applying it to some of the imported “.glb” models available on the THREE.js GIT - but it’s not working.

For example, here’s a ".glb" model from THREE.js’s GIT (available here: three.js/Horse.glb at 350f0a021943d6fa1d039a7c14c303653daa463f · mrdoob/three.js · GitHub)

Horse-PinkWhite
Horse-PinkWhite990×592 92.3 KB

So that looks pretty much as I expected: very “triangular”, meaning you can really see the vertices.

But when I call .toNonIndexed() on the horse’s geometry - just like I did with my Sphere - to make it look smoother, it comes out like this:

Horse-Red
Horse-Red852×520 43.9 KB

It basically completely ignores my colors - purple and white - and defaults to red and black for some reason.
Any idea why that is - and how I could fix this?

Here’s my code for loading the Horse.glb model:

function loadAny3DModel() {
    loader.load("./Horse.glb", function(theHorse) {
       console.log("===>'theHorse' has arrived!!!\n");

       var horseScene = theHorse.scene;
       horseMesh = horseScene.children[0]; 
                
       var horseGeometry = horseMesh.geometry; 
       let horseMat = horseMesh.material;
       var horseVertexPositionsArray = horseGeometry.attributes.position;

       // Here's the command that isn't working:
       // horseGeometry = horseGeometry.toNonIndexed(); 
       // horseVertexPositionsArray = horseGeometry.attributes.position;

        let theColor = new THREE.Color();
        let colorsArray = [];
        for(let i = 0; i < horseVertexPositionsArray.count; i++) {
          let randC1 = "purple"; 
          let randC2 = "white";
          let chosenColor = i % 2 == 0 ? randC1 : randC2;
          theColor.set(chosenColor);
          colorsArray.push(theColor.r, theColor.g, theColor.b);
        }
        horseGeometry.setAttribute("color", new THREE.Float32BufferAttribute(colorsArray, 3));
        horseMat.vertexColors = true;

        render();
        scene.add(horseScene);

    }
}

I’m fairly new to THREE.js so I’m not really sure what I should be doing here to fix this.
Any help would be greatly appreciated.

Thanks!

2

I have answered you at stackoverflow:

2 Likes