介绍几款生成360全景图的js插件

介绍几款生成360全景图的js插件

介绍几款生成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>




{{collectdata}}

网友评论0

阿里云香港主机,免备案大优惠 打开浏览器开发html,体验云开发的乐趣bfweditor 打开浏览器即可开发php,bfwstudio
其他文章