侧边栏壁纸
博主头像
suke

ah?

  • 累计撰写 54 篇文章
  • 累计创建 38 个标签
  • 累计收到 103 条评论

目 录CONTENT

文章目录

使用Panolens渲染全景图片

suke
2020-05-05 / 0 评论 / 5 点赞 / 2,050 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2020-07-21,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

###简介
另一款集成three.js完成的web端360全景图片渲染插件Panolens

下载对应的js

<script src="js/three.min.js"></script>
<script src="js/panolens.min.js"></script>

对应的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<!--所有基础依赖引入-->

<script src="./js/three.min.js"></script>
<script src="./panolens/panolens.min.js"></script>

<style>
 html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}

body {
  background-color: blue;
  background-size: cover;
}

#container {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  width: 700px;
  height: 400px;
}

#btn_change_size {
  position: absolute;
  height: 30px;
  left: 10px;
  top: 10px;
}
</style>
<body>
<div id="container"></div>
<script>
 var panorama, viewer, container, infospot;
var containerBaseWidth = 700;
var containerBaseHeight = 400;
var deltaSize = 100;

container = document.querySelector( '#container' );

panorama = new PANOLENS.ImagePanorama( 'https://wangsr-oss-files.oss-cn-beijing.aliyuncs.com/images/%E5%85%A8%E6%99%AF/Bryce-Canyon-By-Jess-Beauchemin.jpg' );

infospot = new PANOLENS.Infospot( 350, PANOLENS.DataImage.Info );
infospot.position.set( 0, 0, -5000 );
infospot.addHoverText( 'Hello wjl', 30 );
panorama.add( infospot );

viewer = new PANOLENS.Viewer( { container: container } );
viewer.add( panorama );

</script>
</body>
</html>
5

评论区