Longitude = (savedX - event.clientX) * 0.1 + savedLongitude
#MANDELBULB 3D 360 PANORAMA TUTORIAL MANUAL#
when the mouse moves, if in manual contro we adjust coordinates when the mouse is pressed, we switch to manual control and save current coordinates moving the camera according to current latitude (vertical movement) and longitude (horizontal movement)Ĭ = 500 * Math.sin((90 - latitude)) * s((longitude)) Ĭ = 500 * s((90 - latitude)) Ĭ = 500 * Math.sin((90 - latitude)) * Math.sin((longitude)) Latitude = Math.max(-85, Math.min(85, latitude))
limiting latitude from -85 to 85 (cannot point to the sky or under your feet) Var sphereMesh = new THREE.Mesh(sphere, sphereMaterial) ĭocument.addEventListener("mousedown", onDocumentMouseDown, false) ĭocument.addEventListener("mousemove", onDocumentMouseMove, false) ĭocument.addEventListener("mouseup", onDocumentMouseUp, false) geometry + material = mesh (actual object) Var sphereMaterial = new THREE.MeshBasicMaterial() Sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1)) Var sphere = new THREE.SphereGeometry(100, 100, 40) Var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000) Ĭamera.target = new THREE.Vector3(0, 0, 0) tSize(window.innerWidth, window.innerHeight) ĭ(renderer.domElement) Var panoramaNumber = Math.floor(Math.random()*panoramasArray.length) The theory is still the same: you map a panoramic photo inside an hollow sphere and place a camera inside it.ĭrag the mouse to manually rotate the camera, press any key or refresh the page to change texture.
And you can also change background photo. It’s something similar to one of the examples you will find in the official site, but my script is shorter and simpler. A long time ago I published a 360 degrees panorama viewer with Flare3D, and since I love these kinds of effects and photos like the ones made by Rick, I made the same thing using Three.js.