How to give each point its own color in ThreeJS

Question

I am using ThreeJS to create a point cloud. I would like to givee each point in the cloud a specific color based on its location. How can I assign a specific color to each vertice in the geometry and change the color of the vertice whenever necessary?

geometry = new THREE.Geometry();

for (i = 0; i < particleCount; i++) {

            var vertex = new THREE.Vector3();
            vertex.x = Math.random() * 2000 - 1000;
            vertex.y = Math.random() * 2000 - 1000;
            vertex.z = Math.random() * 2000 - 1000;

            geometry.vertices.push(vertex);
        }

colors = [0xff0000, 0x0000FF, 0x00FF00, 0x000000]
size = 0.5

            material = new THREE.PointsMaterial({
                size: size,
                color: colors[0]
            });

particles = new THREE.Points(geometry, material);

scene.add(particles);

user_5250847 · Answer

Starting with r125, THREE.Geometry is deprecated and no part of the core anymore. It is highly recommended to work with THREE.BufferGeometry.

You can apply a color per vertex by adding an additional buffer attribute holding vertex colors. You also have to set the material property vertexColors to true.

let camera, scene, renderer;

let points;

init();
animate();

function init() {


  camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 5, 3500 );
  camera.position.z = 2750;

  scene = new THREE.Scene();
  scene.background = new THREE.Color( 0x050505 );
  scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );

  //

  const particles = 500000;

  const geometry = new THREE.BufferGeometry();

  const positions = [];
  const colors = [];

  const color = new THREE.Color();

  const n = 1000, n2 = n / 2; // particles spread in the cube

  for ( let i = 0; i < particles; i ++ ) {

    // positions

    const x = Math.random() * n - n2;
    const y = Math.random() * n - n2;
    const z = Math.random() * n - n2;

    positions.push( x, y, z );

    // colors

    const vx = ( x / n ) + 0.5;
    const vy = ( y / n ) + 0.5;
    const vz = ( z / n ) + 0.5;

    color.setRGB( vx, vy, vz );

    colors.push( color.r, color.g, color.b );

  }

  geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
  geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

  //

  const material = new THREE.PointsMaterial( { size: 15, vertexColors: true } );

  points = new THREE.Points( geometry, material );
  scene.add( points );

  //

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  //

  window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

}

//

function animate() {

  requestAnimationFrame( animate );

  render();

}

function render() {

  const time = Date.now() * 0.001;

  points.rotation.x = time * 0.25;
  points.rotation.y = time * 0.5;

  renderer.render( scene, camera );

}

body {
  margin: 0;
 }

How to give each point its own color in ThreeJS

1 Answers