摘要:為了實現一個基于的場景小游戲,我采用了來實現,短短行代碼,我就能實現用第一人稱來操作前進后退上下左右,并且實現了碰撞檢測。首先我得先設置我是第一人稱漫游模式,直接將即可。
為了實現一個基于HTML5的場景小游戲,我采用了HT for Web來實現,短短200行代碼,我就能實現用“第一人稱”來操作前進后退上下左右,并且實現了碰撞檢測。
先來看下實現的效果: http://hightopo.com/guide/gui...
或者http://v.youku.com/v_show/id_...視頻中出現的幀的問題是我屏幕錄制器的問題,真正操作的時候不會有,建議用上面的鏈接自己操作玩玩,鼠標或者觸屏都可以,不過我覺得最方便的還是操作鍵盤wsad控制上下左右。
我的想法是先把場景布局好,代碼如下:
createHT([100, -20, 100], "#E74C3C"); createHT([-100, -20, 100], "#1ABC9C"); createHT([100, -20, -100], "#3498DB"); createHT([-100, -20, -100], "#9B59B6"); createCurve([0, -20, 0]); createCircle();
這幾個都是自定義的函數,createHT為描繪HT形狀的圖,場景中有四個,所以調用了四次;createCurve是描繪場景中間的黃色的曲線;createCircle是描繪最外層的圓,因為不是全包的圓,所以也是描點畫的。
HT中封裝了一個組件,ht.Shape(以下簡稱Shape),能夠根據描點來自由描繪圖形,可以通過shape.setPoints(pointsArray)將所有的點添加進數組中,并且設置到shape中,然后通過setSegments()設置線段數組信息,也就是用什么樣的方式來連接兩點,在Shape手冊中有著重描寫,感興趣的可以參考HT for Web Shape 手冊。抽其中的一個描繪點的函數來看看:
function createHT(p3, color){ shape = new ht.Shape(); shape.s({ "shape.background": null, "shape.border.width": 10, "shape.border.color": color, "all.color": color }); shape.setTall(40); shape.setThickness(5); shape.setPoints([ // draw H {x: 20, y: 0}, {x: 20, y: 100}, {x: 20, y: 50}, {x: 80, y: 50}, {x: 80, y: 0}, {x: 80, y: 100}, // draw T {x: 120, y: 0}, {x: 180, y: 0}, {x: 150, y: 0}, {x: 150, y: 100} ]); shape.setSegments([ // draw H 1, // moveTo 2, // lineTo 1, // moveTo 2, // lineTo 1, // moveTo 2, // lineTo // draw T 1, // moveTo 2, // lineTo 1, // moveTo 2 // lineTo ]); shape.p3(p3); dataModel.add(shape); return shape; }
因為“HT”這個字眼要描繪的點比較多,所以代碼看起來有點大,如果你看到如何描繪一個不完全的圓用20行代碼來完成,而且包括樣式,還是會驚訝的:
shape = new ht.Shape(); shape.s({ "shape.background": null, "shape.border.width": 10, "shape.border.color": "#D26911", "all.color": "#D26911" }); shape.setTall(40); shape.p3(0, -20, 0); shape.setThickness(10); var r = 300; for(var i=0; i<36; i++){ var angle = Math.PI * 2 * i / 36; shape.addPoint({ x: r * Math.cos(angle), y: r * Math.sin(angle) }); } dataModel.add(shape); return shape;
場景設置完畢,接下來要將在3d中“我”處于的位置在2d中也顯示出來。首先我得先設置“我”是“第一人稱漫游模式”,直接將g3d.setFirstPersonMode(true)即可。第一人稱漫游模式本質是控制eye和center,如果沒有設置第一人稱漫游模式,那么鼠標或者觸控板拖拽會繞著center旋轉。詳情參考HT for Web 3D手冊。
因為HT 3D中封裝了兩個方法getEye和getCenter,這兩個方法分別是獲取camera的位置和目標中心點的位置,前者按照想象來說就比方你頭上有個攝像機,你走到哪里它的中心點就拍攝到哪里,可以很方便的記錄你的位置;后者就相當于你看出去的位置,但是這里跟我們人不太一樣,因為人是可以廣度看到大范圍的,但是這個center相當于你眼球和都不能轉動,是正前方的某一點的位置就是你的視線聚焦位置。
了解了getEye和getCenter后我們就可以獲取當前位置和視線位置了:
g2d.addTopPainter(function(g){ var eye = g3d.getEye(), center = g3d.getCenter(); g.fillStyle = "red"; g.strokeStyle = "black"; g.lineWidth = 1; g.beginPath(); g.arc(eye[0], eye[2], 12, 0, Math.PI * 2, true); //繪制圓,而且還能實時獲取3d中“我”的位置 g.fill(); g.stroke(); g.strokeStyle = "black"; g.lineWidth = 2; g.beginPath(); g.moveTo(eye[0], eye[2]); g.lineTo(center[0], center[2]); //繪制線,能實時更改“我”和“我的視線位置” 之間的線段 g.stroke(); });
但是在代碼中我們發現,這個方法只被繪制了一次,如果不一直重繪,那么2d界面的“我”的位置和移動也是不會變的,所以我們又監聽了3d中屬性的變化:
g3d.mp(function(e){//根據3d上的“我”的位置和視線來實時更新2d界面 if(e.property === "eye" || e.property === "center"){ //如果e屬性變化為get/setEye,get/setCenter,那么重繪2d界面 g2d.redraw(); } });
在2D中,我可以編輯圖元,移動它的點,變化某個圖元的大小,等等功能,只要變化了圖元,那么我的碰撞測試就得更新:
function updateBoundaries(){ boundaries = []; dataModel.each(function(data){//HT curve circle boundaries = boundaries.concat(ht.Default.toBoundaries(data.getPoints(), data.getSegments())); // ht.Default.toBoundaries將不連續曲線轉化成Graph3dView#setBoundaries(bs)需要的參數格式 }); g3d.setBoundaries(boundaries);//setBoundary()可指定碰撞邊界 }
那么我們好奇的點在于,如何在拖拽圖元改變大小的時候還能保持碰撞檢測呢?
HT中有一個對于屬性變化的監聽事件addDataPropertyChangeListener(),可簡寫為md(),在我們拖拽圖元的時候,繪制這個圖元的基礎points就會被改變,所以我們只要監聽points有沒有被改變就行了,如何使用這個事件可以參考HT for Web 數據模型手冊
dataModel.md(function(e){//data屬性變化事件 if(e.property === "points"){//如果data屬性變化為getPoints/setPoints,那么更新邊界 updateBoundaries(); } });
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51394.html
摘要:本文將模擬一個歐派,讓大家足不出戶在家里就能更加直觀立體的挑選家具。創建廣告牌寬度高度深度寬度上的節數高度上的節數深度上的節數中心點家具展銷歐派這里給我們給整個場景用抽象物體圍起來了,以免第一人稱控件開啟時會造成無碰撞體系墜落出場景。 本文將模擬一個歐派,讓大家足不出戶在家里就能更加直觀立體的挑選家具。 第一步,利用CampusBuilder搭建模擬場景。CampusBuilder的模...
閱讀 2423·2021-10-09 09:59
閱讀 2177·2021-09-23 11:30
閱讀 2591·2019-08-30 15:56
閱讀 1145·2019-08-30 14:00
閱讀 2939·2019-08-29 12:37
閱讀 1253·2019-08-28 18:16
閱讀 1656·2019-08-27 10:56
閱讀 1022·2019-08-26 17:23