第二讲 文本的显示
在本讲中，我们将介绍如何创建具有文字的场景效果，在创建过程中还将详细介绍如何设置光源以及文字风格等方法。
一、 创建一个新的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图形的构造。
闽公网安备 35060202000074号