Trama Three.js/aggiornamento dell'immagine in fase di esecuzione

Question

Sto tentando di modificare un'immagine cubo in fase di esecuzione selezionando un'opzione dall'elemento Seleziona modulo. Quando si esegue il codice, l'immagine cambia dopo la selezione, ma il cubo e l'immagine precedenti rimangono nella scena.

Come si cancella/aggiorna/aggiorna correttamente la scena quando si cambia materiale/immagine/trama.

<div id = "container"></div> 

<form id = "changesForm"> 
    Cube Image: 
    <br> 
    <select id = "cubeImage"> 
     <option value = "random">Random</option> 
     <option value = "image1">First Image</option> 
     <option value = "Image2">Second Image</option> 
    </select> 
    <br> 
</form> 

<script type = "text/javascript"> 

window.onload = windowLoaded; 

function windowLoaded(){ 
    if (window.addEventListener){ 
     init(); 
     animate(); 
          //document.getElementById('container').addEventListener('mousemove', containerMouseover, false); 
    window.addEventListener('resize', onWindowResize, false); 
    var cubeImage = document.getElementById('cubeImage'); 
    cubeImage.addEventListener("change", changeCubeImage, false); 
    } 
    else if (window.attachEvent){ 
     //init(); 
     //animate(); 
        //document.getElementById('container').attachEvent('onmousemove', containerMouseover); 
     //window.attachEvent('onresize', onWindowResize); 
    } 

function changeCubeImage(e){ 
    //e.preventDefault(); 
    var target = e.target; 
    cubeImageCheck = target.value;  
    createCube();    
} 

// rest code ..... 

function createCube(){ 
    //image 
    var cubeImg; 

    switch (cubeImageCheck){ 
     case 'random': { 
      // should load the 2 images random - to do 
      cubeImg = new THREE.ImageUtils.loadTexture("img1.jpg"); 
      break; 
     } 
     case 'image1': { 
      cubeImg = new THREE.ImageUtils.loadTexture("image1.jpg"); 
      break; 
     } 
     case 'image2': { 
      cubeImg = new THREE.ImageUtils.loadTexture("image2.jpg"); 
      break; 
     } 
} 

cubeImg.needsUpdate = true; 


// geometry 
var cubeGeometry = new THREE.CubeGeometry(200,200,200);; 
// material 
var cubeMaterial = new THREE.MeshPhongMaterial({ 
    map: cubeImg, 
    side:THREE.DoubleSide, 
    transparent: true, 
    opacity:1, 
    shading: THREE.SmoothShading, 
    shininess: 90, 
    specular: 0xFFFFFF 
}); 

cubeMaterial.map.needsUpdate = true; 

//mesh 
cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial); 
cubeMesh.needsUpdate = true; 
scene.add(cubeMesh); 
} 

// rest .... 

Answer 1

On Selezionare cambiamento è possibile aggiornare il tessuto a maglia esistente, non hanno bisogno di rimuovere o creare nuova maglia:

mesh.material.map = THREE.ImageUtils.loadTexture(src); 
mesh.material.needsUpdate = true;