Question

我正在构建一个显示点云视频的简单应用。我希望它以某种特定的帧速率循环通过不同的点云。

目前，每个点的位置都会根据需要更改，但由于某种原因，颜色不会更新。他们只是保持白色。

这是jsfiddle： https://jsfiddle.net/jjough/2uwp6mqr/

var scene, renderer, camera;
var cube;
var controls;
var tgeometry;
var pointCloud;
var nbPoints = 500;
var INTERVAL_DURATION = 500;
var MAX_POINTS = 100000;
var currentPointsIndex = 0;
var currentPoints = 0;
var currentTimestep = 0;
var interval;

var startTime = Date.now();

init();

animate();

interval = setInterval(function() {
  setPoints();
}, INTERVAL_DURATION)


// some randomly generated data. two point clouds, each with 4 points
var data_xyz = [[[1.8268303127880967, -0.16895618685053237, -1.8384542433636089], [0.10297754734589952, 0.3851586497177374, 0.05018245416897573], [-2.1180798955888385, -0.6258789390249381, -0.4864819299757507], [-1.9369768985250173, 0.31450389846935795, 0.6346786832304544]], [[-0.016824123971404495, 1.9396074401037642, 0.43754527308924274], [-2.39602366377225, 0.09685160862462244, 0.19810004276648954], [-1.19132463333637, -1.2798379064589926, -0.24002961031280587], [1.8350352795559735, -0.28378543753167934, 2.4226851359270243]]]

var data_color = [[[0.9283037768732556, 0.1057777112621947, 0.6112961465608326], [0.35444448049318833, 0.5568149518418057, 0.9135465231278102], [0.7801392850962043, 0.5461347052967598, 0.08969984826560384], [0.4637490610227777, 0.8788191706067839, 0.7854789512804808]], [[0.9673365640014331, 0.33305088656497794, 0.7323643699420422], [0.018088016871175228, 0.02136375617509534, 0.9314182214669771], [0.844695305010425, 0.7188791022449263, 0.600067066091458], [0.25036800594943853, 0.9710434742819252, 0.6482289815895979]]]




function setPoints() {

    var positions = pointCloud.geometry.attributes.position.array;
    var colors = pointCloud.geometry.attributes.color.array;

        var x, y, z, index;

    var l  = currentPoints + nbPoints;
    if(l >= MAX_POINTS) {
        clearInterval(interval);
      console.log('Milliseconds to render ' + MAX_POINTS +' points: ');
      console.log( Date.now() - startTime);    
      console.log('Expected milliseconds: ' + (INTERVAL_DURATION * MAX_POINTS / nbPoints));
    }
    currentPointsIndex = 0
    arr_xyz = data_xyz[currentTimestep]
    arr_color = data_color[currentTimestep++]
    if (currentTimestep == data_xyz.length){currentTimestep=0}

    for(var i=0; i < arr_xyz.length; i++) {
        point_xyz = arr_xyz[i];
      point_color = arr_color[i];
      positions[ currentPointsIndex   ] = point_xyz[0];
      colors[ currentPointsIndex ++  ] = point_color[0];
      positions[ currentPointsIndex   ] = point_xyz[1];
      colors[ currentPointsIndex ++  ] = point_color[1];
       positions[ currentPointsIndex   ] = point_xyz[2];
      colors[ currentPointsIndex ++  ] = point_color[2];
    }

    currentPoints = currentPointsIndex;
    pointCloud.geometry.attributes.position.needsUpdate = true; 
    pointCloud.geometry.attributes.color.needsUpdate = true;    
    pointCloud.geometry.setDrawRange( 0, currentPoints );  
    update();

}

function update() {

  controls.update();
  renderer.render(scene, camera);
}

function init() {
      renderer = new THREE.WebGLRenderer( {antialias:true} );
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize (width, height);
    document.body.appendChild (renderer.domElement);
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera (45, width/height, 1, 1000);
    camera.position.y = 8;
    camera.position.z = 40;
    camera.lookAt (new THREE.Vector3(0,0,0));

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

    var tmaterial = new THREE.PointsMaterial({
      size: 2,
      opacity: 1
    });


    tgeometry = new THREE.BufferGeometry();
    var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
    var colors = new Float32Array( MAX_POINTS * 3 ); // 3 colors per point
        tgeometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
    tgeometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
      pointCloud = new THREE.Points(tgeometry, tmaterial);
    scene.add(pointCloud);
        window.addEventListener ('resize', onWindowResize, false);
}

function onWindowResize () {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize (window.innerWidth, window.innerHeight);
}

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

Answer 1

将此添加到PointsMaterial，使其读取您定义的颜色：

vertexColors: THREE.VertexColors

否则它将回落为白色，即材质的默认颜色。

我在你的小提琴中测试过它：https://jsfiddle.net/2uwp6mqr/4/
您可以在文档中vertexColors找到它：https://threejs.org/docs/#api/materials/Material
此处文档中材料的常量：https://threejs.org/docs/#api/constants/Materials

在three.js点云缓冲测量中改变点的颜色

1 个答案: