How to animate the points of a THREE.js PointCloud?

[Robert Wildling]

My question leans more to a THREE problem than to a GSAP problem, I suppose. But I know that there are some THREE enthusiasts on this forum, and given the fact that this is the best JS-related forum anyway, I dare to post my question hoping you don't disagree with me too much... Thank you in advance!

 

I couldn't get my example working on CodePen, so I prepared one on Stackblitz, hope that's ok:

https://stackblitz.com/edit/nuxt-starter-d1zs6g?file=components%2FPointCloud.vue
 

In this example there are several PointClouds that can be loaded into a THREE canvas (in a Nuxt app). A deletePlyModel function takes care of unloading the current model before a new one is loaded:

const deletePlyModel = () => {
    // If no model is currently loaded, do nothing
    if (!currentPlyModel) return;

    // Find the point cloud object in the scene
    const pointCloud = scene.getObjectByName(currentPlyModel);

    // If the point cloud object is found, dispose and remove it
    if (pointCloud) {
      pointCloud.geometry.dispose();
      pointCloud.material.dispose();
      scene.remove(pointCloud);
      
      // Clear the currentPlyModel reference
      currentPlyModel = null;
    }

    render(); // Update the scene
};

Even though I am not sure if everything is correct with this dispose function, it works.

What I would like to achieve is to implement some animation (fade out, scale, etc) on the points of the pointcloud before they are removed from the scene. (Much like lumalabs.ai does it, if anybody is familiar with that site.) But even with the help of AI I am not able to achieve a working result. First I tried this:

const timeline = gsap.timeline();
timeline.to(pointCloud.material, {
  opacity: 0,
  duration: 1
});

Gemini.ai suggested some other solutions, the last one was to loop over the colors after converting them to their Float32 pendent:

function hexToNormalizedRgb(hex) {
  const r = (hex >> 16) & 0xFF;
  const g = (hex >> 8) & 0xFF;
  const b = hex & 0xFF;
  return [r / 255, g / 255, b / 255];
}

const deletePlyModel = () => {
  // [..]
  if (pointCloud) {
	const timeline = gsap.timeline();
	const normalizedFadeColor = hexToNormalizedRgb(0xffffff);
    pointCloud.geometry.attributes.color.array.forEach((color, i) => {
      // Access the color components directly
      const colorElement = pointCloud.geometry.attributes.color.array[i];
      timeline.to(colorElement, {
        x: normalizedFadeColor[0],
        y: normalizedFadeColor[1],
        z: normalizedFadeColor[2],
        duration: 1,
        delay: i / pointCloud.geometry.attributes.color.count * 0.5
      });
    });
  }
}

This resulted in GSAP target 0 not found.

 

What would be the proper way to apply a fadeout or a scale function (staggered) to those points?

[Cassie]

Hey!

 

You'll have to find out what properties three.js gives you for each point, Can you log the point out to the console and see? That's probably what I'd do. Then check the three.js docs for clarification on what the properties mean.

 

From a cursory look at the docs it looks like the material is associated with the whole point cloud, not individual points, and there is no opacity property available for the points. 

This thread might help too
https://stackoverflow.com/questions/53786863/points-opacity-size-within-three-js

 

Good luck! Also the three.js forums are pretty active, might be worth trying over there.

[Robert Wildling]

@Cassie Thank you for your reply. And sorry for the late response! – Meanwhile Claude 3.5 could help me out, a truly impressive AI model...

[Cassie]

Do you have a solution, it's helpful to post for other people if possible! Thanks