'Traverse from one cube room to another cube in three.js

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. I added orbital controls in order to move the scene and go inside the cubes as well. But I am not able to traverse from one room to another.

Here are my codes. Please suggests how can I go from one cube room to another. Also suggest if my current implementations is correct or not.

<!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>

javascript three.js

Solution 1:^[1]

You need to explain better what the movement involves. Regarding "User should be able to move from one cube room to another" as you are considering orbit controls, seems that the user holds the camera that is used to render the scene and that is what you would like to move. OrbitControls does not seem to be the best aproach as you seem to be to just move and not orbit around a point, as the name of the class suggests and the documentation explains. Anyhow, what the constrols do to move the camera is this:

    function dollyOut( dollyScale ) {

        if ( scope.object.isPerspectiveCamera ) {

            scale /= dollyScale;

        } else if ( scope.object.isOrthographicCamera ) {

            scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) );
            scope.object.updateProjectionMatrix();
            zoomChanged = true;

        } else {

            console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
            scope.enableZoom = false;

        }

    }

Or function dollyIn( dollyScale ) to zoom in alternatively. You can check the full code. What that does is increase/decrease the radius of the camera to the target in the orbital movement. The target is the point the camera looks at and the pivot for the rotation.

For just raw movement without OrbitControls, just take a look to the Object3D and the Camera that extends from Object3D to apply a translation to the camera or the object you wish to translate.

Take a look to .translateOnAxis and the following .translateX, .translateY, .translateZ.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	rustyBucketBay

'Traverse from one cube room to another cube in three.js

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]