# Mesh not displayed after update

**URL:** <https://discourse.threejs.org/t/mesh-not-displayed-after-update/7688>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [May 22, 2019, 1:24pm UTC](https://discourse.threejs.org/t/mesh-not-displayed-after-update/7688 "2019-05-22T13:24:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rhae](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rhae/32/5679_2.png) [@rhae](https://discourse.threejs.org/u/rhae)\
**Post date:** [May 22, 2019, 1:24pm UTC](https://discourse.threejs.org/t/mesh-not-displayed-after-update/7688/1 "2019-05-22T13:24:57Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/a818af4a6a89625a6c5fe8581b580aea6bab6362.png)

When the data is updated the meshes are not shown.  
 ![threejs_02](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/8305b5455442e203f548cd411a158cb80a4b07f6.png)

This is what my code looks like

1. Create Buffergeometry and lines/meshes

```auto
    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

```auto
	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

```auto
    	_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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 22, 2019, 3:15pm UTC](https://discourse.threejs.org/t/mesh-not-displayed-after-update/7688/2 "2019-05-22T15:15:47Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![rhae](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rhae/32/5679_2.png) [@rhae](https://discourse.threejs.org/u/rhae)\
**Post date:** [May 23, 2019, 5:55am UTC](https://discourse.threejs.org/t/mesh-not-displayed-after-update/7688/3 "2019-05-23T05:55:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 23, 2019, 7:55am UTC](https://discourse.threejs.org/t/mesh-not-displayed-after-update/7688/4 "2019-05-23T07:55:36Z")

</div>

> [@rhae](#):
>
> But how could this be?

The previous triangulation algorithm was fragile and had problems with various point sets. With `R89` we integrated a port of the [earcut](https://github.com/mapbox/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.