如何在 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);

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>