Comment rendre de nombreuses images sur un côté de cube et définir leur position comme un mur de galerie?

Question

J'essaye de construire un mur de galerie via three.js. Jusqu'à présent, je Réussi rendu d'une image de chaque côté comme ceci:

J'ai tableaux mis à gauche et à droite. Cependant, je veux rendre plus d'images sur chaque mur plutôt que de remplir le mur entier avec une seule image. Quelque chose comme ceci:

Comment définir des positions arbitraires?

Voici mon code:

var scene = new THREE.Scene() 
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1,1000) 
    console.log(window.innerWidth, window.innerHeight) 
    var renderer = new THREE.WebGLRenderer() 
    renderer.setSize( window.innerWidth,window.innerHeight) 
    document.body.appendChild(renderer.domElement) 
    //keep object in view when resize window 
    window.addEventListener('resize', () => { 
     let width = window.innerWidth 
     let height = window.innerHeight 
     renderer.setSize(width, height) 
     camera.aspect = width/height 
     camera.updateProjectionMatrix() 
    }) 
    controls = new THREE.OrbitControls(camera, renderer.domElement) 
    controls.enableZoom = false 
    controls.enableRotate = true 
    controls.enablePan = false 

    var geometry = new THREE.BoxGeometry(2.5, 2, 4) 

    var cubeDice = [ 
     new THREE.MeshBasicMaterial({ color: 0x666666, side: THREE.DoubleSide }), 
     new THREE.MeshBasicMaterial({ color: 0x666666, side: THREE.DoubleSide }), 
     new THREE.MeshBasicMaterial({ color: 0x999999, side: THREE.DoubleSide }), 
     new THREE.MeshBasicMaterial({ color: 0x999999, side: THREE.DoubleSide }), 
     new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load('img/h5_1993.132.jpg'), side: THREE.DoubleSide }), 
     new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('img/unnamed.png'), side: THREE.DoubleSide }), 
    ] 

    // var material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true }) 
    var material = new THREE.MeshFaceMaterial(cubeDice) 
    var cube = new THREE.Mesh(geometry,material) 
    scene.add(cube) 

    // //set camera closer 
    camera.position.z = 1 
    var update = function(){ 
     cube.rotation.y += .005 
    } 
    var render = function(){ renderer.render(scene, camera) } 
    var GameLoop =() => { 
     requestAnimationFrame(GameLoop) 
     update() 
     render() 
    } 
    GameLoop() 

Answer 1

MeshFaceMaterial ne fait pas ce que vous voulez. Cela fait que chaque image remplit un visage entier (un mur entier).

Pour créer des images mobiles séparées sur le mur, il est préférable de créer un maillage individuel plus petit pour chaque image, puis de les positionner très près du mur. De cette façon, l'image peut couvrir tout le maillage, mais ne couvre pas l'ensemble du mur: