DOC-02-08 构建一个3D样例程序

本章提供了构建一个名叫MoleculeSampleApp的简单应用程序的步骤,它使用了在本教程中之前讨论过的一些JavaFX 3D图形特性。

为了完成本章中的步骤,你可以使用NetBeans 7.4 IDE(或者更高的版本)来协助开发MoleculseSampleApp程序。

下面的文件和附录部分(参考附录B)都是本教程的一部分:

● MoleculeSampleApp.zip——MoleculeSampleApp应用程序的完整NetBeans工程。

● Xfrom.java——声明了Xfrom类的方法。

● buildMolecule() ——创建了3D水分子对象。

● handleMouse()和handleKeyboard()——允许你使用鼠标和键盘来在scene中控制摄像头的视图。

本章包括以下几部分:

● 准备工作(Prepare for this Tutorial)

● 创建工程(Create the Project)

● 创建Scene(Create the Scene)

● 设置摄像头(Set Up the Camera)

● 构建坐标轴(Build the Axes)

● 构建分子(Build the Molecule)

● 增加摄像头来展示控件(Add Camera Viewing Controls)

准备工作

在继续本教程之前根据下面的需求和建议进行操作:

1. (必需的)确保你的系统满足在Certified System Configurations页面中列出的系统需求,Certified System Configurations页面链接在Java SE的下载页面中,它的网址为:http://www.oracle.com/technetwork/java/javase/downloads/

其中的JavaFX 图形支持(JavaFX Graphics Support)部分提供了一个支持JavaFX 3D特性的显卡列表。一个受支持的显卡是成功运行在本章中你构建的JavaFX 3D样例程序的保障。

2. (建议)下载并安装NetBeans IDE7.4。本教程中用它来构建JavaFX 3D样例程序。

创建工程

使用NetBeans IDE 7.4按照下面的步骤来创建MoleculeSampleApp JavaFX工程。

1. 从NetBeans IDE的File菜单中选择”New Project”。

2. 在New Project向导中选择”JavaFX”应用程序类别和”JavaFX Application”工程。单击”Next”。

3. 输入MoleculeSampleApp作为Project名称。在Path Location文本框中输入路径或单击”Browse”导航到你想放置此工程的文件夹。

4. 单击”Finish”。

在你创建一个JavaFX工程时,NetBeans IDE会提供一个Hello World源码模板来作为起点。你将在后面的章节中替换模板源码。

创建Scene

下面我们来创建用于承载UI布局的Scene。

1. 首先复制java(附录B)中的内容并将保存到MoleculeSampleApp工程下的moleculesampleapp源码文件夹中的Xform.java文件中。

此文件中包含了从Group类继承而来的Xform子类的源码。在3D UI布局中,当Group节点的子节点被改变时,使用Xform节点来避免对Group节点的中心点位置进行自动重新计算。Xform节点允许你添加你自己的变换和旋转类型。文件中包含了一个平移组件、3个旋转组件和1个缩放组件。这3个旋转组件在频繁改变旋转值时非常有用,例如在改变摄像头在Scene中的角度时。

2. 如果没有在IDE编辑器中预先打开,则请先打开在创建工程时所产生的java文件。使用例8-1中展示的import语句来替换文件顶部的import语句。

8–1 替换Import语句

3. 使用例8-2中展示的代码行来替换java中剩余部分的主体代码。这些代码创建了一个带有Xform节点的新Scene图形。

8–2 替换主体代码

 

4. 按下”Ctrl+S”保存文件。

设置摄像头

在一个带有Xform实例的Group类的层级中设置摄像头。在摄像头上使用变换和旋转来改变其默认位置。

1. 添加下面用粗体字标出的代码行,它们在world对象的声明之后,如例8-3所示。

这些代码行创建了一个perspectiveCamera实例和3个Xform类的实例。Xform类扩展了Group类。在本文的前面章节中,已经在Xform.java文件中定义了Xfrom类并且添加到了你的NetBeans工程中。

 

8–3 为摄像头增加变量

2. 复制buildCamera()方法的代码行,如例8-4所示。将它们添加到变量声明之后。

buildCamera()方法设置了带有颠倒视图的摄像头,替换了默认的JavaFX 2DY轴向下(Y-down)视图。因此对应的Scene变成了一个Y-up(Y轴指向上)的Scene。

8-4 增加buildCamera()方法

3. 在start()方法中,增加对buildCamera()的调用,如例8-5中的粗体代码行所示。

8-5 增加对buildCamera()的调用

4. 通过复制例8-6中的粗体代码行并添加到start()方法的末尾来在Scene中设置摄像头。

8-6 Scene中设置摄像头

5. 使用”Ctrl+S”保存文件。

构建坐标轴

增加你将用于构建分子样例的3D坐标轴。使用Box类来创建坐标轴并且使用PhongMaterial(译者注:常用来模拟塑料、水、冰等高反光材质)来设置高光和漫射颜色。在JavaFX中默认情况下Y坐标轴是向下的。

根据惯例X轴一般使用红色,Y轴使用绿色而Z轴使用蓝色。

1. 增加如例8-7中所示的import语句到源文件的顶部。

8-7 增加2import语句

2. 增加如例8-8中所示的变量声明语句

例 8–8为坐标轴增加变量

3. 复制例8-9中所示的粗体声明语句并将其添加到root声明代码行之后。

8-9 创建axisGroup

4. 在buildCamera()方法之后增加如例8-10所示的buildAxes()方法

8-10 增加buildAxes()方法

5. 增加对buildAxes()方法的调用,如例8-11中粗体代码所示。

8-11 增加对buildAxes()方法的调用

6. 右击工程窗体中的”MoleculeSapmleApp”节点并选择”Run”来编译和运行工程。你将会看到一个带有3D坐标轴的窗体,如图8-1所示。

8-1 3D坐标轴

2_8_1 show-axes

构建分子

在这一部分你将会构建分子UI。这里你将会用到Xform类和3D特性,例如PhongMateria、球体(Sphere)和圆柱体(Cylinder),包括Xform类。

1. 声明名为moleculeGroup的Xform,复制例8-12中所示的粗体代码行,将其粘贴到axisGroup变量之后。

8-12 声明名为moleculeGroupXform

2. 增加下列import语句导入在buildMolecule()方法中用到的类。

8-13 buildMolecule()增加import语句

3. 增加下面的粗体语句,声明了在buildMolecule()方法中用到的HYDROGEN_ANGLE常量。

例 8–14 为build Molecule()增加import语句

4. 复制buildMolecule()方法的主体代码并将其粘贴到java中的buildAxes()方法之后。

5. 在start()方法中,增加对buildMolecule()方法的调用,如例8-15中的粗体代码所示。

8-15 增加对buildMolecule()方法的调用

6. 现在如果运行工程你将看到类似图8-2所示的界面。

8-2 水分子的3D模型

2_8_2 show-molecule

7. 通过将visible属性修改为false来关闭坐标轴的可见性,如例8-16所示。再次运行MoleculeSampleApp你将会看到坐标轴不再显示的应用程序界面。

8–16 设置visible属性为false

增加摄像头来展示控件

handleMouse() 和 handleKeyboard()方法允许你看到不同的摄像头视图。下面为你提供了演示使用鼠标和键盘来在Scene中控制摄像头视图的源码。

1. 增加在handleMouse()和handleKeyboard()源码中用到的变量声明代码。复制例8-17中所示的代码并将其粘贴到HYDROGEN_ANGLE声明代码行之后。

8-17 增加用到的变量

2. 复制在handleMouse()和handleKeyboard() 方法中用到的类的import语句,如例8-18所示。将它们粘贴到java文件的顶部。

例8-18 增加import语句

3. 从附录B”3D MoleculeSampleApp 代码”中复制handleMouse() 和 handleKeyboard()方法的代码行,然后将它们添加到java 文件中的buildMolecule()方法之后。

4. 在start()方法中,增加对你刚刚添加的handleKeyboard()和handleMouse()方法的调用。复制例8-19中所示的粗体代码行并将它们粘贴到setFill(Color.GREY)代码行之后。

8-19 增加方法调用

5. 保存文件

6. 编译并运行工程。使用下面的鼠标和键盘操作来获得不同的视图。

● 按住鼠标左键并将鼠标向上下各个方向拖动来围绕坐标轴旋转模型的摄像头视角

● 按住鼠标右键并且向左拖放鼠标来将摄像头视图移开模型。向右拖放鼠标来将摄像头视图移近分子模型。

● 按下”Ctrl+Z”来返回模型的初始位置。

● 按下”Ctrl+V”来在视图中显示和隐藏分子。

● 按下”Ctrl+X”来显示或隐藏坐标轴。

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/08/graphics_3d_sample/
百度已收录