随笔- 159 文章- 0 评论- 9 阅读- 82138

Web3D学习之-----全景图预览插件photo-sphere-viewer

　　全景图展示的原理----大概知道一下~

　　等距圆柱投影：又称方格投影。

　　假想地球球面与一个圆柱面相切于赤道。并将球面上的所有经纬线投影到圆柱面上，经纬线被投影成两两互相垂直的直线，并且经距和纬距相等。

　　这个圆柱的侧面展开就是一个全景图，可以算出：侧面的长为一个圆周，高为半个圆周。所以全景图的长宽比为 2 : 1。

　　展示全景图：就是圆柱侧面投影的逆运算。把圆柱侧面贴到一个球上，我们在球中心看！

1、photo-sphere-viewer插件官网是：Photo Sphere Viewer

2、在html中使用：

<head>
        <meta charset="utf-8">
        <title>全景图</title>
        <style>
            #viewer {
                width: 1000px;
                height: 500px;
            }
        </style>
        <link rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css" />
    </head>
    <body>
        <div id="viewer"></div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
    <script>
        var viewer = new PhotoSphereViewer.Viewer({
            container: document.querySelector('#viewer'),
            panorama: 'img/11.jpeg'
        });
    </script>

3、在vue脚手架中使用

首先把插件下载到项目中：npm install photo-sphere-viewer

<template>
    <div id="viewer"></div>
</template>

<script>
    import * as PhotoSphereViewer from 'photo-sphere-viewer'
    import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
    export default {
        data() {
            return {
                factoryLink: require('../../assets/img/11.jpeg'), //测试全景图
            }
        },
        mounted() {
            //全景图展示
            var viewer = new PhotoSphereViewer.Viewer({
                container: document.querySelector('#viewer'),
                panorama: this.factoryLink
            });
        },
        methods: {
        },
    }
</script>

<style scoped>
    #viewer {
        width: 1200px;
        height: 600px;
    }
</style>