Three.js Texture/Image-Aktualisierung zur Laufzeit

Question

Ich versuche, ein Cube-Bild zur Laufzeit zu ändern, indem Sie eine Option aus dem Element Formular auswählen auswählen. Wenn Sie den Code ausführen, ändert sich das Bild nach der Auswahl, aber der vorherige Cube und das vorherige Bild bleiben in der Szene.

Wie ich die Szene richtig lösche/aktualisiere/aktualisiere, wenn ich das Material/Bild/Textur ändere.

<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 wählen ändern Sie Ihre vorhandene Meshstruktur aktualisieren können, brauchen keine neues Netz zu entfernen oder zu erstellen:

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