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