之前我就已经写过这样的东西,今天通过另一种方式实现.
代码语言:javascript复制利用鱼眼图片制作VR全景漫游:
http://www.jianshu.com/p/d2f31771a072
效果图:
1.gif
1、VR场景漫游
关于使用工具切图的方法不再讲述,请看上面的链接文章,里面就有就有第一种方法,通过天空盒子制作.虽然是基于HTC,但是对于CardBoard同样适用.
2、实现场景漫游
首先将图片修改为CubeMap,其原理就是六张图贴起来
可以看到图片转换后还是很大的
创建方块体,修改内部材质为具有CubeMap贴图的材质球
将摄像机导入
最后打包,编译成手机APK文件,运行到手机上.效果还不错. 注意:手机的横竖屏要区分开,然后要通过手机盒子进行.
3、全景相册
实现原理
全景相册-其实通过制作上面的功可以知道,我们只需要切换材质球或者图片
1-两种方式:
(1)切换材质: 这样就简单了,但是我们刚才看到材质球转换后大约是16MB,对于手机的应用来说一个材质16MB有点big,所以需要热更新,缓存文件,再展示.类似于预加载. (2)切换材质的图片: 设置图片的类型为Cubemap,然后修改材质球内部"_MainText"就可以做到全景照片切换了.这个_MainText其实就是获取材质的图片.
2-交互
具体查看我前面的博客
代码语言:javascript复制3D物体交互,
http://www.jianshu.com/p/643890e4c57d
UI交互
http://www.jianshu.com/p/3696bc837551
看完后,我们就具备了事件交互功能的制作,然后我们要通过一些特定操作进行,例如2秒后进入下一张图片等 我们就在方块上添加脚本,并根据摄像机的指向来响应事件
OnClick就是点击鼠标后
通过事件触发进行操作
上面论述过全景相册的原理,所以我们就根据事件的响应方法来制作我们的相册, (1)切换材质: 这个太简单,就不论述了.
(2)切换材质的图片:
代码语言:javascript复制当 2s后,会动态替换material的Texture来实现替换360°照片,代码如下
public void OnClick() {
Renderer render1 = this.GetComponent<Renderer>();
Renderer render2 = pano.GetComponent<Renderer>();
Texture tex = render1.materials[0].GetTexture(“_MainTex”);
render2.materials[0].SetTexture(“_MainTex”, tex);
}