运行时更新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;