javascript - 如何在立方体一侧渲染许多图像并像画廊墙一样定义它们的位置？

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 不符合您的要求。它使每个图像填满整个脸(整面墙)。

要在墙上制作单独的可移动图像，最好为每个图像制作单独的较小网格，然后将它们放置在非常靠近墙壁的位置。这样图像可以覆盖整个网格，但不会覆盖整个墙壁: