Three.js 纹理/图像在运行时更新 [英] Three.js texture / image update at runtime

问题描述

我试图在运行时通过从选择表单"元素中选择一个选项来更改立方体图像.运行代码时，选择后图像发生变化，但之前的立方体和图像保留在场景中.

更改材质/图像/纹理时如何正确清除/刷新/更新场景.

<form id = "changesForm">立方体图像:<br><select id = "cubeImage"><option value = "random">Random</option><option value = "image1">第一张图片</option><option value = "Image2">第二张图片</option></选择><br></表单><script type = "text/javascript">window.onload = windowLoaded;函数窗口加载(){如果(window.addEventListener){在里面();动画()；//document.getElementById('container').addEventListener('mousemove', containerMouseover, false);window.addEventListener('resize', onWindowResize, false );var cubeImage = document.getElementById('cubeImage');cubeImage.addEventListener("change", changeCubeImage, false);}否则如果(window.attachEvent){//在里面();//动画();//document.getElementById('container').attachEvent('onmousemove', containerMouseover);//window.attachEvent('onresize', onWindowResize);}函数 changeCubeImage(e){//e.preventDefault();var target = e.target;cubeImageCheck = target.value;createCube();}//其余代码 .....函数 createCube(){//图片var cubeImg;开关(立方体图像检查){案例随机":{//应该随机加载 2 张图像 - 做cubeImg = new THREE.ImageUtils.loadTexture("img1.jpg");休息;}案例'图像1':{cubeImg = new THREE.ImageUtils.loadTexture("image1.jpg");休息;}案例'图像2':{cubeImg = new THREE.ImageUtils.loadTexture("image2.jpg");休息;}}cubeImg.needsUpdate = true;//几何学var cubeGeometry = new THREE.CubeGeometry(200,200,200);;//材料var cubeMaterial = new THREE.MeshPhongMaterial({地图:cubeImg，侧面:三.双面，透明:真实，不透明度:1，着色:THREE.SmoothShading，光泽度:90，高光:0xFFFFFF});cubeMaterial.map.needsUpdate = true;//网cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);cubeMesh.needsUpdate = true;场景.添加(立方体网格)；}//休息 ....

解决方案

在选择更改时，您可以更新现有网格纹理，无需移除或创建新网格:

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

I am trying to change a cube image at run time by selecting an option from Select Form element. When running the code, the image changes after selecting, but the previous cube and image stays in the scene.

How I clear / refresh / update the scene properly when changing the material / image / texture.

<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 ....

解决方案

On select change you can update your existing mesh texture, don't need to remove or create new mesh :

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

这篇关于Three.js 纹理/图像在运行时更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！