web实现全景图的交互展示

最新推荐文章于 2024-04-13 19:26:13 发布

ky_xin

最新推荐文章于 2024-04-13 19:26:13 发布

阅读量9k

点赞数 12

文章标签： web

本文链接：https://blog.csdn.net/weixin_44858959/article/details/108139036

版权

不需要学习其他知识，小白也能实现全景图AR展示

自己对于we前端开发来说也属于新手，这也是本人接到的第一个项目技术要求，尝试了许多次也算有个折磨的过程，我的失败经验应该能解决大部分人对于全景图的展示：

第一种方案：three.js 作为作为前端界全景、3D大哥，无论是哪里搜索，只要搜索全景的插件，都会搜到这位大哥。
官方地址：three.js官网
官方学习地址：https://threejs.org/examples/#css3d_panorama
源码：简单，引入three，引入3d
实现：2:1的全景在PC端，可以预览，左右上下鼠标移动
优点：可调节细节比较多，对于技术大佬这才是展示拳脚的地方。
缺点：PC端不能放大缩小，图片需要裁剪六张，移动端，不能放大缩小，更加糟糕的是渲染滴很差，手机也是如此（也有可能是我技术不到位）
（因为尝试了几个效果都不好，而且代码也比较长，有需要的可以去官网看看，讲的也很详细）
第二种方案：A-frame
官方地址：A-frame官方地址
官方案例：案例展示
源码：真是太简单了，引入aframe 框架<a-sky></a-sky>
实现：2:1的全景在PC端，可以预览，左右上下鼠标移动，还支持VR模式。
优点：简单方便，就真的操作无脑
缺点：PC端不能放大缩小，移动端只能左右移动，不能放大缩小，不能上下滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1