第二讲 文本的显示 在本讲中，我们将介绍如何创建具有文字的场景效果，在创建过程中还将详细介绍如何设置光源以及文字风格等方法。
一、 创建一个新的X3D文件
操作如下：
1． 运行X3D-Edit，出现如图所示的界面。
说明：
X3D-Edit程序界面分为五个区，即：用户命令区、节点区、节点属性区、程序编辑区及消息区。
用户命令区是位于顶层，包括菜单命令和工具条命令。
节点区位于界面的左侧，包括X3D目前所支持的所有特性节点，它是标签操作方式，单击相应的标签将在下方显示出相应的节点，凡是不可添加的节点均以灰色显示。
节点区的下方是节点属性区，属性区所在的窗口中包括当前节点的大部分属性，在这里我们可以更改或设置相应的属性值。
界面的最下方是消息区，用来显示当前操作或编译情况。
程序编辑区用来显示和编辑我们所设计的X3D程序，它是多文档窗口形式。
2． X3D-Edit运行后会调用默认的newScene.x3d，当然，我们也可单击File │ New菜单重新创建。
3． 单击File │ Save as ，将默认的newScene.x3d保存为另一个文件1.x3d，并指定到自己的文件夹中。如"d:X3d示例"。注意：系统一开始使用默认的保存文件名Untitled-0.x3d。
4． 单击工具栏最右边的
按钮，弹出如图所示的对话框。
5． 单击"确定"按钮，将会在IE显示。若此时鼠标指针为一个十字加上E，那么恭喜你，你可以正常使用了。
二、 修改head节点下的内容
head 是 X3D的第一个节点，放在场景节点的开头。它对应于HTML中的<head>标记。该节点下的内容可以是component (组件)、metadata(元数据)或自定义内容。下面来修改：
1． 单击
，将会在节点属性窗口中显示其属性，如下图所示。
说明：meta (metadata) 元数据为场景提供一些信息，它使用和HTML的meta 标签一样的定义。每个元数据包括名称(name)和内容(content)。
2． 单击属性窗口中的content属性右侧的Value单元，弹出如下图所示的窗口。
3． 将内容改为"1.x3d"后，单击OK按钮。
4． 按同样的方法将head节点下的内容修改成下图所示。
提示：删除某条节点内容，只需选定它后按delete键，或者右击节点，从弹出的快捷菜单中选择"Delete"。
三、 添加几何节点(Shape)
在X3D 程序(文档)中，Scene 是X3D场景图的根节点，所有的场景节点都应添加到该节点下，并且在每个文件里只允许有一个Scene 根节点。操作如下：
1． 保留Scene下的NavigationInfo节点内容，删除
。
2． 单击Scene节点。然后在节点区中，单击 Allowed Nodes 标签。
3． 从节点列表中，找到Shape，并右击Shape，从弹出的快捷菜单中选择"Insert As Child"。编辑器会自动定位到添加的Shape节点。
说明：Shape(几何)节点用于几何体、文本和外观特性的父节点。
四、 添加文本节点(Text)
Text 是一个用于文本显示的几何节点，在添加之前一定要添加场景外观节点(Appearance)。Appearance 指定几何对象的视觉效果，它可以有Material、Texture 和TextureTransform 节点。
1． 从节点列表中，找到Appearance(外观)，右击后从弹出的菜单中选择"Insert As Child"。
2． 在刚才添加的Appearance节点下添加Material节点。
说明：Material 指定相关几何节点的表面材质属性。用于光源的属性如下表所示：
| 属性 | 含义 | 默认值 | 值的范围 |
| diffuseColor | 反射光 | 0.8 0.8 0.8 | RGB颜色分量值为0~1 |
| emissiveColor | 自身发出的光 | 0 0 0 | 同上 |
| specularColor* | 高光 | 0 0 0 | 同上 |
| shininess* | 光强 | 0.2 | 0~1 |
| ambientIntensity* | 环境光 | 0.2 | 0~1 |
| transparency* | 透明度 | 0 | 0~1 |
注意：打*号的属性可能不起作用。
3．在Material节点属性窗口中将diffuseColor的属性改为"0 1 0"，颜色为绿色。注意：在输入这些数值后一定要按Enter结束。
说明：RGB颜色分量的含义是，R表示红色，G表示绿色，B表示蓝色。各颜色分量的值均在0到1之间，每个值用空格隔开。
4． 单击Appearance节点，从节点列表中，找到Text，然后右击Text，选择"Insert After"添加Text节点。
5． 在Text节点属性窗口中，将String属性内容设为""Hello, X3D!" "2004-1-2"" ，结果如下所示。
说明： "你好, X3D" 和 "2004-1-2"文本之间有空格且两个文本上有双引号，之所以这么做是希望将其显示成两行文本。
6． 编译预览，结果如下图所示。
五、 设置文本风格
字体风格的设置是由FontStyle节点指定的，它的属性如下表所示：
| 属性 | 含义 | 默认值 | 可以选择的值 |
| family | 字体名 | "SERIF" | "SERIF", "SANS", "TYPEWRITER"：前两个是可变宽度的字体，最后一个是等宽字体 |
| style | 字体风格 | PLAIN | PLAIN(常规), BOLD(粗体), ITALIC(斜体), BOLDITALIC(粗斜体) |
| justify | 位置调整 | "BEGIN" | "FIRST"(首字符对齐), "BEGIN"(左对齐), "MIDDLE"(居中), "END"(右对齐) |
| size | 字体大小 | 1 | 实数值 |
| spacing | 行间距 | 1 | 实数值 |
| horizontal | 是否水平方向 | True | True(水平方向), False(垂直方向) |
| leftToRight | 字符是否从左到右 | True | True(从左到右), False(从右到左) |
| topToBottom | 字符是否从上到下 | True | True(从上到下), False(从下到上) |
下列就来将上述两行文本居中斜体显示，且行距设为2倍。
1． 在Text节点下添加一个子节点FontStyle。
2． 在FontStyle节点属性窗口中，将style属性内容选择为ITALIC。
3． 在justify属性栏内输入 "BEGIN" "MIDDLE"，然后按回车。
4． 在spacing属性栏内输入2.0，然后按回车。这样代码就变成：
5． 编译预览，结果如下图所示。
但是，BS Contact 6.1好像对文本支持得不够好，justify属性看不出效果，这是因为BS Contact自动将场景进行最大化居中缩放处理。
六、 插件菜单操作
1． 在浏览器的X3D场景中，右击鼠标，出现如下图所示的快捷菜单：
2． 选择"Setting"│"Preference"，出现下图对话框。
在这里可以对插件中的相关参数进行设置。
3． 单击"General"标签，出现下图页面。
4． 将"Menu language"选择为"中文"。单击"确定"按钮，这样，快捷菜单就是中文了。如下图所示：
5． 将渲染选项(Render Options)设置成OpenGL，如下图所示：
环境设置好了后，就可以跟着我们一起去领略X3D的魅力了。在下一讲中，我们将讨论X3D的2D图形的构造。
设为首页
收藏本站
联系我们
