I'm working on creating a unique gallery wall using three.js. Currently, I have successfully rendered an image on each side like this:
My goal is to place multiple images on each wall instead of just one large image. Something similar to this concept:
How can I define arbitrary positions for the additional images?
Below is the code I have been using:
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()