摸索js的3d全景

先我在网上找到了一个例子，http://silali.vicp.net/three/emaple.html
完美实现3d全景，在详细查看这个例子后，发现他在手机上运行并不流畅，而且显不全并会卡顿。
我了解他是用threejs中的CSS3DRenderer实现的，我猜想卡顿多半是操作dom元素太快了，所以会卡顿，但是显示不完全的原因还并不知道（后面的摸索知道了与perspective的设置数值有关）。
为此，我考虑到自己来用css3来渲染这个场景，只要我对dom的元素操作不要太多太快，应该性能还是能够过得去的。

css3渲染场景

实现地址：http://silali.vicp.net/three/1.html
css3 translate3d与rotateY对每个面进行定位
但是问题出现了，连接点看起来并不平滑，能够明显看出转角，还有两张图片的相交处有明显的白线，这个白线在iphone没有，但是android4.4.4这种高版本android机上同样存在。
我想这个css3的定位方式，应该是错误的，可能还需要skewX。
我想到使用three初始化一个立方体盒子，把视角放到中间这里再给每个面渲染图片不就行了吗？

three渲染立方体盒子

我先渲染了一个盒子，然后把视角一点点的拉近，直到进入盒子内部并到到达盒子中心位置，这时我发现渲染出来的是一片黑，我猜想是不是没有光源，查看api添加光源，同样的结果。
直接失败。地址：http://silali.vicp.net/three/2.html

重回例子

分析例子，这个例子使用CSS3DRenderer来渲染了一个全景出来，但是手机浏览器的css3性能并不足够支撑。
那我需要做的就是CSS3DRenderer换成一个高性能的WebGLRenderer。

WebGLRenderer渲染器

我把CSS3DRenderer进行渲染的6张图片换成了6个three面元素（同时在面上添加图片的材质），大小位置都和例子一样，成功渲染。地址：http://silali.vicp.net/three/3.html
测试手机性能，同样很好。
我进一步添加代码进行测试手势

手势测试

拖动的测试很成功，但是放大缩小不顺利，在浏览器上调用放大缩小的方法没有问题，但是到了手机浏览器上直接使用手势进行放大缩小就会再次卡屏，我的考虑是性能不够。
所以就放弃了放大缩小的操作，操作还没完。
http://silali.vicp.net/three/3.html

调用浏览器的重力感应，实现模拟现实的3d全景

想到调用重力感应，我就立马去查看api，尝试理解重力感应的3个参数，没能理解得到，而且这个参数在手上抖动太猛烈了，过于灵敏。
还好我偶然间遇到了threejs中的DeviceOrientationControls这个库，他帮我把这个问题都解决了，完美。
http://silali.vicp.net/three/4.html

3d全景找东西

在3d全景中找东西，这个需求主要有两个难题。
第一个随机定位，我的解决方案是2次随机，在全景中有6个面，先从6个面中随机1个出来，然后在这个面中进行二维随机定位，这样就方便多了。
第二个物品查找，详细说明下，当用户点击屏幕，我需要进行判断，这次点击是否点击到了我的指示的物品。我的解决方案是使用Three.Raycaster，判断有几个对象与这条射线相交，现在因为只有背景和1个物品，所以当相交的数目大于2也就是对了。
http://silali.vicp.net/three/4-1.html