4

是否可以在 JavaFX 中创建类似于 Google 地图中的 photoshpere 的 photosphere?如果是,如何?

4

1 回答 1

8

答案是肯定的,你可以在 JavaFX 中创建一个 photosphere。

至于方法,有一个基于 3D API 球体的简单解决方案,但我们可以使用自定义网格实现改进的解决方案。

让我们从使用常规球体开始。我们只需要一张360º 图像,比如这张。

正如我们想从球体内部看到的那样,我们必须水平翻转图像,并将其添加到球体材质的扩散贴图中。

然后我们只需要在球体的中心设置一个摄像机,添加一些灯光并开始旋转。

@Override
public void start(Stage primaryStage) {
    PerspectiveCamera camera = new PerspectiveCamera(true);
    camera.setNearClip(0.1);
    camera.setFarClip(10000.0);
    camera.setFieldOfView(90);
    Sphere sphere = new Sphere(1000);
    sphere.setCullFace(CullFace.NONE);
    PhongMaterial material = new PhongMaterial();
    /*
    "SonyCenter 360panorama" by François Reincke - Own work. Made using autostitch (www.autostitch.net).. 
    Licensed under CC BY-SA 3.0 via Wikimedia Commons - http://commons.wikimedia.org/wiki/File:SonyCenter_360panorama.jpg#mediaviewer/File:SonyCenter_360panorama.jpg
    */
    material.setDiffuseMap(new Image(getClass().getResource("SonyCenter_360panorama_reversed.jpg").toExternalForm()));
    sphere.setMaterial(material);

    Group root3D = new Group(camera,sphere,new AmbientLight(Color.WHITE));

    Scene scene = new Scene(root3D, 800, 600, true, SceneAntialiasing.BALANCED);

    scene.setCamera(camera);

    primaryStage.setTitle("PhotoSphere in JavaFX3D");
    primaryStage.setScene(scene);
    primaryStage.show();

    final Timeline rotateTimeline = new Timeline();
    rotateTimeline.setCycleCount(Timeline.INDEFINITE);
    camera.setRotationAxis(Rotate.Y_AXIS);
    final KeyValue kv1 = new KeyValue(camera.rotateProperty(), 360);
    final KeyFrame kf1 = new KeyFrame(Duration.millis(30000), kv1);
    rotateTimeline.getKeyFrames().addAll(kf1);
    rotateTimeline.play();
}

凸轮1

凸轮2

现在您将要向相机添加一些控件(以便您可以导航)。你会发现这个解决方案在球体的顶部和底部都有一个弱点,因为图像的所有顶部或底部都位于一个点:

凸轮3

您可以在此处的 F(X)yz 库中找到此问题的解决方案。一个名为的自定义网格SegmentedSphereMesh允许您裁剪球体的极端,因此图像可以保持其纵横比而不会被拉伸。

网

如果您克隆并构建 repo,请将 FXyz.jar 添加到您的项目中,然后Sphere将前面的代码片段替换为:

    SegmentedSphereMesh sphere = new SegmentedSphereMesh(100,0,26,1000);
    sphere.setCullFace(CullFace.NONE);
    sphere.setTextureModeImage(getClass().getResource("SonyCenter_360panorama_reversed.jpg").toExternalForm());

凸轮4

在同一个库中SkyBox,您可以找到基于立方体和每个面上的一个正方形图像的 。还要检查高级相机选项。

最后,请注意,现在在 F(X)yz-Sampler应用程序中演示了这个和更多 3D 高级形状。

于 2015-03-03T18:08:15.017 回答