移動(dòng)端3D絢酷空間-VR 場(chǎng)景應(yīng)用 妙味課堂
價(jià)值:520 附帶課件
游客,如果您要查看本帖隱藏內(nèi)容請(qǐng) 回復(fù)
課程介紹
絢麗的3D空間、強(qiáng)勁的音樂節(jié)奏;震撼的視覺表現(xiàn)、流暢的用戶操控……
這樣傲嬌的作品表現(xiàn)形式,在 2016 年微信朋友圈刮起一陣又一陣 H5 旋風(fēng)~~人們欣賞過后,不禁嘖嘖稱奇!這樣華麗麗的表現(xiàn)形式,讓人驚嘆之余更引發(fā)好奇:這是怎么做出來的?完全由前端去實(shí)現(xiàn)嗎?要怎么做呢?
來吧,跟著妙味講師的步伐一起吧,讓我們一步步揭開技術(shù)的迷團(tuán)…
學(xué)習(xí)目標(biāo)
通過本次課程的學(xué)習(xí),可以讓大家了解各類3D效果在移動(dòng)端的實(shí)現(xiàn)原理,明白重力感應(yīng)的相關(guān)設(shè)置,滑屏,3D和重力感應(yīng)的相關(guān)配合,了解類VR場(chǎng)景如何實(shí)現(xiàn)
課程詳情
掌控腦洞大開的絢酷VR技能,學(xué)習(xí)酷炫的視覺表現(xiàn)手法,
盡在本期妙味遠(yuǎn)程課:
妙味移動(dòng)端實(shí)戰(zhàn)開發(fā)之:“淘寶造物節(jié)” 3D絢酷空間 VR 場(chǎng)景應(yīng)用!
部分案例截圖:
52.gif (650.04 KB, 下載次數(shù): 341)
下載附件
保存到相冊(cè)
2019-8-10 23:43 上傳
絢麗的3D空間、強(qiáng)勁的音樂節(jié)奏;
震撼的視覺表現(xiàn)、流暢的用戶操控……
這樣傲嬌的作品表現(xiàn)形式,在 2016 年微信朋友圈刮起一陣又一陣 H5 旋風(fēng)~~人們欣賞過后,不禁嘖嘖稱奇!這樣華麗麗的表現(xiàn)形式,讓人驚嘆之余更引發(fā)好奇:這是怎么做出來的?完全由前端去實(shí)現(xiàn)嗎?要怎么做呢?
來吧,跟著妙味講師的步伐一起吧,讓我們一步步揭開技術(shù)的迷團(tuán),探究前端實(shí)現(xiàn)的一切可能。!
學(xué)前基礎(chǔ):掌握CSS定位、可以獨(dú)立做出JavaScript拖拽
課程大綱:
第一節(jié):transform 基本方法講解
涉及知識(shí)點(diǎn):
transform2D,transform3D,3D 硬件加速,rotate,translate,scale,skew,perspective,perspective-origin,transform-origin,transform-style,backface-visibility,IOS 下 3D 的 BUG 說明;
第二節(jié):transform 獲取和運(yùn)動(dòng)
涉及知識(shí)點(diǎn):
transform 獲取,matrix,封裝 transform 的獲取方法,自定義屬性,tween;
第三節(jié):造物節(jié) loading 動(dòng)畫制作
涉及知識(shí)點(diǎn):
animation 動(dòng)畫,3D 坐標(biāo)計(jì)算,animationend 事件,圖片 loading,加載進(jìn)度監(jiān)控;
第四節(jié):造物節(jié)內(nèi)容圓柱制作,加拖拽圓柱移動(dòng)
涉及知識(shí)點(diǎn):
正 N 邊形公式推算,3D 圓柱制作,內(nèi)圓柱的實(shí)現(xiàn),移動(dòng)端滑屏,滑屏圓柱移動(dòng);
第五節(jié):完整版造物節(jié)整合重力加速的實(shí)現(xiàn),類 VR 360° 全景制作
涉及知識(shí)點(diǎn):
重力加速事件,重力減速兼容,利用重力加速配合3D制作全景場(chǎng)景;
第六節(jié):練習(xí)講解
涉及知識(shí)點(diǎn):
重力感應(yīng)的 3D 照片球;
課程目錄
1移動(dòng)端“淘寶造物節(jié)” 3D絢酷空間 VR 場(chǎng)景應(yīng)用
1_transform基本方法
2_transform3d相關(guān)應(yīng)用
3_3D家居圖上
4_3D家居圖下
5_animation講解
6_圖片預(yù)加載(造物節(jié)loading動(dòng)畫)上
7_圖片預(yù)加載(造物節(jié)loading動(dòng)畫)下
8_3d的圓柱制作
9_滑屏旋轉(zhuǎn)3d圓柱
10_3d云彩入場(chǎng)
11_漂浮層添加
12_陀螺儀旋轉(zhuǎn)圓柱上
13_陀螺儀旋轉(zhuǎn)圓柱下
14_利用陀螺儀制作VR場(chǎng)景
|