介绍几款生成360全景图的js插件
随着今年疫情的出现,网上看房的一波浪潮兴起,360度全景照片又火了一把,今天给大家介绍几种js生成360全景照片的方法。
一、Photo Sphere Viewer
这个是基于three.js的全景插件 photo-sphere-viewer.js,方便好用,只要将全景图片路径设置好就好了,示例代码如下:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=three|uevent.min|doT.min|polyfill.min&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { use(["photo-sphere-viewer.min", "photo-sphere-viewer.min"], function() { var viewer = new PhotoSphereViewer({ container: 'viewer', panorama: 'http://repo.bfw.wiki/bfwrepo/image/panorama.jpg' }); }); }); </script> <style> #viewer { width: 100vw; height: 100vh; } </style> </head> <body> <div id="viewer"></div> </body> </html>
二、Watch3D
Watch3D采用的是css的特性,利用perspective和transform的属性来实现,相比较webgl上手比较简单,他不仅实现了360度的全景,而且实现了多个场景标签的相互切换,非常方便,完整示例代码如下:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <script type="text/javascript"> bready(function() { use(["watch3D.min", "watch3D.min"], function() { let layer = document.querySelector(".layer"); let w3d = new watch3D({ wrapper: ".wrapper", autoplay: true, width: 5000, height: 2500, num: 12, maxY: 25, tips: { 0: { styles: { "height": "100px", "width": "100px", "background-color": "#6cf", "text-align": "center", "margin-right": "10px", "color": "#fff", "cursor": "pointer" }, content: "风景1", callback: function(e) { w3d.pause(); w3d.changeData({ num: 10, resource: "http://repo.bfw.wiki/bfwrepo/image/5ed629d01fa50.png" }, true); } }, 1: { styles: { "height": "100px", "width": "100px", "background-color": "#6cf", "text-align": "center", "margin-right": "10px", "color": "#fff" }, content: "美女", callback: function(e) { w3d.pause(); w3d.changeData({ num: 15, resource: "http://repo.bfw.wiki/bfwrepo/image/5ed629fb039b4.png" }, true); } }, 3: { styles: { "height": "100px", "width": "100px", "background-color": "#6cf", "text-align": "center", "margin-right": "10px", "color": "#fff", "font-size": "24px" }, content: "自动播放", callback: function(e) { w3d.play(); } }, 4: { styles: { "height": "100px", "width": "100px", "background-color": "#6cf", "text-align": "center", "margin-right": "10px", "color": "#fff" }, content: "卧室", callback: function(e) { w3d.pause(); w3d.changeData({ num: 16, resource: "http://repo.bfw.wiki/bfwrepo/image/5ed629466cc42.png" }, true); } }, 5: { styles: { "height": "100px", "width": "100px", "background-color": "#6cf", "text-align": "center", "margin-right": "10px", "color": "#fff", "font-size": "24px" }, content: "暂停", callback: function(e) { w3d.pause(); } } }, resource: "http://repo.bfw.wiki/bfwrepo/image/panorama.jpg", loadstart: function() { layer.style.display = "block"; }, loadend: function(data) { layer.style.display = "none"; } }); }); }); </script> <style> .layer { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; } .layer-text { position: absolute; left: 50%; top: 50%; width: 300px; text-align: center; font-size: 16px; color: #fff; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } </style> </head> <body> <div class="layer"> <div class="layer-text"> 图片加载中....... </div> </div> <div class="wrapper"></div> </body> </html>
三、threejs
threejs可以用6张不同的方向的场景图片拼接成一个720度的交互全景效果,比上面2种的体验更棒,但是需要6张不同方位的图片,示例代码如下:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script id="bfwone" data="dep=three&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script> <style> body { background-color: #000000; margin: 0; cursor: move; overflow: hidden; } .surface { width: 1026px; height: 1026px; background-size: cover; position: absolute; } .surface .bg { position: absolute; width: 1026px; height: 1026px; } .m { width: 200px; padding: 20px; position: fixed; z-index: 999; font-weight: bold; color: #FFFFFF; } </style> </head> <body> <div class="m"> 720度全景展示 </div> <div> <div id="surface_0" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/posx.jpg" alt=""> </div> <div id="surface_1" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/negx.jpg" alt=""> </div> <div id="surface_2" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/posy.jpg" alt=""> </div> <div id="surface_3" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/negy.jpg" alt=""> </div> <div id="surface_4" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/posz.jpg" alt=""> </div> <div id="surface_5" class="surface"> <img class="bg" src="http://editor.bfw.wiki/bfwrepo/image/negz.jpg" alt=""> </div> </div> <script type="text/javascript"> var camera, scene, renderer; var geometry, material, mesh; var target; var lon = 90, lat = 0; var phi = 0, theta = 0; var touchX, touchY; bready(function() { use(['CSS3DRenderer.min'], function() { target = new THREE.Vector3(); init(); animate(); }); }); function init() { camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); scene = new THREE.Scene(); var sides = [{ position: [-512, 0, 0], rotation: [0, Math.PI / 2, 0] }, { position: [512, 0, 0], rotation: [0, -Math.PI / 2, 0] }, { position: [0, 512, 0], rotation: [Math.PI / 2, 0, Math.PI] }, { position: [0, -512, 0], rotation: [-Math.PI / 2, 0, Math.PI] }, { position: [0, 0, 512], rotation: [0, Math.PI, 0] }, { position: [0, 0, -512], rotation: [0, 0, 0] }]; for (var i = 0; i < sides.length; i++) { var side = sides[i]; var element = document.getElementById("surface_" + i); element.width = 1026; var object = new THREE.CSS3DObject(element); object.position.fromArray(side.position); object.rotation.fromArray(side.rotation); scene.add(object); } renderer = new THREE.CSS3DRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); document.addEventListener('mousedown', onDocumentMouseDown, false); document.addEventListener('wheel', onDocumentMouseWheel, false); document.addEventListener('touchstart', onDocumentTouchStart, false); document.addEventListener('touchmove', onDocumentTouchMove, false); window.addEventListener('resize', onWindowResize, false); } function animate() { requestAnimationFrame(animate); lat = Math.max(-85, Math.min(85, lat)); phi = THREE.Math.degToRad(90 - lat); theta = THREE.Math.degToRad(lon); target.x = Math.sin(phi) * Math.cos(theta); target.y = Math.cos(phi); target.z = Math.sin(phi) * Math.sin(theta); camera.lookAt(target); renderer.render(scene, camera); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function onDocumentMouseDown(event) { event.preventDefault(); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('mouseup', onDocumentMouseUp, false); } function onDocumentMouseMove(event) { var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; lon -= movementX * 0.1; lat += movementY * 0.1; } function onDocumentMouseUp(event) { document.removeEventListener('mousemove', onDocumentMouseMove); document.removeEventListener('mouseup', onDocumentMouseUp); } function onDocumentMouseWheel(event) { camera.fov += event.deltaY * 0.05; camera.updateProjectionMatrix(); } function onDocumentTouchStart(event) { event.preventDefault(); var touch = event.touches[0]; touchX = touch.screenX; touchY = touch.screenY; } function onDocumentTouchMove(event) { event.preventDefault(); var touch = event.touches[0]; lon -= (touch.screenX - touchX) * 0.1; lat += (touch.screenY - touchY) * 0.1; touchX = touch.screenX; touchY = touch.screenY; } </script> </body> </html>
网友评论0