THREE.js - Apply Gradient Colors to Imported GLTF Model

Questions
, , ,
1

I’ve been trying to apply gradient colors to the Flower model used in this official THREE.js tutorial:
https://threejs.org/examples/webgl_instancing_scatter.html

The flower model looks like this:

Flower-Solid-Red

and it can be downloaded from here: three.js/examples/models/gltf/Flower at master · mrdoob/three.js · GitHub)

So far I’ve been able to successfully load the model into my project, and I’ve also been able to apply different colors to its “blossom” Mesh - but only solid colors.

I’d like to apply gradient colors.
To illustrate what I have in mind, I made a very quick-and-dirty image in photoshop of what it might look like:

Flower-Gradients

I tried doing this using the vertexColors technique - which is the only technique I know (I’m pretty new to THREE.js) - no luck thus far (code below.)

At this point a part of me is wondering if this is even possible to do with an imported GLTF model - or if its sort of a lost cause.

Would love some input/help.

Here’s my code - in two parts: the first is for solid colors - which works, the second is my attempt at applying Gradient colors - which does not work:

// NOTE: I stored the already imported GLTF model in a new Mesh called “blossomMesh”

  // 1. Create a new Group to which I’ll add the Stem and Blossom:
  var newFlower = new THREE.Group();

  // 2. CLONE the MESH of the imported 3D model:
   let newBlossomMesh = blossomMesh.clone();

  // 3. CLONE it's GEOMETRY:
   var newBlossomGeometry = blossomMesh.geometry.clone();

  // 4. CLONE it's MATERIAL:
   var newBlossomMaterial = blossomMesh.material.clone();
                
  // 5. MAKE a NEW COLOR:
  let newBlossomColor = new THREE.Color(generateRandomColor());
  newBlossomMaterial.color = newBlossomColor;
                
  newBlossomMesh.material = newBlossomMaterial;

  newFlower.add(newBlossomMesh);
  newFlower.add(newStemMesh);

  scene.add(newFlower);

So the above works for SOLID colors.

Here’s what I tried to get gradient colors going:

// THE BLOSSOM:
  // 1. CLONE the MESH of the imported 3D model:
  let newBlossomMesh = blossomMesh.clone();

  // 2. This time use a BufferGeometry to CLONE the GEOMETRY:
  var newBlossomGeometry = new THREE.BufferGeometry();
  newBlossomGeometry = blossomMesh.geometry.clone();

  var blossomVertexPositionsArray = newBlossomGeometry.attributes.position;
  newBlossomGeometry = newBlossomGeometry.toNonIndexed(); 
  blossomVertexPositionsArray = newBlossomGeometry.attributes.position;
                
  // Make a Colors Array:
  var blossomColorsArray = [];
  const newBlossomColor = new THREE.Color();
  for(var i = 0, l = blossomVertexPositionsArray.count; i < l; i ++) {
     newBlossomColor.setHSL(Math.random() * 0.2 + 0.05, 0.95, 0.799);
     blossomColorsArray.push(newBlossomColor.r, newBlossomColor.g, newBlossomColor.b);
  }

  // Now “splash” the "blossomColorsArray" all over the Blossom:
  newBlossomGeometry.setAttribute("color", new     THREE.Float32BufferAttribute(blossomColorsArray, 3));

  newBlossomMesh.material = newBlossomMaterial;

  newFlower.add(newBlossomMesh);
  newFlower.add(newStemMesh);

  scene.add(newFlower);

What I get from doing this is a black colored blossom. Actually, it looks like it’s just not getting any color, meaning the black I’m seeing is more like the ABSENCE of color, not the actual color “black.”

2

/cc