This repository has been archived by the owner on Feb 28, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
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