admin管理员组文章数量:1564192
Threejs+lumion 360全景图
- Threejs+lumion 360全景图
- 主要是技术实现步骤
- lumion部分:
- threejs部分:
Threejs+lumion 360全景图
作者:Han&Yen
最近在研究threejs,看到lumion生成的全景图,突发奇想,要是这个两个可以结合下,在web端就可以看到在线的全景360°图片了,就花了点时间和小韩同学一起研究了下,最后的效果如下:
主要是技术实现步骤
lumion部分:
1、 选择360全景操作界面,选择要生成全景图片位置,调整好角度,点击商店全景,锁定全景照片位置,最多可锁定10张全景照片位置
2、可一次性将10张同时生成360全景照片
3、输出品质图片大小均可根据需求进行设置
4、 点击渲染所有的360全景,选择要渲染的图片尺寸,放置自己制定路径,所有全景照片就生成了
threejs部分:
主要是用了Photo Sphere Viewer这个网上的库(photo-sphere-viewer.js)集成代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="testCube/photo-sphere-viewer.min.css"/>
<script src="testCube/three.min.js"></script>
<script src="testCube/browser.min.js"></script>
<script src="testCube/photo-sphere-viewer.min.js"></script>
<style>
/* the viewer container must have a defined size */
body,html{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#viewer {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="viewer"></div>
<script>
var viewer = new PhotoSphereViewer.Viewer({
container: document.querySelector('#viewer'), //必填,放置全景图的dom元素
panorama: 'testCube/test.jpg', //必填,全景图载入路径
navbar:false // 控制导航栏的显示隐藏
});
</script>
</body>
</html>
大功告成~!
BIM树洞
做一个静谧的树洞君
用建筑的语言描述IT事物;
用IT的思维解决建筑问题;
共建BIM桥梁,聚合团队。
本学习分享资料不得用于商业用途,仅做学习交流!!如有侵权立即删除!!
-
微信公众号: BIM树洞
-
知乎专栏:BIM树洞
-
气氛组博客:http://www.31bim
-
BIM应用及咨询,CAD,Revit, OpenGL,图形开发交流,加Q群1083064224
版权声明:本文标题:Threejs+lumion 360全景图 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727441626a1115024.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论