TWaver 3D for Flex本身支持3D文字的顯示,但是用戶必須嵌入一套字庫(kù)才可以。使用傳統(tǒng)的方式,顯示3D文字。
[Embed("extrusionfonts.swf", mimeType="application/octet-stream")] private var font:Class; ..... twaver.threed.util.Util3D.checkTextFont(font); var network:Network3D = new Network3D(); network.applyHoverCamera(-180,10,5,300); this.addElement(network); var n2:Node = new Node(); n2.setStyle(Style3D.THREED_SHAPE_TYPE,Consts3D.THREED_SHAPE_TYPE_TEXT); n2.setStyle(Style3D.TEXT_FONT_SIZE,20); n2.setStyle(Style3D.TEXT_FONT_3D,"Arial"); n2.setStyle(Style3D.TEXT_WIDTH,200); n2.setStyle(Style3D.TEXT_CONTENT,"Hello"); n2.setStyle(Style3D.MAPPINGTYPE,Consts3D.MAPPINGTYPE_COLOR); n2.setStyle(Style3D.MATERIAL_COLOR,0x00FF00); n2.setStyle(Style3D.PROPERTY_SPACE_LOCATION,new Vector3D(100,0,0)); n2.setStyle(Style3D.BOTH_SIDES_VISIBLE,true); network.elementBox.add(n2); network.showAxises();
對(duì)于國(guó)內(nèi)客戶來(lái)說(shuō),這一點(diǎn)就有些痛苦了,一個(gè)中文字庫(kù)的體積太大,嵌入發(fā)布程序中的話,會(huì)增大發(fā)布包的大小,及時(shí)是遠(yuǎn)程加載,也會(huì)因?yàn)槠淇植赖捏w積,讓用戶的web化設(shè)計(jì)面臨網(wǎng)絡(luò)情況的挑戰(zhàn)。當(dāng)然為了用戶也可以去裁剪一個(gè)字庫(kù),把自己會(huì)用到的文字收入其中,做個(gè)可控?cái)?shù)量級(jí)的枚舉,但是實(shí)時(shí)系統(tǒng)在運(yùn)行過(guò)程中,會(huì)碰到什么樣的漢字也是個(gè)未知,很難做裁剪的時(shí)候枚舉盡所需要的漢字。這個(gè)問(wèn)題一直苦苦縈繞在每個(gè)人的心頭。
,,,,,,
,,,,,,
終于,TWaver 3D支持動(dòng)態(tài)貼圖了,這里的動(dòng)態(tài)貼圖已經(jīng)不只是說(shuō)可以動(dòng)態(tài)切換貼圖資源的來(lái)源,更重要的是可以動(dòng)態(tài)切換上在內(nèi)存中生成的BitmapData對(duì)象。大家都知道,F(xiàn)lex的BitmapData支持將其UIComponent繪制出來(lái),這一下子為我們解決漢字顯示提供了一個(gè)非常便捷的方式,那就是我們把漢字寫進(jìn)一個(gè)TextInput組件中去,然后再把這個(gè)組件畫到一個(gè)BitmapData對(duì)象中,然后在將這個(gè)對(duì)象變成我們一個(gè)3D對(duì)象的貼圖(例如一個(gè)Plane,一個(gè)Billboard,一個(gè)Cube等等)。ok,動(dòng)手試驗(yàn)
按步就班,搭建一個(gè)3D場(chǎng)景,并且放入一個(gè)Plane對(duì)象。
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:ns="http://www.servasoft.com/twaver/3D" creationComplete="init()"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import twaver.*; import twaver.threed.event.*; import twaver.threed.util.*; private var databox:ElementBox; private var source:BitmapData; private var rect:Rectangle = new Rectangle(0,0,128,128); private var text:TextInput = new TextInput(); private var n1:Node; private function init():void{ prepare(); setupNetwork(); fillData(); network.showAxises(); network.callLater(function():void{ paintTexture(n1); }); } private function fillData():void{ n1 = NodeUtils.buildPlane(new Vector3D(0,0,0),new Vector3D(32,0,32),new Vector3D(90,0,0),Consts3D.MAPPINGTYPE_COMMON,source,true); databox.add(n1); } private function setupNetwork():void{ databox = network.elementBox; network.applyHoverCamera(-180,10,5,200); } ]]> </fx:Script> <ns:Network3D id="network" width="100%" height="100%"/> </s:Application>
我們會(huì)得到一個(gè)類似截圖的效果,一個(gè)只有一個(gè)plane對(duì)象的3D場(chǎng)景:
現(xiàn)在就讓我們用點(diǎn)小技巧,把自己需要的漢字畫到3D場(chǎng)景中去吧。
我們需要針對(duì)前面的代碼做點(diǎn)改進(jìn),引入一個(gè)TextInput組件,用來(lái)呈現(xiàn)漢字;然后我們需要?jiǎng)討B(tài)地生成一個(gè)BitmapData對(duì)象,把這個(gè)漢字畫到指定的圖片中去,最后我們?cè)侔褍?nèi)存里的這個(gè)畫好了漢字的圖片作為貼圖,貼到plane上去。
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:ns="http://www.servasoft.com/twaver/3D" creationComplete="init()"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import mx.controls.TextInput; import twaver.*; import twaver.threed.event.*; import twaver.threed.util.*; private var databox:ElementBox; private var source:BitmapData; private var rect:Rectangle = new Rectangle(0,0,128,128); private var text:TextInput = new TextInput(); private var n1:Node; private function init():void{ prepare(); setupNetwork(); fillData(); network.showAxises(); network.callLater(function():void{ paintTexture(n1); }); } private function prepare():void{ text.width = 150; text.height = 60; text.setStyle('borderStyle','none'); text.text = "你好"; text.alpha = 1; this.addElement(text); text.visible = false; } private function fillData():void{ n1 = NodeUtils.buildPlane(new Vector3D(0,0,0),new Vector3D(32,0,32),new Vector3D(90,0,0),Consts3D.MAPPINGTYPE_COMMON,source,true); databox.add(n1); } private function setupNetwork():void{ databox = network.elementBox; network.applyHoverCamera(-180,10,5,200); } private function setTexture(n:Element,source:BitmapData):void{ var type:String = n.getStyle(Style3D.THREED_SHAPE_TYPE); switch(type){ case Consts3D.THREED_SHAPE_TYPE_BILLBOARD: n.setStyle(Style3D.BILLBOARD_TEXTURE,source); break; case Consts3D.THREED_SHAPE_TYPE_PLANE: n.setStyle(Style3D.PLANE_MATERIAL,source); break; default: n.setStyle(Style3D.MAPPING_COMMON_PATH,source); break; } } private function paintTexture(n:Element):void{ source = new BitmapData(32,32,true,0x00000000); text.text = n.getClient("label"); source.fillRect(rect,0x00000000); source.draw(text); setTexture(n,source); } ]]> </fx:Script> <ns:Network3D id="network" width="100%" height="100%"/> </s:Application>
再次運(yùn)行,看看是不是能夠得償所愿。
吼吼,look,出來(lái)了,漢字出來(lái)了,沒(méi)有引入任何字庫(kù),漢字就能夠出現(xiàn)在我的3D場(chǎng)景中了。8過(guò),還是有些遺憾,那就是有時(shí)候如果讓這漢字的內(nèi)容動(dòng)態(tài)地變化的時(shí)候,可怎么辦??
......
......
有了!我動(dòng)態(tài)切換不就行了!?說(shuō)干就干,抓緊驗(yàn)證,重新打造代碼,添加動(dòng)態(tài)變化。
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:ns="http://www.servasoft.com/twaver/3D" creationComplete="init()"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import mx.controls.TextInput; import mx.events.PropertyChangeEvent; import twaver.*; import twaver.threed.event.*; import twaver.threed.util.*; private var databox:ElementBox; private var source:BitmapData; private var rect:Rectangle = new Rectangle(0,0,128,128); private var text:TextInput = new TextInput(); private var n1:Node; private function init():void{ prepare(); setupNetwork(); fillData(); network.showAxises(); network.callLater(function():void{ paintTexture(n1); }); var timer:Timer = new Timer(1000); timer.addEventListener(TimerEvent.TIMER,function(evt:Event):void{ var date:Date = new Date(); n1.setClient("label",date.seconds); }); timer.start(); } private function prepare():void{ text.width = 150; text.height = 60; text.setStyle('borderStyle','none'); text.text = "你好"; text.alpha = 1; this.addElement(text); text.visible = false; } private function fillData():void{ n1 = NodeUtils.buildPlane(new Vector3D(0,0,0),new Vector3D(32,0,32),new Vector3D(90,0,0),Consts3D.MAPPINGTYPE_COMMON,source,true); databox.add(n1); } private function setupNetwork():void{ databox = network.elementBox; network.applyHoverCamera(-180,10,5,200); databox.addDataPropertyChangeListener(this.onPropertyChanged); } private function onPropertyChanged(evt:PropertyChangeEvent):void{ var name:String = Util3D.getPropertyName(evt.property as String); if("label"==name){ var element:Element = evt.source as Element; paintTexture(element); } } private function setTexture(n:Element,source:BitmapData):void{ var type:String = n.getStyle(Style3D.THREED_SHAPE_TYPE); switch(type){ case Consts3D.THREED_SHAPE_TYPE_BILLBOARD: n.setStyle(Style3D.BILLBOARD_TEXTURE,source); break; case Consts3D.THREED_SHAPE_TYPE_PLANE: n.setStyle(Style3D.PLANE_MATERIAL,source); break; default: n.setStyle(Style3D.MAPPING_COMMON_PATH,source); break; } } private function paintTexture(n:Element):void{ source = new BitmapData(50,32,true,0x00000000); text.text = n.getClient("label"); source.fillRect(rect,0x00000000); source.draw(text); setTexture(n,source); } ]]> </fx:Script> <ns:Network3D id="network" width="100%" height="100%"/> </s:Application> http://
run again! Please check you screen!
大家一起來(lái)看看,哪里還有可以改進(jìn)的,讓我們把3D應(yīng)用做得更徹底一些。
這里是文章中用到的 UsingChineseCharacter.mxml代碼(見(jiàn)原文最下方) 。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
