我正在使用Three.js r83.

我正在尝试将点动态添加到几何体,但场景从未更新.

这有效：

var tmaterial = new THREE.PointsMaterial({
    color: 0xff0000,
    size: 5,
    opacity: 1
});

var tgeometry = new THREE.Geometry();
var pointCloud = new THREE.Points(tgeometry, tmaterial);

for(var i = 0; i< 1000; i++) {
    x = (Math.random() * 200) - 100;
    y = (Math.random() * 200) - 100;
    z = (Math.random() * 200) - 100;
    tgeometry.vertices.push(new THREE.Vector3(x, y, z));
}
tgeometry.verticesNeedUpdate = true;
tgeometry.computeVertexNormals();

scene.add(pointCloud);

这不起作用：

var tmaterial = new THREE.PointsMaterial({
    color: 0xff0000,
    size: 5,
    opacity: 1
});

var tgeometry = new THREE.Geometry();
var pointCloud = new THREE.Points(tgeometry, tmaterial);
scene.add(pointCloud);

for(var i = 0; i< 1000; i++) {
    x = (Math.random() * 200) - 100;
    y = (Math.random() * 200) - 100;
    z = (Math.random() * 200) - 100;
    tgeometry.vertices.push(new THREE.Vector3(x, y, z));
}
tgeometry.verticesNeedUpdate = true;
tgeometry.elementsNeedUpdate = true;
tgeometry.computeVertexNormals();
renderer.render(scene, camera);

如您所见,唯一的区别是我添加了scene.add(pointCloud);在添加顶点之前.

我想念什么？

您可以找到一个fiddle感谢@hectate

明白我的意思,只需替换

在里面();
设定点();
animate();

通过

在里面();
animate();
设定点();

解决方法:

我不确定为什么THREE.Geometry对象在初始渲染后不更新Point,但是我改为使用THREE.BufferGeometry来工作.

感谢@Hectate为我工作的小提琴手和@WestLangley将我引向提示,here is the working fiddle

BufferGeometry具有固定数量的顶点,但是您可以决定要渲染多少个顶点.诀窍是利用geometry.attributes.position.needsUpdate = true;和geometry.setDrawRange(0,nbPointsYouWantToDisplay);

var MAX_POINTS = 1000000;
var geometry = new THREE.BufferGeometry();
var positions = new Float32Array( MAX_POINTS * 3 ); 
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

然后,您可以创建您的浊点并将其添加到场景中：

//material and scene defined in question
pointCloud = new THREE.Points(geometry, material);
scene.add(pointCloud);

现在,我想每10毫秒添加并渲染500个新点.

var nbPoints = 500;
var INTERVAL_DURATION = 10;

我要做的就是：

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

function setPoints() {

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

  var x, y, z, index;

  var l  = currentPoints + nbPoints;
  if(l >= MAX_POINTS) {
    clearInterval(interval);
  }

  for ( var i = currentPoints; i < l; i ++ ) {
    x = ( Math.random() - 0.5 ) * 300;
    y = ( Math.random() - 0.5 ) * 300;
    z = ( Math.random() - 0.5 ) * 300;
    positions[ currentPointsIndex ++ ] = x;
    positions[ currentPointsIndex ++ ] = y;
    positions[ currentPointsIndex ++ ] = z;
  }
  currentPoints = l;
  pointCloud.geometry.attributes.position.needsUpdate = true;   
  pointCloud.geometry.setDrawRange( 0, currentPoints );  
  controls.update();
  renderer.render(scene, camera);

}