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;

Answer 2

使用加载程序的完整示例：

首先，创建您的网格并应用任何材质

//Add SPHERE
this.earthMesh = new THREE.Mesh(
  new THREE.SphereBufferGeometry(3, 35, 35),
  new THREE.MeshPhongMaterial()
);
this.scene.add(this.earthMesh);

现在加载您的纹理图像并将其应用到网格材料上

//LOAD TEXTURE and on completion apply it on SPHERE
new THREE.TextureLoader().load(
  "https://images.pexels.com/photos/1089438/pexels-photo-1089438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
  texture => {
    //Update Texture
    this.earthMesh.material.map = texture;
    this.earthMesh.material.needsUpdate = true;
  },
  xhr => {
    //Download Progress
    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  },
  error => {
    //Error CallBack
    console.log("An error happened" + error);
  }
);

进度和错误回调是可选的

运行时更新Three.js纹理/图像

2 个答案: