Javascript：クリックイベントでTextGeometryを変更するにはどうすればよいですか？

Question

私はThreeJS geometry canvas textで作業しています。テキストは、htmlボタンがクリックされた後、別のテキストに変更されると考えられます。しかし、それは動作していません。クリックイベントでTextGeometryを変更するにはどうすればよいですか？あなたが別のTextGeometryを作成し、メッシュする必要があります

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; 

      }); 

Answer 1

：ここ

は、私が働いているものです。次に、クリックイベントで、前のテキストを新しいもので削除します。 reference- https://github.com/mrdoob/three.js/blob/master/src/core/Object3D.js#L332

については

function(){ 

         if (scene.remove(mesh_first); 
         scene.add(mesh_second); 

        });