时间戳

首页 > 解决方案 > three.js - bufferGeometry 不显示

vue.js - three.js - bufferGeometry 不显示

问题描述

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

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

现在我的网格不再显示了，这是一个相关的代码，我在一个 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？即使之前确实在代码段中计算过。任何帮助将不胜感激，谢谢

标签： vue.jsthree.js

解决方案

您正在使用 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)

三.js r.115

推荐阅读