photo-sphere-viewer.js 720度全景展示插件基于three.js-BFW插件库

photo-sphere-viewer.js 720度全景展示插件基于three.js

photo-sphere-viewer.min.js 720度全景展示插件基于three.js，

支持360°×180° 球形图片，支持6个面的裁剪图片

支持canvas渲染，只要引入这两个文件CanvasRenderer.js，Projector.js

支持手机陀螺仪，只要引入DeviceOrientationControls.js

支持vr，只要引入DeviceOrientationControls.js,StereoEffect.js,NoSleep.js

第一步引入bfwone 加载依赖项three|uevent.min|doT.min|polyfill.min

three.js >= 0.85 + examples files
doT.js
uEvent
promise-polyfill for IE compatibility

第二步执行插件代码

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

<style>
  #viewer {
    width: 100vw;
    height: 50vh;
  }
</style>

<script>
  var viewer = new PhotoSphereViewer({
    container: 'viewer',
    panorama: 'path/to/panorama.jpg'
  });
</script>

完整示例如下，可在线运行编辑

<!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="//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>

官网：https://photo-sphere-viewer.js.org/

photo-sphere-viewer.js 720度全景展示插件基于three.js

网友评论0

three.js

photo-sphere-viewer.min.js

ar.js

scenejs.js

3d-tv.js