Javascript THREE.js将点动态添加到不渲染的点几何体

我正在使用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=新的三点材质({
颜色：0xff0000，
尺码：5，
不透明度：1
});
var tgeometry=新的3.Geometry（）；
var pointCloud=新的三个点（t几何、t材料）；
对于（变量i=0；i<1000；i++）{
x=（Math.random（）*200）-100；
y=（Math.random（）*200）-100；
z=（Math.random（）*200）-100；
几何顶点推（新的三矢量3（x，y，z））；
}
tgeometry.verticesNeedUpdate=true；
tgeometry.computeVertexNormals（）；
添加（点云）；

这不起作用：

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

var tmaterial=新的三点材质({
颜色：0xff0000，
尺码：5，
不透明度：1
});
var tgeometry=新的3.Geometry（）；
var pointCloud=新的三个点（t几何、t材料）；
添加（点云）；
对于（变量i=0；i<1000；i++）{
x=（Math.random（）*200）-100；
y=（Math.random（）*200）-100；
z=（Math.random（）*200）-100；
几何顶点推（新的三矢量3（x，y，z））；
}
tgeometry.verticesNeedUpdate=true；
tgeometry.elementsNeedUpdate=true；
tgeometry.computeVertexNormals（）；
渲染器。渲染（场景、摄影机）；

如您所见，唯一的区别是我添加了

scene.add（点云）在添加顶点之前

我错过了什么

你可以找到一个感谢@hepate

要明白我的意思，只需替换

init（）；
设定点（）；
制作动画（）；

借

init（）；
制作动画（）；
设定点（）；
这里是您第一次安装的小提琴：

var场景、渲染器、摄影机；
var立方；
风险值控制；
init（）；
制作动画（）；
函数init（）
{
renderer=new THREE.WebGLRenderer（{antialas:true}）；
变量宽度=window.innerWidth；
var height=window.innerHeight；
renderer.setSize（宽度、高度）；
document.body.appendChild（renderer.doElement）；
场景=新的三个。场景（）；
摄像机=新的三视角摄像机（45，宽/高，11000）；
摄像机位置y=160；
摄像机位置z=400；
摄像机.注视（新的三矢量3（0,0,0））；
控件=新的3.0个控件（摄影机、渲染器.doElement）；
var t材料=新的三点材料({
颜色：0xff0000，
尺码：5，
不透明度：1
});
var tgeometry=新的3.Geometry（）；
var pointCloud=新的三个点（t几何、t材料）；
对于（变量i=0；i<1000；i++）{
x=（Math.random（）*200）-100；
y=（Math.random（）*200）-100；
z=（Math.random（）*200）-100；
几何顶点推（新的三矢量3（x，y，z））；
}
tgeometry.verticesNeedUpdate=true；
tgeometry.computeVertexNormals（）；
添加（点云）；
window.addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）
{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数animate（）
{
控件更新（）；
请求动画帧（动画）；
renderer.render（场景、摄影机）；
}

这里有一个和你的第二个：

var场景、渲染器、摄影机；
var立方；
风险值控制；
init（）；
制作动画（）；
函数init（）
{
renderer=new THREE.WebGLRenderer（{antialas:true}）；
变量宽度=window.innerWidth；
var height=window.innerHeight；
renderer.setSize（宽度、高度）；
document.body.appendChild（renderer.doElement）；
场景=新的三个。场景（）；
摄像机=新的三视角摄像机（45，宽/高，11000）；
摄像机位置y=160；
摄像机位置z=400；
摄像机.注视（新的三矢量3（0,0,0））；
控件=新的3.0个控件（摄影机、渲染器.doElement）；
var t材料=新的三点材料({
颜色：0xff0000，
尺码：5，
不透明度：1
});
var tgeometry=新的3.Geometry（）；
var pointCloud=新的三个点（t几何、t材料）；
添加（点云）；
对于（变量i=0；i<1000；i++）{
x=（Math.random（）*200）-100；
y=（Math.random（）*200）-100；
z=（Math.random（）*200）-100；
几何顶点推（新的三矢量3（x，y，z））；
}
tgeometry.verticesNeedUpdate=true；
tgeometry.elementsNeedUpdate=true；
tgeometry.computeVertexNormals（）；
渲染器。渲染（场景、摄影机）；
window.addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）
{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数animate（）
{
控件更新（）；
请求动画帧（动画）；
renderer.render（场景、摄影机）；
}

在这两种情况下，点云对我的显示都非常好（版本82）。也许在你忽略渲染的地方还遗漏了一些东西？我注意到您的第一个示例没有显示您调用render（）的步骤。我希望这有帮助
 我不确定为什么
THREE.Geometry
对象在初始渲染后不更新点，但我让它使用
THREE.BufferGeometry

多亏了
@hepate
为我弄到了一把工作小提琴和
@WestLangley
指导我找到了提示

BufferGeometry具有固定数量的顶点，但您可以决定要渲染多少顶点。诀窍是利用
geometry.attributes.position.needsUpdate=true和
几何体。设置绘图范围（0，NBPOINTSYOUWANTTO显示）

然后，可以创建cloudpoints并将其添加到场景中：

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

}

var interval=setInterval（函数（）{
设定点（）；
}，间隔（持续时间）
函数设置点
//material and scene defined in question
pointCloud = new THREE.Points(geometry, material);
scene.add(pointCloud);

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

}