Проводя линию с тремя.JS динамически

Question

Проводя линию с тремя.JS динамически

Это то, что я хотел бы достичь (модифицируемый полигон, где красные круги являются вершинами), и я хотел бы построить полигон динамически.

Введите описание изображения здесь

При инициализации геометрии как

var geometry = new THREE.Geometry();



geometry.vertices.push(point);

geometry.vertices.push(point);



var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));

Он хорошо работает до второго щелчка, он строит прямую линию между 1 и 2, но не добавляет третью линию, когда он толкается в массив. WebGL, по-видимому, требует буферных точек.

Когда я предопределяю такие вершины, я могу нарисовать две линии (третью щелчок)

var geometry = new THREE.Geometry();



for (var i = 0; i < 4; i++) {

    geometry.vertices.push(point);

}



var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));

Но это не очень хорошее решение, так как я не знаю, сколько вершин пользователь хочет добавить, и бессмысленно назначать ему большое число, так как я должен сделать цикл несколько раз.

Есть ли какой-нибудь способ обойти это?

565 3

javascript webgl three.js

3 ответов:

Comments

Ничего не найдено.

WestLangley · Accepted Answer · 2017-05-23 15:18:13

Вы можете анимировать линию-или увеличить количество отображаемых точек-Очень легко, используя 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: смотритеэтот ответ для техники, которая может вам больше понравиться-особенно если линия состоит всего из нескольких точек.

Три.Яш Р.84

user3325025 · Accepted Answer · 2015-12-02 18:18:07

Я обновил скрипку с помощью событий мыши и векторного массива, если вы хотите писать от руки.

Https://jsfiddle.net/w67tzfhx/40/

function onMouseDown(evt) {

    if(evt.which == 3) return;


    var x = ( event.clientX / window.innerWidth ) * 2 - 1;
    var y =  - ( event.clientY / window.innerHeight ) * 2 + 1;

    // do not register if right mouse button is pressed.

    var vNow = new THREE.Vector3(x, y, 0);
    vNow.unproject(camera);
    console.log(vNow.x + " " + vNow.y+  " " + vNow.z); 
    splineArray.push(vNow);

    document.addEventListener("mousemove",onMouseMove,false);
    document.addEventListener("mouseup",onMouseUp,false);
}

Wilt · Accepted Answer · 2016-06-30 13:20:49

Нарисуйте линию в реальном времени

Вот обновленная скрипка где я оптимизировал код из user3325025 его примера; в этом случае нет абсолютно никакой необходимости обновлять все точки линии на рендере. Обновление требуется только onMouseMove (обновление конца строки) и onMouseDown (рисование новой точки):
// update line
function updateLine() {
  positions[count * 3 - 3] = mouse.x;
  positions[count * 3 - 2] = mouse.y;
  positions[count * 3 - 1] = mouse.z;
  line.geometry.attributes.position.needsUpdate = true;
}

// mouse move handler
function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  mouse.z = 0;
  mouse.unproject(camera);
  if( count !== 0 ){
    updateLine();
  }
}

// add point
function addPoint(event){
  positions[count * 3 + 0] = mouse.x;
  positions[count * 3 + 1] = mouse.y;
  positions[count * 3 + 2] = mouse.z;
  count++;
  line.geometry.setDrawRange(0, count);
  updateLine();
}