Mesh not displayed after update

Questions
1

Hello,

I am new to three.js. I am extending an existing application (three.js version 73) and have troubles updating a mesh.

The apllication (actually a chart) renders Lines and uses a BufferGeometry.
The positions in the BufferGeomerty are updated and they are displayed ok.

I added 2 meshes to visualize upper and lower limits.
This works when it is rendered the first time.
threejs_01

When the data is updated the meshes are not shown.
threejs_02

This is what my code looks like

  1. Create Buffergeometry and lines/meshes
    const GPU_DATA_LEN = 1000;
    this._geom = new THREE.BufferGeometry();
    this._geom.dynamic = true;
    this._geom.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( GPU_DATA_LEN * 3 ), 3 ) );
    	
    	if( line ) {
    		this._mat = new THREE.LineBasicMaterial();
        this._mat.color = new THREE.Color(this._color);
        this._mat.needsUpdate = true;
        this._line = new THREE.Line(this._geom, this._mat);
    	}
    	else {
    		this._mat = new THREE.MeshBasicMaterial({
            color: this._color === null ? 0 : this._color,
            //color: fillStyle < 0 ? 'blue' : 'green',
            transparent: true,
            opacity: .15
        });
        this._line = new THREE.Mesh( this._geom, this._mat );
    	}

2a. Update of lines
Get the positions attribute and update the position

	updateLines( xValues, step ) {
		const len = xValues.length;
		const attr = this._geom.getAttribute('position');
		
		for (; i < len; i++, k += step) {
		  attr.setXY(i, xValues[i], this._data[k]);
		}
		attr.needsUpdate = true;
		
		this._line.matrix.multiplyMatrices(
			this._axis.transformMatrix(),
			(new THREE.Matrix4()).makeScale(xScale, 1, 1)
		);
	}

2b. Update of meshes

    	_updateShape( xValues ) {
    	
    		const shape = Shape();
    		shape.moveto();
    		shape.lineto();
    		...
    		
    		this._geom.fromGeometry( new THREE.ShapeGeometry( shape ));
    		
    		// get Transform-Matrix for y scale and y offset
    		const m = this._axis.transformMatrix();
    		const m2 = (new THREE.Matrix4()).makeScale(xScale, 1, 1);

    		this._line.applyMatrix( m );
    		this._line.applyMatrix( m2 );
    	}

I assume that the way the BufferGeometry is handled is not correct.
Maybe someone has a hint why it is not working.

Regards
Rüdiger

2

Do you see any error messages or warnings in the browser console? Besides, is it possible to share a link to your application? I think the problem can be solved faster if you provide a debugging option.

Two other points:

  • When creating a new material, it’s normally not necessary to set needsUpdate to true. Besides, assigning color values like so instead of creating a new object:
this._mat.color.set( this._color );
  • Setting BufferGeometry.dynamic to true is normally only done if you update buffer data per frame. If this is no true in your application, you can remove the respective line.
3

I will prepare access to the application and send a link by private mail.

Sometimes I saw a warning that the geometry can not triangulate the points. But how could this be? The data in my test scenario is static. So when it works the first time why shouldn’t it work the next time.

I saw that later versions use a the earcut algorithm to triangulate, which is different than in version 73. I try to use the current release of three.js.

Thanks for your hints about the material. I will adopt it.

R. Härtel

4

The previous triangulation algorithm was fragile and had problems with various point sets. With R89 we integrated a port of the earcut algorithm and had almost no issues with triangulation since then. I suggest you upgrade at least to R89 and see if it solves your problem.