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 = 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); перед добавлением вершин.

Что мне не хватает?

Вы можете найтииграть на скрипке Благодаря @hectate

Чтобы увидеть, что я имею в виду, просто замените

init(); setPoints(); animate();

от

init(); animate(); setPoints();

Ответы на вопрос(2)

Ваш ответ на вопрос