popupBackground глюки с материальным дизайном

Вы можете анимировать линию - или увеличить количество отображаемых точек - очень легко с помощью методов BufferGeometry и setDrawRange(). Однако вам нужно установить максимальное количество точек.

var MAX_POINTS = 500;

// geometry
var geometry = new THREE.BufferGeometry();

// attributes
var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

// draw range
drawCount = 2; // draw the first 2 points, only
geometry.setDrawRange( 0, drawCount );

// material
var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

// line
line = new THREE.Line( geometry,  material );
scene.add( line );

Вы устанавливаете данные позиции с использованием шаблона, подобного этому:

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

var x = y = z = index = 0;

for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {

    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;

    x += ( Math.random() - 0.5 ) * 30;
    y += ( Math.random() - 0.5 ) * 30;
    z += ( Math.random() - 0.5 ) * 30;

}

Если вы хотите изменить количество точек, сделанных после первого рендеринга, сделайте следующее:

line.geometry.setDrawRange( 0, newValue );

Если вы хотите изменить значения данных позиции после первого рендера , вы устанавливаете флаг needsUpdate следующим образом:

line.geometry.attributes.position.needsUpdate = true; // required after the first render

Вот скрипка , показывающая анимированную строку, которую вы можете адаптировать к вашему прецеденту.

EDIT: см. этот ответ для метода, который вам может понравиться лучше, особенно если линия состоит всего из нескольких точек.

three.js r. 84