在3D场景中显示汉字
2019独角兽企业重金招聘Python工程师标准>>>
TWaver 3D for Flex本身支持3D文字的显示,但是用户必须嵌入一套字库才可以。使用传统的方式,显示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();
对于国内客户来说,这一点就有些痛苦了,一个中文字库的体积太大,嵌入发布程序中的话,会增大发布包的大小,及时是远程加载,也会因为其恐怖的体积,让用户的web化设计面临网络情况的挑战。当然为了用户也可以去裁剪一个字库,把自己会用到的文字收入其中,做个可控数量级的枚举,但是实时系统在运行过程中,会碰到什么样的汉字也是个未知,很难做裁剪的时候枚举尽所需要的汉字。这个问题一直苦苦萦绕在每个人的心头。
,,,,,,
,,,,,,
终于,TWaver 3D支持动态贴图了,这里的动态贴图已经不只是说可以动态切换贴图资源的来源,更重要的是可以动态切换上在内存中生成的BitmapData对象。大家都知道,Flex的BitmapData支持将其UIComponent绘制出来,这一下子为我们解决汉字显示提供了一个非常便捷的方式,那就是我们把汉字写进一个TextInput组件中去,然后再把这个组件画到一个BitmapData对象中,然后在将这个对象变成我们一个3D对象的贴图(例如一个Plane,一个Billboard,一个Cube等等)。ok,动手试验
按步就班,搭建一个3D场景,并且放入一个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 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>
我们会得到一个类似截图的效果,一个只有一个plane对象的3D场景:
现在就让我们用点小技巧,把自己需要的汉字画到3D场景中去吧。
我们需要针对前面的代码做点改进,引入一个TextInput组件,用来呈现汉字;然后我们需要动态地生成一个BitmapData对象,把这个汉字画到指定的图片中去,最后我们再把内存里的这个画好了汉字的图片作为贴图,贴到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>
再次运行,看看是不是能够得偿所愿。
吼吼,look,出来了,汉字出来了,没有引入任何字库,汉字就能够出现在我的3D场景中了。 8过,还是有些遗憾,那就是有时候如果让这汉字的内容动态地变化的时候,可怎么办??
......
......
有了!我动态切换不就行了!?说干就干,抓紧验证,重新打造代码,添加动态变化。
<?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>
run again! Please check you screen!
大家一起来看看,哪里还有可以改进的,让我们把3D应用做得更彻底一些。
这里是文章中用到的UsingChineseCharacter.mxml代码(见原文最下方)。
转载于:https://my.oschina.net/monolog/blog/404784
在3D场景中显示汉字相关推荐
- [Unity3D]Unity3D游戏开发之在3D场景中选择物体并显示轮廓效果
大家好,我是秦元培.我参加了CSDN2014博客之星的评选,欢迎大家为我投票,同时希望在新的一年里大家能继续支持我的博客! 大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn. ...
- 3D场景中选取场景中的物体。
杨航最近在学Unity3D 在一些经典的游戏中,需要玩家在一个3D场景中选取场景中的物体.例如<仙剑奇侠传>,选择要攻击的敌人时.为我方角色增加血量.为我方角色添加状态,通常我们使 ...
- 【Unity Shader】2D模型 3D模型混用的穿模问题(Spine在3D场景中出现前后穿模问题的解决办法)
问题描述: 在3D场景中使用Spine模型(2D), 因为Spine需要像Billboard类似的处理,永远是垂直与相机的, 所以一般情况下2D模型能正常显示且前后的阻挡关系也是没有问题的,如下图所示 ...
- html5 光影效果,基于 HTML5 WebGL 的 3D 场景中的灯光效果
原标题:基于 HTML5 WebGL 的 3D 场景中的灯光效果 构建 3D 的场景除了创建模型,对模型设置颜色和贴图外,还需要有灯光的效果才能更逼真的反映真实世界的场景.这个例子我觉得既美观又代表性 ...
- 3D场景中的逆运动学介绍
翻译自https://www.alanzucconi.com/2020/09/14/inverse-kinematics-in-3d/ 参考阅读 2D场景中的逆运动学 逆运动学 inverse kin ...
- 线上分享会预告之深度学习在3D场景中的应用
大家好.上周我们迎来了第一期的线上分享,三维模型检索技术介绍,此次分享是一次接力形式的分享,每周都将有一位主讲人分享,希望更多的小伙伴加入我们一起分享,也是给自己一个机会锻炼.这里先预告一下,线上直播 ...
- 基于 HTML5 WebGL 的 3D 场景中的灯光效果
2019独角兽企业重金招聘Python工程师标准>>> 构建 3D 的场景除了创建模型,对模型设置颜色和贴图外,还需要有灯光的效果才能更逼真的反映真实世界的场景.这个例子我觉得既美观 ...
- html 灯光效果,基于 HTML5 WebGL 的 3D 场景中的灯光效果
场景搭建 整个场景中包括 2D 场景(也就是鹰眼部分)以及 3D 场景: dm = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView(dm); ...
- 在.Net Micro Framework中显示汉字
摘要:MF平台支持的字体是专有格式,扩展名为tinyfnt,需要用专门的转化工具才能把windows平台上的字体转换为tinyfnt字体.在.Net Micro Framework SDK中提供了一个 ...
最新文章
- JSONObject 和 JSONArray 获取value 的方法
- 2022-2028年中国免疫诊断行业市场前瞻与投资战略规划分析报告
- 小白安装eclipse插件—testNG
- android捕获线程异常,android - 终结器引发的未捕获的异常:所有WebView方法必须在同一线程上调用。 (预期的Looper) - 堆栈内存溢出...
- TechEd2007现场侧记:TechEd的变与不变
- 道闸系统服务器价格,小区道闸系统价格服务客户
- 如何设计高效测试用例_高效的企业测试-单元和用例测试(2/6)
- Yapi Mock 远程代码执行漏洞
- 客户端负载均衡及透明应用切换(TAF)tnsnames failover=on
- 二本 计算机专业2017分数线,2017体育二本分数线(2017体育生高考录取分数线)
- linux命令行模式连接网络,在Linux环境命令行中实现Wifi 连接的方法
- Node.js 系列翻译---console
- 2017 校赛 问题 B: CZJ-Superman
- 【NOIP2017Day1T3】【洛谷P3953】逛公园
- 图像Randon变换含Matlab源码
- 你家的wifi安全么?
- 代码主题darcula_darcula主题模式是()模式。_学小易找答案
- .dwg(sw)-exb
- js页面中实现加载更多功能
- 简述PCM 30/32帧结构图
热门文章
- Compiler__visual_studio_2010_pro 激活码
- 多租户系统技术优越性及架构选型---springCloud工作笔记167
- MyCat分布式数据库集群架构工作笔记0008---Mycat主--从复制原理
- Netty工作笔记0048---Http服务过滤资源
- DataBseDesign工作笔记001---基于RBAC用户权限管理数据库设计_用图的形式说明_精确到页面的元素
- mysql win linux性能对比,不同系统上 MySQL 的性能对比
- ucc编译器(语法解析)
- 随想录(学习nxp rt1052 soc)
- java 读取配置文件工具_java读取配置文件信息properties的工具类
- python线程安全_线程,线程安全与python的GIL锁