I am trying to make series of 3D rooms with cubes. We can move from one room to another room. Please find the room designs spanshot.
User should be able to move from one cube room to another cube room with the help of keys as done in Games. I am new to three.js, but after looking into the documentations I was able to place the cubes in the same formats.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three JS Crash Course</title>
<style>
body{
margin: 0;
}
canvas{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="./js/three.min.js"></script>
<script src="./js/OrbitControls.js"></script>
<script>
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )
function onWindowResize () {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
}
window.addEventListener('resize', onWindowResize, false)
conrtrols = new THREE.OrbitControls( camera, renderer.domElement )
var group=new THREE.Object3D();
// create the shape
const geometry = new THREE.BoxGeometry( 1, 1, 1 )
const cubeMaterial = [
new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader().load('img/1.jpeg'), side: THREE.DoubleSide }),
new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader().load('img/1.jpeg'), side: THREE.DoubleSide }),
new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader().load('img/1.jpeg'), side: THREE.DoubleSide }),
new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader().load('img/1.jpeg'), side: THREE.DoubleSide }),
new THREE.MeshLambertMaterial( { map: new THREE.TextureLoader().load('img/1.jpeg'), side: THREE.DoubleSide }),
new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader().load('img/1.jpeg'), side: THREE.DoubleSide })
]
const material = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: false } )
const material1 = new THREE.MeshFaceMaterial(cubeMaterial)
// const material2 = new THREE.MeshFaceMaterial(cubeMaterial)
// const material3 = new THREE.MeshFaceMaterial(cubeMaterial)
material.side = THREE.BackSide;
const cube = new THREE.Mesh( geometry, material )
const cube1 = new THREE.Mesh( geometry, material1 )
const cube2 = new THREE.Mesh( geometry, material )
const cube3 = new THREE.Mesh( geometry, material )
const cube4 = new THREE.Mesh( geometry, material1 )
const cube5 = new THREE.Mesh( geometry, material )
const cube6 = new THREE.Mesh( geometry, material )
const cube7 = new THREE.Mesh( geometry, material1 )
const cube8 = new THREE.Mesh( geometry, material )
const cube9 = new THREE.Mesh( geometry, material )
cube.position.x = 0
cube1.position.x = 1
cube2.position.set(1, -1)
cube3.position.set(2, -1)
cube4.position.set(1, 1)
cube5.position.set(1, 2)
cube6.position.set(1, 3)
cube7.position.set(1, 4)
cube8.position.set(2, 4)
cube9.position.set(3, 4)
group.add(cube)
group.add(cube1)
group.add(cube2)
group.add(cube3)
group.add(cube4)
group.add(cube5)
group.add(cube6)
group.add(cube7)
group.add(cube8)
group.add(cube9)
scene.add(group)
camera.position.z = 5
const ambientLight = new THREE.AmbientLight( 0xFFFFFF, 1.0 )
scene.add( ambientLight )
function update () {
// cube.rotation.x += 0.01
// cube.rotation.y += 0.005;
}
function render () {
renderer.render( scene, camera )
}
function gameLoop () {
requestAnimationFrame( gameLoop )
update()
render()
}
gameLoop()
</script>
</body>
</html>
Any help is appreciated.