360 Image

看到新浪微博最新开始有全景图的这个功能，其实我也挺感兴趣的，所以，找找有没有开源的库实现一下。

基于 Kaleidoscope 的 Demo

<div id="container360"></div>
<script src="https://cdn.rawgit.com/thiagopnts/kaleidoscope/master/dist/kaleidoscope.min.js"></script>
<script>
  var viewer = new Kaleidoscope.Image({
    source: './360.jpg',
    containerId: '#container360',
    height: window.innerHeight,
    width: window.innerWidth,
  });
  viewer.render();

  window.onresize = function() {
    viewer.setSize({height: window.innerHeight, width: window.innerWidth});
  };
</script>

基于 aframe 的 Demo

全屏体验

<script src="https://aframe.io/aframe/dist/aframe-master.min.js"></script>
<a-scene>
  <a-sky src="./360.jpg" rotation="0 -130 0"></a-sky>
</a-scene>

资源声明

图片来源：
开源库：thiagopnts/kaleidoscope
开源库：aframevr/aframe

基于 Kaleidoscope 的 Demo

基于 aframe 的 Demo

资源声明

Comments