Cập nhật kết cấu/hình ảnh Three.js tại thời gian chạy

Question

Tôi đang cố gắng thay đổi hình khối trong thời gian chạy bằng cách chọn một tùy chọn từ phần tử Chọn Biểu mẫu. Khi chạy mã, hình ảnh thay đổi sau khi chọn, nhưng hình khối và hình ảnh trước đó vẫn nằm trong cảnh.

Cách tôi xóa/làm mới/cập nhật cảnh đúng cách khi thay đổi tài liệu/hình ảnh/kết cấu.

<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 thay đổi lựa chọn bạn có thể cập nhật kết cấu lưới hiện tại của bạn, không cần phải loại bỏ hoặc tạo lưới mới:

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