When it comes to comparing the gradient colors applied to two spheres, the key lies in one statement:
sphereGeometry = sphereGeometry.toNonIndexed();
https://i.sstatic.net/pBBs9.jpg
https://i.sstatic.net/KRULV.jpg
I prefer the smoother look achieved by .toNonIndexed(), so I attempted to apply it to some of the imported “.glb” models from THREE.js GIT - but encountered issues.
For instance, when I tried it on the horse model available here: https://github.com/mrdoob/three.js/blob/master/examples/models/gltf/Horse.glb
https://i.sstatic.net/IUQ9Y.png
The colors were completely overridden and defaulted to red and black inexplicably.
However, if I remove the .toNonIndexed() line, the requested colors are displayed - although the triangular structure is prominent, which goes against the smooth look I aim for:
https://i.sstatic.net/f2Z4x.png
Below is the code snippet for loading the object:
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;
// The problematic command:
// 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);
}
}
How can I achieve a smoother gradient effect?
=====================================================================
UPDATE:
Here's my concept: extending a gradient across an entire model rather than each individual triangle forming it. (Compare this image to the one above.)