Javascript 有没有一种方法可以在不破坏网格对象的情况下交换与ThreeJS网格关联的图像？_Javascript_Memory Management_Three.js

Javascript 有没有一种方法可以在不破坏网格对象的情况下交换与ThreeJS网格关联的图像？

javascript memory-management three.js

Javascript 有没有一种方法可以在不破坏网格对象的情况下交换与ThreeJS网格关联的图像？,javascript,memory-management,three.js,Javascript,Memory Management,Three.js,我有一个3JS游戏，使用一组立方体作为游戏部件。每个立方体上的一个面承载一个通过特定JPG URL加载的自定义图像。当用户开始一个新游戏时，我希望能够交换分配给每个立方体一个面的JPG图像。有可能以某种方式做到这一点吗？还是我必须完全拆除并重建每个立方体？当然，我想避免这样做，因为我的网络搜索让我得出结论，正确清理ThreeJS场景及其占用的GPU资源不是一件简单的事情（包括必须释放对网格任何部分或it组件的所有引用）此代码显示了如何创建多维数据集： function makeCardCube

我有一个3JS游戏，使用一组立方体作为游戏部件。每个立方体上的一个面承载一个通过特定JPG URL加载的自定义图像。当用户开始一个新游戏时，我希望能够交换分配给每个立方体一个面的JPG图像。有可能以某种方式做到这一点吗？还是我必须完全拆除并重建每个立方体？当然，我想避免这样做，因为我的网络搜索让我得出结论，正确清理ThreeJS场景及其占用的GPU资源不是一件简单的事情（包括必须释放对网格任何部分或it组件的所有引用）

此代码显示了如何创建多维数据集：

function makeCardCube(cardImageUrl, textureBackSide, locX, locY, locZ, width, height) {
    let thickness = 0.01 * width;
    let cubeGeometry = new THREE.BoxBufferGeometry(width, thickness, height);
    let loader = new THREE.TextureLoader();

    let materialArray = [
        new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
        new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
        // Card face.
        new THREE.MeshBasicMaterial( { map: loader.load(cardImageUrl) } ),
        // Card back side.
        new THREE.MeshBasicMaterial(
            {
                map: textureBackSide
            }
        ),

        new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
        new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
    ];

    cube = new THREE.Mesh( cubeGeometry, materialArray );
    cube.position.set(locX, locY, locZ);
    // Flip the card 90 degrees "up" around the X axis so the card faces the camera.
    cube.rotateX(THREE.Math.degToRad(90));

    return cube;
}

我希望能够交换分配给每个立方体一个面的JPG图像

通常通过创建

纹理的新实例

并将其指定给

Material.map

来完成此操作。如果不再需要上一个纹理，建议通过调用

texture.dispose（）

释放相关内存

下面是一个完整的实例来说明纹理替换

var摄影机、场景、渲染器、网格；
init（）；
制作动画（）；
函数init（）{
摄像头=新的三个透视摄像头（70，窗口内宽/窗口内高，0.01,10）；
摄像机位置z=5；
场景=新的三个。场景（）；
几何体=新的三个.BoxGeometry（）；
var loader=new THREE.TextureLoader（）；
var texture=loader.load（'https://threejs.org/examples/textures/crate.gif' );
可变材料=[
新的3.MeshBasicMaterial（{map:texture}），
新的3.MeshBasicMaterial（{map:texture}），
新的3.MeshBasicMaterial（{map:texture}），
新的3.MeshBasicMaterial（{map:texture}），
新的3.MeshBasicMaterial（{map:texture}），
新的3.MeshBasicMaterial（{map:texture}）
];
网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//通过替换立方体一侧的纹理来更改其材质
设置超时（（）=>{
var newTexture=loader.load（'https://threejs.org/examples/textures/colors.png' );
材质[0]。贴图=新纹理；
//在本例中，我们不调用dispose（），因为立方体的其他五个面仍在使用crate.gif
}, 1000 );
}
函数animate（）{
请求动画帧（动画）；
网格旋转.x+=0.01；
网格旋转y+=0.02；
渲染器。渲染（场景、摄影机）；
}