Web端720°VR全景新手入门踩坑记录:three.js+photo-sphere-viewer.js

VR/web 专栏收录该内容
0 篇文章 0 订阅

如果对three.js一无所知的同学可以先看一篇关于three.js的介绍(什么是three.js):

https://blog.csdn.net/doupi520/article/details/53907179

photo-sphere-viewer介绍可以直接看官网:

https://photo-sphere-viewer.js.org/

依赖包:

doT.js JS模板语言,类似于jade

uEvent(事件发射器库,设计模式这本书中讲过观察者模式)

观察者模式的介绍:

观察者模式又叫发布订阅模式(Publish/Subscribe),
它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,
这个主题对象的状态发生变化时就会通知所有的观察者对象,
使得它们能够自动更新自己。

使用观察者模式的好处:

支持简单的广播通信,自动通知所有已经订阅过的对象。
页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。
目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

D.js Promises/A+规范

挽起袖子撸起来:

1.

啥!?马上就报错了?

找了一下原因,是因为 Photo-Sphere-Viewer-master 文件夹下也有three.min.js这个文件,就是文件拿错了。

解决办法:

three.min.js 在 three.js-dev > build 下面

js/photo-sphere-viewer.min.js 在 photo-sphere-viewer 直接文件夹下面

2.报错没有了,但是新的问题又来了,页面内部还是一片空白,看看API文档

  2.1原来是少了size,把size添加进去以后就出现了黑色的宽580,高300的黑色框框,因为效果图没有意义,就不放了,但是黑色的框框还是没有图片

<script>
    var viewer = new PhotoSphereViewer({
        container: 'viewer',
        panorama: 'images/index/72.jpg',
        size:{
            width:580,
            height:300
        }
    });
</script>

  2.2原来是PSV只接受2:1比例的图片,接着来

2.3从官网上下载了一张6000*3000的图片,又报错了:

THREE.WebGLRenderer: image is not power of two (6000x3000). Resized to 4096x2048

这段话的意思是让我把6000*3000的图片改成4096*2048大小的,我一直以为是图片被自动重置为4096*2048,后来幻神帮我上了一堂英语课,Σ( ° △ °|||)︴

2.4改完了,还是黑屏一块,但是报错没有了,真是个悲惨的消息!

好了,到了这里解决问题的手段就非常尴尬了,只能场外求助了远在东海边缘的师尊,直接上代码吧。

老师指出的第一点,就是文件顺序排列方式不能乱来,PSV的css移到head里面是没有问题的,但是脚本里面

1:three.js

2:D.min.js

3:doT.min.js

4:uevent.min.js

5:photo-sphere-viewer.min.js

6:JQ脚本

其实这里多说一句,three.js官网的脚本和PSV官网的脚本,我下载下来一起用发现会报错,我不知道是不是版本的原因,如果遇到相同问题的同学可以加我QQ455988586,我把手里的脚本给你

鉴于好多同学问我要脚本的,我在这里放上百度云盘链接https://pan.baidu.com/s/17cbv-8o208E_RHEOwbwxTg

最后就是调用一下:

如果不想让图片自动旋转可以去掉后面的viewer.on...这段代码,具体API还是看官方文档。

另外附上一组网上的中文API调用接口:

  • 8
    点赞
  • 5
    评论
  • 34
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 岁月 设计师:pinMode 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值