我不知道为什么THREE.Geometry
对象在初始渲染后不会更新点,但我让它与THREE.BufferGeometry
反而。
谢谢@Hectate
谁给我拿了一把可以用的小提琴@WestLangley
谁引导我找到提示,这是工作小提琴
BufferGeometry 有固定数量的顶点,但您可以决定要渲染的顶点数量。诀窍是利用geometry.attributes.position.needsUpdate = true;
and 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);
现在我想添加并渲染500
每隔一个新点10
毫秒。
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);
}