JavaFX 3D部分介绍(2) Camera

  本篇文章将紧接着上一篇进行JavaFX 3D API的讲解。

   JavaFX 3D Graphics API中，Camera是一个Node，并且可以被直接添加到JavaFX的Scene中。我们可以在3D UI布局中随意的移动Camera，这将不同于2D布局。

   首先，Camera的坐标体系是这样的:

   X轴指向右边，Y轴指向下面，Z轴指向屏幕远离观察者的方向。

   我们可以创建一个Camera，然后添加到场景中:

   

[java]  view plain copy

1. Camera camera = new PerspectiveCamera(true);  
2. scene.setCamera(camera);  

   添加到场景:

  

[java]  view plain copy

1. Group cameraGroup = new Group();  
2. cameraGroup.getChildren().add(camera);  
3. root.getChildren().add(cameraGroup);  

  

   旋转Camera，然后移动CameraGroup:

  

[java]  view plain copy

1. camera.rotate(45);  
2. cameraGroup.setTranslateZ(-75);  

  

   Perspective Camera

   JavaFX提供透视相机来渲染3D场景，并为透视投影定义了一个值。我们可以通过修改fieldOfView来改变这个值。

  

  创建Perspective Camera的构造函数:

 

[java]  view plain copy

1. PerspectiveCamera()  
2.   
3. erspectiveCamera(boolean fixedEyeAtCameraZero)  

  后一个构造函数是在JavaFX8中新增的，我们可以在初始化的时候指定一个fixedEyeAtCameraZero值，这个可以让

场景渲染的像是在3D环境里。

 

  所以如果是开发3D项目，我们应该使用PerspectiveCamera(true)来初始化，在2D中使用false。

  下面来介绍几个常用的方法:

  setFieldOfView(double value);

  setNearClip(double value);

  setFarClip(double value);

<span style="font-family: 'Microsoft YaHei';"> </span>

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;">  第一个是调整视野的，主要是一个角度问题。后面两个是调整裁剪面的，主要是限制渲染的距离的范围，可以极大</span>

<span style="font-family: 'Microsoft YaHei';"><span style="font-size: 18px; line-height: 25.1875px;">的提升性能。</span></span>

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;">
</span>

<span style="font-family: 'Microsoft YaHei'; font-size: 24px;"><strong>  </strong></span>

<span style="font-family: 'Microsoft YaHei'; font-size: 24px;"><strong> JavaFX中的Y坐标</strong></span>

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;"><span style="color: rgb(51, 51, 51);"> 很多3D场景中，Y轴是朝上的。然后在JavaFX 3D中，Y轴是朝下的。如果你需要Y轴朝上，我们可以创建一个</span><span style="color: rgb(204, 0, 0);">xform</span></span>

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;">节点加入到根节点中。</span>

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;">
</span>

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;">  如下所示:</span>

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;">  </span><div class="dp-highlighter bg_java" style="font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; width: 936.531px; overflow: auto; padding-top: 1px; margin: 18px 0px !important; background-color: rgb(231, 229, 220);"><div class="bar" style="padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108); background-color: rgb(248, 248, 248);"><strong>[java]</strong> <a target=_blank href="http://blog.csdn.net/wingfourever/article/details/12443181#" class="ViewSource" title="view plain" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_plain.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">view plain</a><a target=_blank href="http://blog.csdn.net/wingfourever/article/details/12443181#" class="CopyToClipboard" title="copy" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_copy.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">copy</a><div style="position: absolute; left: 435px; top: 2236px; width: 18px; height: 18px; z-index: 99;"></div></div></div><ol start="1" class="dp-j" style="padding: 0px; border: none; color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important; background-color: rgb(255, 255, 255);"><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">root3D = </span><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit;">new</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> Xform();  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">root3D.rx.setAngle(<span class="number" style="margin: 0px; padding: 0px; border: none; color: rgb(192, 0, 0); background-color: inherit;">180.0</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">);  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">root.getChildren().add(root3D);  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">root3D.getChildren().add(...); <span class="comment" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 130, 0); background-color: inherit;">// 添加你所有的3D物体</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">  </span></span></li></ol></div>

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;"><span style="color: rgb(51, 51, 51);">  当然，也可以把你的</span><span style="color: rgb(204, 0, 0);">Camera</span><span style="color: rgb(51, 51, 51);">加入到</span><span style="color: rgb(204, 0, 0);">xform</span><span style="color: rgb(51, 51, 51);">中，如下所示:</span></span>

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;">  </span><div class="dp-highlighter bg_java" style="font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; width: 936.531px; overflow: auto; padding-top: 1px; margin: 18px 0px !important; background-color: rgb(231, 229, 220);"><div class="bar" style="padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108); background-color: rgb(248, 248, 248);"><strong>[java]</strong> <a target=_blank href="http://blog.csdn.net/wingfourever/article/details/12443181#" class="ViewSource" title="view plain" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_plain.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">view plain</a><a target=_blank href="http://blog.csdn.net/wingfourever/article/details/12443181#" class="CopyToClipboard" title="copy" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_copy.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">copy</a><div style="position: absolute; left: 435px; top: 2462px; width: 18px; height: 18px; z-index: 99;"></div></div></div><ol start="1" class="dp-j" style="padding: 0px; border: none; color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important; background-color: rgb(255, 255, 255);"><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">Camera camera = </span><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit;">new</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> PerspectiveCamera(</span><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit;">true</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">);  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">Xform cameraXform = <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit;">new</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> Xform();  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">root.getChildren().add(cameraXform);  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">cameraXform.getChildren().add(camera);  </span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">cameraXform.rz.setAngle(<span class="number" style="margin: 0px; padding: 0px; border: none; color: rgb(192, 0, 0); background-color: inherit;">180.0</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">);  </span></span></li></ol></div>

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;"><span style="color: rgb(51, 51, 51);">  还有一中更好的方法是，对</span><span style="color: rgb(204, 0, 0);">Camera</span><span style="color: rgb(51, 51, 51);">做一个角度的旋转，如下所示:</span></span>

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;">
</span>

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;">  </span><div class="dp-highlighter bg_java" style="font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; width: 936.531px; overflow: auto; padding-top: 1px; margin: 18px 0px !important; background-color: rgb(231, 229, 220);"><div class="bar" style="padding-left: 45px;"><div class="tools" style="padding: 3px 8px 10px 10px; font-stretch: normal; font-size: 9px; line-height: normal; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; border-left-width: 3px; border-left-style: solid; border-left-color: rgb(108, 226, 108); background-color: rgb(248, 248, 248);"><strong>[java]</strong> <a target=_blank href="http://blog.csdn.net/wingfourever/article/details/12443181#" class="ViewSource" title="view plain" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_plain.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">view plain</a><a target=_blank href="http://blog.csdn.net/wingfourever/article/details/12443181#" class="CopyToClipboard" title="copy" style="color: rgb(160, 160, 160); text-decoration: none; border: none; padding: 1px; margin: 0px 10px 0px 0px; font-size: 9px; display: inline-block; width: 16px; height: 16px; text-indent: -2000px; background-image: url(http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/images/default/ico_copy.gif); background-attachment: initial; background-color: inherit; background-size: initial; background-origin: initial; background-clip: initial; background-position: 0% 0%; background-repeat: no-repeat;">copy</a><div style="position: absolute; left: 435px; top: 2739px; width: 18px; height: 18px; z-index: 99;"></div></div></div><ol start="1" class="dp-j" style="padding: 0px; border: none; color: rgb(92, 92, 92); margin: 0px 0px 1px 45px !important; background-color: rgb(255, 255, 255);"><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;"><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">Camera camera = </span><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit;">new</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> PerspectiveCamera(</span><span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit;">true</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">);  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">Xform cameraXform = <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit;">new</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> Xform();  </span></span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">root.getChildren().add(cameraXform);  </span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">cameraXform.getChildren().add(camera);  </span></li><li class="alt" style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; color: inherit; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important;"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">Rotate rz = <span class="keyword" style="margin: 0px; padding: 0px; border: none; color: rgb(0, 102, 153); font-weight: bold; background-color: inherit;">new</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;"> Rotate(</span><span class="number" style="margin: 0px; padding: 0px; border: none; color: rgb(192, 0, 0); background-color: inherit;">180.0</span><span style="margin: 0px; padding: 0px; border: none; background-color: inherit;">, Rotate.Z_AXIS);  </span></span></li><li style="border-style: none none none solid; border-left-width: 3px; border-left-color: rgb(108, 226, 108); list-style: decimal-leading-zero outside; line-height: 18px; margin: 0px !important; padding: 0px 3px 0px 10px !important; background-color: rgb(248, 248, 248);"><span style="margin: 0px; padding: 0px; border: none; color: black; background-color: inherit;">camera.getTransforms().add(rz);  </span></li></ol></div>

<span style="font-family: 'Microsoft YaHei'; font-size: 18px;">  由此来保证我们使用JavaFX 3D的时候，坐标系如其他的3D类引擎和工具保持一致。</span>