验证码: 看不清楚,换一张 查询 注册会员,免验证
  • {{ basic.site_slogan }}
  • 打开微信扫一扫,
    您还可以在这里找到我们哟

    关注我们

web前端如何实现360度全景效果

阅读:887 来源:乙速云 作者:代码code

web前端如何实现360度全景效果

使用插件:photo-sphere-viewer

实现代码:



 
 
 cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css" />
 
 


 
 

 


文件目录:

web前端如何实现360度全景效果

注意事项:

全景图路径如下:

panorama: './img/44.jpg',

直接本地运行,也就是在浏览器中 file:// 开头,上面的路径是行不通的。存在跨域问题。

解决图片加载不出的问题:

启动服务器,运行文件。

方法一:

通过 http-server 来实现,具体操作如下:

  1. 终端执行命令:npm install http-server -g 全局安装 http-server

  2. 执行命令:http-server 启动服务,启动后如下,会有可访问链接

web前端如何实现360度全景效果

  1. cmd + 点击,跳转浏览器如下页面,就可以访问相应的 html 页面了。(这样访问,就可以加载出本地的图片资源了)

web前端如何实现360度全景效果

方法二:

通过 vscode 的 live server 扩展运行文件

  1. 安装扩展

web前端如何实现360度全景效果web前端如何实现360度全景效果

  1. 相应文件右键,选择 open with live server,即可跳转到 web前端如何实现360度全景效果

web前端如何实现360度全景效果

分享到:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: hlamps#outlook.com (#换成@)。
相关文章
{{ v.title }}
{{ v.description||(cleanHtml(v.content)).substr(0,100)+'···' }}
你可能感兴趣
推荐阅读 更多>