Skip to content
This repository has been archived by the owner on Feb 28, 2023. It is now read-only.

How to create panorama

Maksim Nedoshev edited this page Aug 13, 2019 · 1 revision

Import engine and texture

    let engine = new Bronze.Engine(someDivHTMLElementForDrawing)

    let camera = new Bronze.Camera()
    camera.setFieldOfView(60) // Set any fieldOfView for panorama.
    camera.collisions = false // Off camera collisions for more perfomance.
    engine.setCamera(camera)

    let moonLight = new Bronze.Light(engine) // Default light. Just need it.
    moonLight.setPosition(-500, 500, 2500)
    moonLight.range = 5000
    moonLight.on()

    let skyboxTexture = new Bronze.CubeTexture(engine) // CubeTexture for panorama.
    skyboxTexture.setImagesFromPath(skyboxImageXP, skyboxImageXN, skyboxImageYP, skyboxImageYN, skyboxImageZP, skyboxImageZN)

    let skybox = new Bronze.Skybox(engine); // Skybox for 3d panorama.
    skybox.setTexture(skyboxTexture); // Set our texture for object.
    skybox.animate(60, () => {  // Some animation if needed.
      skybox.rotate(0, 0.02, 0)
    })

    let controls = new Bronze.Controls(engine) // If we need to move panorama, we can create Controls object.
    controls.setControlFunction(() => {
        if (controls.mouse.buttons[0] || controls.pointerLocked || controls.touch.actionBeforeMove == 'click') {
          // If we want to move panorama only in left mouse click (or touch for mobiles)
          camera.rotate(controls.mouse.movement.y / 10, controls.mouse.movement.x / 10, 0) // Moving camera according to mouse movement.

          // Here we restrict rotation if the X axis rotates below 25 and more than 320 degrees, returning the camera position back.
          let xRot = Math.abs(Bronze.Math.dropCircle(camera.rotation.x))
          if (xRot >= 25 && xRot <= 320) {
            camera.rotate(-controls.mouse.movement.y / 10, 0, 0)
          }
        }
    })

    engine.run() // Runing engine
Clone this wiki locally