新疆文(wén)艺中心3D虚拟VR演(yǎn)示
源码(mǎ):简单,引(yǐn)入(rù)three,引入(rù)3d
实现:2:1的全(quán)景在PC端,可以预览,左右上下 鼠标移动
优点:aaaaa,我(wǒ)说(shuō)不(bú)出(chū)口
缺点:PC端(duān)不(bú)能放大缩小,图(tú)片(piàn)需要裁剪六张,移动端,不(bú)能放大缩小,更加糟糕的是渲染滴很差,截图为证,手机也(yě)是如此(此(cǐ)方案 凉凉 不符合需(xū)求)
大哥,就这样跪了吗?我没有(yǒu)深入的研究重庆vr制(zhì)作公司的three,可能他的强大我没(méi)有用上(shàng)吧
刚开始我用的是,node+three 竟然没有 CSS3DRenderer 安装包 ,只有2D的(de) 并且引用(yòng)three 也是报各(gè)种错误
放一(yī)个我引入(rù)成功的示范:import * as THREE from "three";
官方实例的静(jìng)态页面,跟(gēn)官方(fāng)一(yī)个效(xiào)果(guǒ),但是不是我想要的;我不想切六张图,还有(yǒu)渲染也不(bú)好,图中(zhōng)出(chū)现黑(hēi)色这是我们老板打死也不能接受(shòu)的。是(shì)我没有深入了解
本例(lì)子(zǐ),不接受反驳(bó),有能力的自己去研究。反正我是没有这个本事(shì)
第二种方案:aframe
源(yuán)码:真是太简单了(le),引入aframe 框(kuàng)架, <a-sky></a-sky>
实现(xiàn):2:1的全景在PC端,可以预览,左(zuǒ)右(yòu)上下 鼠标移动(dòng),还支持(chí)VR模式(shì),
优点:简单方(fāng)便(biàn),一顿操作猛于虎
缺点:PC端不能(néng)放大缩小,移动端只能(néng)左右移动,不能(néng)放大缩小,不能上下滑动(此方案 凉凉 不符合需求)
看(kàn)到(dào)这里是(shì)不是(shì)很绝望,反正我是的(引入jQuery 代码都(dōu)不想放出来(lái)了(le) 你们自己找吧,无非就是引用插件 引用图片(piàn))
希望大家可以找到符合(hé)你们重庆全景(jǐng)制作的需求的插件吧
江(jiāng)湖再见
第四种方案:pannellum(宛如(rú)我的救星,是(shì)国(guó)外的一个框架)
源码:引(yǐn)用同样是so easy!
实(shí)现:2:1的全(quán)景在PC端,可(kě)以预览,左(zuǒ)右上下鼠标移动,能够放大缩小,移动端也完美具(jù)备这些需求(qiú),完全符(fú)合(hé)我的(de)需求,跪谢
优(yōu)点(diǎn):简单方便(biàn),一顿(dùn)操作猛于(yú)虎(hǔ)
缺点:由(yóu)于webGL的限制,图片宽(kuān)度最(zuì)大(dà)限制是4086,图片由(yóu)于灯光有点失真,更加悲剧的是放大的时候,有锯齿(图片裁(cái)剪(jiǎn)算法(fǎ)问题)
这都差不多了,但是新的(de)问题好像很难啊(ā)
用了很渣的英文(wén)问(wèn)了作者(zhě),重庆虚拟现实告知是图片裁剪算法问题
厚着脸皮(pí)要后端小哥哥,用bicubic和(hé) Lanczos 帮我裁剪图片
然而事实,在(zài)移动端有锯齿,特别的失(shī)真(哇的哭了(le),老板然后各种发移动端(duān)别人(rén)做的没有锯(jù)齿的网页(yè)版全景图)
这(zhè)一刻(kè),我(wǒ)真(zhēn)的绝望(wàng)了

上(shàng)一篇:VISTA汽车全景VR视频
下一(yī)篇:悦湖(hú)美郡VR售楼系统