第一人稱在 3D 中的用法要參考第一人稱在射擊游戲中的使用,第一人稱射擊游戲(FPS)是以第一人稱視角為中心圍繞槍和其他武器為基礎(chǔ)的視頻游戲類型;也就是說,玩家通過主角的眼睛來體驗(yàn)動(dòng)作。自從流派開始以來,先進(jìn)的3D和偽 3D圖形已經(jīng)對(duì)硬件發(fā)展提出了挑戰(zhàn),而多人游戲已經(jīng)不可或缺。
Doom的截圖,這個(gè)流派的突破游戲之一,展示了第一人稱射擊游戲的典型視角
現(xiàn)在博物館或者公司也經(jīng)常使用到 3D 動(dòng)畫做宣傳片等等,3D動(dòng)畫演繹最大的優(yōu)勢,便是在于內(nèi)容與形式上給人的真實(shí)感受。它比平面作品更直觀,比 2D 動(dòng)畫更真實(shí),所以更能給觀賞者以置身于廣告環(huán)境當(dāng)中的感受,大大增強(qiáng)廣告的說服力。3D 技術(shù)的發(fā)展甚至挑戰(zhàn)受眾的分辨能力,使受眾的判斷游離于與虛擬和現(xiàn)實(shí)之間。
而且 3D特效的應(yīng)用為創(chuàng)意提供了更加廣闊的思維空間,并成為創(chuàng)意執(zhí)行的可靠保證,并豐富了創(chuàng)意的形式和風(fēng)格手段。根據(jù)廣告主題的表現(xiàn)訴求,可以營造出夢幻般的神奇氛圍來刺激打動(dòng)受眾,從而起到與受眾溝通的目的。
3D動(dòng)畫宣傳片將 3D動(dòng)畫、特效鏡頭、企業(yè)視頻、照片、未來前景等內(nèi)容通過后期合成、配音、解說形成一部直觀、生動(dòng)、喜聞樂見的高品位的企業(yè)廣告宣傳片,讓社會(huì)不同層面的人士對(duì)企業(yè)產(chǎn)生正面的、積極的、良好的印象,從而建立對(duì)企業(yè)的好感與信任,并信賴該企業(yè)的產(chǎn)品或服務(wù)。
現(xiàn)在 3D 發(fā)展地如此迅速也要感謝人類對(duì)于“現(xiàn)實(shí)”的追求,所以學(xué)好用好 3D 是未來成功必不可少的一部分。
本文例子的思路是進(jìn)入一個(gè)機(jī)房參觀,打開門的動(dòng)作是再生動(dòng)不過了, 再加上適當(dāng)?shù)剞D(zhuǎn)彎,基本上完全模擬了人在機(jī)房中參觀的效果。還有一個(gè)好處就是,如果要演示給領(lǐng)導(dǎo)看而又不用操作,這種炫酷的效果領(lǐng)導(dǎo)一定會(huì)很滿意!
http://www.hightopo.com/demo/room-walkthrough/index.html
界面上的“reset”和“start”兩個(gè)按鈕是直接加在 body 體中的 button,并在這兩個(gè)按鈕上添加點(diǎn)擊事件:
<div></div><div></div>
整個(gè)場景由 HT 封裝的 3D 組件搭建形成的,構(gòu)造這么大的場景是需要一定量的代碼的,為了簡化,我把場景單獨(dú)拿出來,并用 HT 封裝的 ht.JSONSerializer 類將場景序列化為 json,代碼中只引入了生成后的 json 文件,為了讓大家更明確,我這邊做個(gè)示例,假設(shè)已經(jīng)搭建好 3D 場景了:
dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);//.......構(gòu)建好場景dm.serialize();//可以填入number參數(shù),作為空格縮進(jìn)值
既然我們已經(jīng)搭建好環(huán)境,轉(zhuǎn)成了 json 文件,代碼中不好控制,這種情況下我們會(huì)將 DataModel 數(shù)據(jù)模型再反序列化,這個(gè)函數(shù)的功能就是將 json 格式轉(zhuǎn)成對(duì)象,并將反序列化的對(duì)象傳入到 DataModel 數(shù)據(jù)模型中,詳情請(qǐng)參考HT for Web 序列化手冊(cè):
var g3d = window.g3d = new ht.graph3d.Graph3dView(), dataModel = g3d.dm(), view = g3d.getView(), path = null;g3d.setMovableFunc(function(data) { return false;});g3d.setVisibleFunc(function(data) { if (data.getName() === "path") { return false; } return true;});g3d.setEye([523, 5600, 8165]);g3d.setFar(60000);dataModel.deserialize(json);
我們目前需要操作場景中的“門”、以及我們將要走的路線“path”,遍歷 DataModel 數(shù)據(jù)模型,獲取這兩個(gè)數(shù)據(jù):
for (var i = 0; i < dataModel.size(); i++) { var data = dataModel.getDatas().get(i); if (data.getName() === "門") {//json中設(shè)置的名稱 window.door = data; } if (data.getName() === "path") { path = data; } if (window.door && path) {//獲取到door 和 path 的data之后就跳出循環(huán) break; }}
這個(gè)例子中簡單來說就只有四個(gè)動(dòng)作,“重置”回到原點(diǎn)、“開始動(dòng)作”、“向前移動(dòng)”,“停止”。點(diǎn)擊“開始”按鈕,在“開始動(dòng)作”中我們只做了一個(gè)動(dòng)作,“開門”動(dòng)作,動(dòng)作結(jié)束之后調(diào)用“forward”函數(shù)向前移動(dòng):
function startAnim() { if (window.isAnimationRunning) { return; } reset(); window.isAnimationRunning = true;//動(dòng)畫是否正在進(jìn)行 ht.Default.startAnim({ frames: 30, // 動(dòng)畫幀數(shù),默認(rèn)采用`ht.Default.animFrames`。 interval: 20, // 動(dòng)畫幀間隔,默認(rèn)采用`ht.Default.animInterval`。 finishFunc: function() {// 動(dòng)畫結(jié)束后調(diào)用的函數(shù)。 forward(); }, action: function(t){ // action函數(shù)必須提供,實(shí)現(xiàn)動(dòng)畫過程中的屬性變化。 door.setRotationY(-120 * Math.PI / 180 * t); } });}
這邊的“reset”函數(shù)就是“重置”回到原點(diǎn)的功能,我們通過這個(gè)函數(shù)將所有變化過的都恢復(fù)初始的位置,包括“門”的位置:
function reset() { if (window.isAnimationRunning) { return; } g3d.setCenter([0,0,0]); g3d.setEye([523, 5600, 8165]); window.forwardIndex = 0; door.setRotationY(0);}
要“移動(dòng)”,肯定需要走路的“路徑”,也就是我們剛剛獲取到的“path”,通過window.points = path.getPoints()._as; 獲取“path”中的所有元素,初始化window.forwardIndex = 0; 通過控制“path”中前后兩點(diǎn)來設(shè)置 3D 場景中的 Eye 和 Center,這樣就能營造一個(gè)我們是第一人的效果:
var point1 = points[forwardIndex], point2 = points[forwardIndex + 1];var distanceX = (point2.x - point1.x), distanceY = (point2.y - point1.y), distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY)-200;//兩點(diǎn)之間的距離通過三角形勾股定理計(jì)算 怕碰墻所以-200g3d.setEye([point1.x, 1600, point1.y]);//眼睛g3d.setCenter([point2.x, 1600, point2.y]);//我
HT 中 3D 組件有一個(gè) walk(step, anim, firstPersonMode)方法,該函數(shù)同時(shí)改變eye和center的位置,也就是eye和center在兩點(diǎn)建立的矢量方向上同時(shí)移動(dòng)相同的偏移量。step為偏移的矢量長度值。firstPersonMode參數(shù)為空時(shí)則默認(rèn)采用Graph3dView#isFirstPersonMode()當(dāng)前值, 如果為第一人稱模式調(diào)用walk操作,該函數(shù)會(huì)考慮Graph3dView#getBoundaries()邊界限制。
g3d.walk(distance, { frames: 50, interval: 30, easing: function(t) {return t; }, finishFunc: function() { forwardIndex += 1; if (points.length - 2 > forwardIndex) {//points.length = 5 g3d.setCenter([point2.x, 1600, point2.y]);//把結(jié)束點(diǎn)變成起始點(diǎn) g3d.rotate(Math.PI / 2, 0, { frames: 30, interval: 30, easing: function(t) {return t;}, finishFunc:function() { forward();} }); } else { var lastPoint = points[points.length - 1];//json 中path的points 的最后一個(gè)點(diǎn) g3d.setCenter([lastPoint.x, 1400, lastPoint.y]); g3d.rotate(-Math.PI / 2, 0, { frames: 30, interval: 30, finishFunc: function() { window.isAnimationRunning = false; } }); } }});
不管“path”的點(diǎn)有多少個(gè),這個(gè)判斷語句還是能運(yùn)作,只在最后一個(gè)點(diǎn)是跳出 finishFunc 動(dòng)畫結(jié)束后調(diào)用的函數(shù),并將 window.isAnimationRunning 值設(shè)為 false 停止 startAnim 函數(shù)。如果不是最后一個(gè)點(diǎn),用戶“旋轉(zhuǎn)”之后,回調(diào) forward 函數(shù)。至此,全部代碼解釋完畢,很短的代碼量,卻做出了這么大的工程!
總結(jié)
以上所述是小編給大家介紹的基于HTML5的WebGL經(jīng)典3D虛擬機(jī)房漫游動(dòng)畫,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答