three.js - bufferGeometry 不显示答案

【问题标题】：three.js - bufferGeometry not showingthree.js - bufferGeometry 不显示
【发布时间】：2021-07-20 15:40:05
【问题描述】：

这是我的第一个问题，对于我的第一个项目与three.js，我希望它不是太简单，我已经研究过但没有成功。所以我创建了一个 Line2 因为我需要控制肥胖，所以我按照这个例子 (https://threejs.org/examples/?q=line#webgl_lines_fat) 并且它正在工作。

但后来我发现我还需要更新几何的点，所以按照这个例子做了一些修改：https://threejs.org/docs/index.html#manual/en/introduction/How-to-update-things

现在我的网格不再显示了，这是一个相关代码，我在一个 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，网格没有显示在渲染中，但是当我调试它时，看起来很好，因为几何点已正确加载

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？即使之前确实在 sn-p 中计算过。任何帮助将不胜感激，谢谢

【问题讨论】：

标签： vue.js three.js

【解决方案1】：

您正在使用three.js 示例中的LineGeometry 渲染“粗线”，并且您希望能够修改顶点位置。

给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)

three.js r.115

【讨论】：

感谢您的帮助！我试图走这条路，但它现在给了我错误`“TypeError：无法读取未定义的属性'setXYZ'”`
我也尝试将 setAttribute 参数从 THREE.BufferAttribute 更改为：this.arcGeometry1.setAttribute( 'position', new THREE.InstancedBufferAttribute( positions, 3 ) ); ，但它仍然给我错误
复制three.js胖线示例如何实例化几何：var geometry = new LineGeometry(); geometry.setPositions( positions );
它仍然给我同样的错误`“TypeError：无法读取未定义的属性'setXYZ'”`，我不知道是不是因为我没有在vue中正确添加方法。你知道他们渲染一条粗线并修改顶点位置的例子吗？

【解决方案2】：

我通过使用 line.geometry.maxInstancedCount = N 使其工作

line.geometry.setDrawRange(N)的insted

因为“BufferGeometry.setDrawRange() 不能用于宽线，因为它在内部使用实例化渲染。” 可以看帖：https://discourse.threejs.org/t/fat-lines-setting-geometry-data-does-not-work/14448/8 我认为这里的答案也会起作用，但我做不到，但无论如何谢谢。

【讨论】：

【解决方案3】：

threejs的最新Instance buffer类有变化，使用：

line.geometry.instanceCount = N 而不是line.geometry.maxInstancedCount = N

【讨论】：