運行時Three.js紋理/圖像更新

Question

我試圖通過從Select Form元素中選擇一個選項在運行時更改多維數據集圖像。運行代碼時，選擇後圖像會改變，但之前的立方體和圖像保留在場景中。

如何在更改材質/圖像/紋理時正確清除/刷新/更新場景。

<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

在選擇的變化，您可以更新現有的網狀紋理，也不需要刪除或創建新的網格：

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