如何在ThreeJS中为每个点赋予不同的颜色

Question

我正在使用ThreeJS创建一个点云。我想根据每个点的位置为点云中的每个点分配特定的颜色。如何为几何体中的每个顶点分配特定的颜色，并在必要时更改该顶点的颜色？

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);

- Paul Brink

Answer 1

从r125版本开始，THREE.Geometry已被弃用且不再是核心的一部分。强烈建议使用THREE.BufferGeometry。

您可以通过添加一个额外的缓冲属性来为每个顶点应用颜色。您还必须将材料属性vertexColors设置为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;
 }

<script src="https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.js"></script>

- Mugen87