javascript - 有没有办法在不破坏网格对象的情况下交换与 ThreeJS 网格相关的图像？

Question

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

这段代码展示了我如何创建立方体:

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;
}

Answer 1

I'd like to be able to just swap out the JPG image assigned to one face of each cube.

您通常通过创建 Texture 的新实例并将其分配给 Material.map 来完成此操作。如果不再需要之前的纹理，建议通过调用Texture.dispose()释放相关内存。

这是一个完整的实例来说明纹理替换。

var camera, scene, renderer, mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 5;

    scene = new THREE.Scene();

    geometry = new THREE.BoxGeometry();
		
    var loader = new THREE.TextureLoader();
    var texture = loader.load( 'https://threejs.org/examples/textures/crate.gif' );
		
    var material = [
	        new THREE.MeshBasicMaterial( { map: texture } ),
	        new THREE.MeshBasicMaterial( { map: texture } ),
	        new THREE.MeshBasicMaterial( { map: texture } ),
	        new THREE.MeshBasicMaterial( { map: texture } ),
	        new THREE.MeshBasicMaterial( { map: texture } ),
	        new THREE.MeshBasicMaterial( { map: texture } )
    ];

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // change the material of one cube side by replacing its texture
		
    setTimeout( () => {
		
	        var newTexture = loader.load( 'https://threejs.org/examples/textures/colors.png' );
	        material[ 0 ].map = newTexture;
			
	        // in this case we do not call dispose() because crate.gif is still used by five other sides of the cube 
		
    }, 1000 );

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render( scene, camera );

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>

三.js R113