java - 创建类似于 Google Map Photo-Sphere (JavaFX 3D) 的 Photo-Sphere

Question

是否可以在 JavaFX 中创建类似于 Google map 中的 photoshpere 的光球？如果是，如何？

Answer 1

答案是肯定的，您可以在 JavaFX 中创建光球。

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

让我们从使用常规球体开始。我们只需要一个 360º 图像，像这样 one .

因为我们想从球体内部看到，我们必须水平翻转图像，并将其添加到球体 Material 的扩散贴图中。

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

@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();
}

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

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

如果您克隆并构建 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());

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

最后，请注意这个和更多 3D 高级形状现在在 F(X)yz-Sampler 中演示 application .