5/18/2023 0 Comments 360 image viewer js![]() ![]() If you are looking for more information about Three.js, you can check the post Learn to create HTML5 3D games with Three.js thanks to Three.js Essentials book. PanoramaNumber = (panoramaNumber + 1) % panoramasArray.length pressing a key (actually releasing it) changes the texture map when the mouse is released, we turn manual control off Latitude = (event.clientY - savedY) * 0.1 + savedLatitude Longitude = (savedX - event.clientX) * 0.1 + savedLongitude 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) Heres a list of Sirv Media Viewer components you can use in a Vue. tSize(window.innerWidth, window.innerHeight) ĭ(renderer.domElement) Using Sirv Media Viewer with Vue.js Sirv Media Viewer is a modern tool for displaying 360 degree spins, images and videos, either separately or in a gallery. 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. If the arguments are not provided, it will use the defaults.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. moveRight(interval, speed) - Starts moving the image to the right at the indicated interval and speed.If the arguments are not provided, it will use the defaults. moveLeft(interval, speed) - Starts moving the image to the left at the indicated interval and speed.The plugin returns a public API with 3 methods: moving whenever the background image is being moved (whether drag & drop or via the controls). speed - How fast should the animation move? (Default 50ms). ![]()
0 Comments
Leave a Reply. |