Adding dynamic color changes to points using three.js

Question

Adding dynamic color changes to points using three.js

I'm trying to change the colors of these points by randomly turning some of them white every 0.5 seconds.

  this.geom = new THREE.SphereBufferGeometry(6, 350, 90);
  this.colors = [];

  this.color = new THREE.Color();
  this.colorList = ['red','blue','pink'];
  for (let i = 0; i < this.geom.attributes.position.count; i++) {
    this.color.set(this.colorList[THREE.Math.randInt(0, this.colorList.length - 1)]);
    this.color.toArray(this.colors, i * 3);
  }
  this.geom.addAttribute('color', new THREE.BufferAttribute(new Float32Array(this.colors), 3));

In order to update the colors without reloading all the points and causing the page to freeze, I am calling a function in the animate loop. I only want about 30 of the points to randomly turn white. How can I achieve this efficiently?

this.colorList = ['white', 'pink', 'blue', 'red'],

updateColor() {
  for (let i = 0; i < this.geom.attributes.position.count; i++) {
    this.color.set(this.colorList[THREE.Math.randInt(0, this.colorList.length - 1)]);
    this.color.toArray(this.colors, i * 3);
  }
  this.geom.attributes.color.needsUpdate = true;
  this.geom.addAttribute('color', new THREE.BufferAttribute(new Float32Array(this.colors), 3));
}

javascript three.js

Answer 1

Answer №1

Exploring a possible approach:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 12);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);

const geometry = new THREE.SphereBufferGeometry(6, 350, 90);
const colors = [];

const color = new THREE.Color();
const colorList = ['red', 'purple', 'pink'];
for (let i = 0; i < geometry.attributes.position.count; i++) {
  color.set(colorList[THREE.Math.randInt(0, colorList.length - 1)]);
  color.toArray(colors, i * 3);
}
geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
geometry.addAttribute('colorBackup', new THREE.BufferAttribute(new Float32Array(colors), 3));

const points = new THREE.Points(geometry, new THREE.PointsMaterial({
  vertexColors: THREE.VertexColors,
  size: 0.125
}));
scene.add(points);

const usedIndices = [];
const numPoints = 300;

function modifyColors() {

  for (let i = 0; i < usedIndices.length; i++) {
    const index = usedIndices[i];
    geometry.attributes.color.copyAt(index, geometry.attributes.colorRestore, index); // revert the color of a point
  }

  for (let i = 0; i < numPoints; i++) {
    const index = THREE.Math.randInt(0, geometry.attributes.color.count - 1);
    geometry.attributes.color.setXYZ(index, 1, 1, 1); // set point's color to white
    usedIndices[i] = index; // save the index of the point
  }

  geometry.attributes.color.needsUpdate = true;
}

setInterval(modifyColors, 500);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 2

Exploring a possible approach:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 12);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);

const geometry = new THREE.SphereBufferGeometry(6, 350, 90);
const colors = [];

const color = new THREE.Color();
const colorList = ['red', 'purple', 'pink'];
for (let i = 0; i < geometry.attributes.position.count; i++) {
  color.set(colorList[THREE.Math.randInt(0, colorList.length - 1)]);
  color.toArray(colors, i * 3);
}
geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
geometry.addAttribute('colorBackup', new THREE.BufferAttribute(new Float32Array(colors), 3));

const points = new THREE.Points(geometry, new THREE.PointsMaterial({
  vertexColors: THREE.VertexColors,
  size: 0.125
}));
scene.add(points);

const usedIndices = [];
const numPoints = 300;

function modifyColors() {

  for (let i = 0; i < usedIndices.length; i++) {
    const index = usedIndices[i];
    geometry.attributes.color.copyAt(index, geometry.attributes.colorRestore, index); // revert the color of a point
  }

  for (let i = 0; i < numPoints; i++) {
    const index = THREE.Math.randInt(0, geometry.attributes.color.count - 1);
    geometry.attributes.color.setXYZ(index, 1, 1, 1); // set point's color to white
    usedIndices[i] = index; // save the index of the point
  }

  geometry.attributes.color.needsUpdate = true;
}

setInterval(modifyColors, 500);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Adding dynamic color changes to points using three.js

Answer №1

Similar questions

The jQuery function text().replace('','') is failing to work properly

Adequate parameters are necessary for an express callback function beyond just (req, res)

Using MUI Select with Array of Objects for values - Learn how to deselect a predefined state

Update the formatting of the dates in the dateRangePicker

Tips on incorporating the vue package

"Error message: The server tag within the OnClientClick attribute is not properly formed

Tell webpack to exclude a specific import

The impact of a variable in a function with XMLHttpRequest

The latest update to the Server Stats code mistakenly changes the channel to "undefined" instead of displaying the total number

Tips for automatically sending data back to the server every two seconds using ASP.NET Web Form

Issues with utilizing jQuery AJAX for form submissions

Is there a way to retrieve the JavaScript variable name for a rhandsontable displayed in a Shiny application?

Tips for waiting for a Promise to resolve before returning a new Promise

Ember 2: Display a loading message only if the IDs were part of the initial response

Navigate through the Jquery slider by continuously scrolling to the right or simply clicking

How to disable a specific array of dates in Ant Design range picker

Leverage API providing HTML and JavaScript exclusively using PHP script

Completed processing graphical event layer

Loading the Facebook JavaScript SDK asynchronously using React and Redux

Using a semicolon at the end of the line is considered a favorable practice when writing ES6 code in Babel