javascript - 如何在 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 .
您可以通过添加一个包含顶点颜色的附加缓冲区属性来为每个顶点应用一种颜色。您还必须设置 Material 属性 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>