three. js - буферная геометрия не отображается

Question

это мой первый вопрос, для моего первого проекта с тремя. js, я надеюсь, что это не слишком просто, я уже исследовал, но безуспешно. Итак, я создаю Line2, потому что мне нужно контролировать жирность, поэтому я последовал этому примеру (https://threejs.org/examples/?q=line#webgl_lines_fat), и он работал.

Но потом я увидел, что мне тоже нужно чтобы обновить точки моей геометрии, были сделаны некоторые модификации, следующие этому примеру: https://threejs.org/docs/index.html#manual / ru / Введение / Как обновить вещи

А теперь мой я sh он больше не отображается, вот соответствующий код, я нахожусь внутри vue компонента, поэтому он имеет некоторый другой синтаксис.

//mounted()
this.arcGeometry1 = new LineGeometry()
// set maximum size for buffer of LineGeometry,
var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
this.arcGeometry1.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); //  the number of values of the array, not drawRange
this.matLine2 = new LineMaterial({
color: 0x000000,
linewidth: 3,
dashed: false
});
this.matLine2.resolution.set(( this.container.clientWidth, this.container.clientHeight ))
this.arcMesh = new Line2(this.arcGeometry1, this.matLine2 );
update()
init()


//update()
var positions = this.arcMesh.geometry.attributes.position.array;
  for (let x = 0; x < arcPath.length; x++) {
    positions[x] = arcPath[x]
  }

  this.arcMesh.geometry.setDrawRange( 0, arcPath.length );
  this.arcMesh.geometry.computeBoundingSphere();
  //this.arcMesh.computeLineDistances();
  this.earthArcMesh.scale.set( 1, 1, 1 );

//init()
this.scene.add(this.arcMesh);

//render()
this.renderer.render(this.scene, this.camera);
this.arcMesh.geometry.computeBoundingSphere();
this.arcMesh.geometry.attributes.position.needsUpdate = true;

Поскольку я реализовал bufferGeometry, me sh не отображается в рендеринг, но когда я отлаживаю его, все в порядке, потому что геометрические точки правильно загружены

Line2 {…}
castShadow: (...)
children: (...)
frustumCulled: (...)
geometry: LineGeometry
    attributes: Object
        position: BufferAttribute
            array: Float32Array(135)
                [0 … 99]
                0: -148.2235870361328
                1: -17.804668426513672
                2: 0.0008591873338446021
                3: -147.93746948242188
                4: -20.358715057373047
                5: 0.0009825639426708221
                6: -147.60552978515625
                7: -22.92180633544922
                8: 0.0011064092395827174
                9: -147.22335815429688
                10: -25.517356872558594
                11: 0.0012318536173552275
                ...

boundingSphere: Sphere
    center: Vector3
    radius: 0

Подсказка может заключаться в том, что всегда при отладке консоли я вижу, что ограничивающая сфера имеет радиус 0? Даже если раньше вычислял его во фрагменте. Любая помощь будет очень признателен, спасибо

Answer 1

Я заставил его работать, используя line.geometry.maxInstancedCount = N

вместо line.geometry.setDrawRange(N)

Потому что «BufferGeometry.setDrawRange () нельзя использовать с широкими строками, так как он внутренне использует инстансированную визуализацию "Вы можете увидеть ветку: https://discourse.threejs.org/t/fat-lines-setting-geometry-data-does-not-work/14448/8 Я думаю, что и здесь ответы сработали бы, я просто не мог, но все равно спасибо.

Answer 2

Вы визуализируете "жирные линии", используя LineGeometry из трех. js примеров, и вы хотите иметь возможность изменять положение вершины.

К LineGeometry.prototype добавить метод:

setPositionAt: function ( index, x, y, z ) {

    this.attributes.instanceStart.setXYZ( index, x, y, z );

    if ( index > 0 ) this.attributes.instanceEnd.setXYZ( index - 1, x, y, z );

    return this;

},

Чтобы использовать его:

line.geometry.setPositionAt( i, x, y, z ); // updates the coords of the i-th point

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

line.geometry.maxInstancedCount = N; // this will render N line segments (N + 1 points)

три. js r.115