首页 1 2 3 4 5 6 7

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

如果对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+规范

挽起袖子撸起来：

啥！？马上就报错了？

找了一下原因，是因为 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