Search code examples
three.jsaframe

Three Update ConvexGeometry dynamically

I'm using THREE.js in Aframe and attempting to build a mesh by clicking points.

This is working, however the I'm struggling to update the Geometry to show the changes. 

this._shapeEl = make('a-entity', {
  material: {color: 'blue'},
  geometry: this._vertices.length > 3 ? new THREE.ConvexGeometry( this._vertices ) : new THREE.Geometry(),
}, this.el)

onClick: 

var target = e.detail.intersection.point
this.el.object3D.worldToLocal(target)

make('a-sphere', {
  color: darkViolet,
  radius: 0.01,
  position: target,
}, this.el)

this._vertices.push(target)

if(this._vertices.length > 3){
  this._shapeEl.object3D.geometry = new THREE.ConvexGeometry( this._vertices )
  this._shapeEl.object3D.geometry.dynamic = true
}

The spheres show, and the points are getting added but the _shapeEl isn;t changing from a blue cube.

Solution

  • Thanks @Mugen87 that was useful.

    The answer is to use the object3Dmap.mesh

      this._shapeEl.object3DMap.mesh.geometry.dispose()
  this._shapeEl.object3DMap.mesh.geometry = new THREE.ConvexGeometry( this._vertices )