admin管理员组文章数量:1560448
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://m.elefans.com/dianzi/1727441626a1115024.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论