キューブ側で多くの画像をレンダリングし、ギャラリーの壁のようにその位置を定義するにはどうすればよいですか？

Question

私はthree.js経由でギャラリーの壁を構築しようとしています。これまでのところ私はこのようなそれぞれの側に画像をレンダリング成功しました：

私は左右に絵を入れています。しかし、壁全体を単一の画像で塗りつぶすのではなく、各壁にもっと多くの画像を描画したい。このような何か：

がどのように任意の位置を設定することができますか？

は、ここに私のコードです：

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は、あなたがやりたいことはありません。これは、各画像を顔全体（壁全体）でいっぱいにします。

壁に別々の移動可能な画像を作成するには、個々の画像ごとに小さなメッシュを作成し、壁のすぐ近くに配置する方がよいでしょう。