title: Javascript: How to change TextGeometry on click event?
body: <p>I am working on the <a href="https://threejs.org/examples/?q=text#canvas_geometry_text" rel="nofollow">ThreeJS geometry canvas text</a>. The text is suppose to change to another text after a html button is clicked. However, it's not working. How can I change the TextGeometry on click event?</p>
  
  <p>Here is what I'm working with: </p>
  
  <pre><code> var theText = "Hello three.js! :)";
  
          var hash = document.location.hash.substr( 1 );
  
          if ( hash.length !== 0 ) {
  
              theText = hash;
  
          }
  
          var geometry = new THREE.TextGeometry( theText, {
  
              font: font,
              size: 80,
              height: 20,
              curveSegments: 2
  
          });
  
          geometry.computeBoundingBox();
  
          var centerOffset = -0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
  
          var material = new THREE.MultiMaterial( [
              new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: 0.5 } ),
              new THREE.MeshBasicMaterial( { color: 0x000000, overdraw: 0.5 } )
          ] );
  
          var mesh = new THREE.Mesh( geometry, material );
  
          mesh.position.x = centerOffset;
          mesh.position.y = 100;
          mesh.position.z = 0;
  
          mesh.rotation.x = 0;
          mesh.rotation.y = Math.PI * 2;
  
          group = new THREE.Group();
          group.add( mesh );
  
          scene.add( group );
      }
        $('.button').on('click', function(e){
        theText.dispose();
  
         var menu= new Array('option1', 'option2', 'option3');
         theText=menu;
  
             });
  </code></pre>