Clone geometry and meshes a-frame

bottle.js

import registerComponent from '../utils/registerComponent';

const bottle = {
  schema: {
    id: { type: 'string' }
  },

  init: function () {
    // create the label entity
    const labelEl = document.createElement('a-entity')
    labelEl.className = 'label'
    this._labelEl = this.el.appendChild(labelEl)
    this.createLabel()
  },

  /**
   * This gets the full mesh from gltf object that's already been loaded.
   * 
   */
  createLabel: function () {
    // get the mesh
    const mesh = this.el.getObject3D('mesh')
    const label = this._labelEl
    
    if (mesh && label) {
      // you can traverse the mesh to get to all of the 'layers'
      mesh.traverse(object => {
        if (object.name === '3MHCl') {
          const newMesh = object.clone()
          newMesh.material = new THREE.MeshBasicMaterial({ color: 0x000000, wireframe: false })
          label.setObject3D('mesh', newMesh)
        }
      })
    }
    /**
     * recursively try the create label again
     */
    else {
      setTimeout(this.createLabel.bind(this), 10)
    }
  }
}

export default registerComponent('bottle', bottle)