創建類似於Google地圖Photo-Sphere（JavaFX 3D）的Photo-Sphere

Question

是否可以在JavaFX中創建類似於Google地圖中的photoshpere的光球？如果是，如何？

Answer 1

答案是肯定的，你可以在JavaFX中創建一個光球。至於如何，基於3D API的球體有一個簡單的解決方案，但是我們可以通過自定義網格實現改進的解決方案。

讓我們從使用常規球體開始。我們只需要一個360º的圖像，像這樣one。

正如我們希望從球體內部看到的，我們必須水平翻轉圖像，並將其添加到球體材質的擴散圖中。

然後我們只需要在球體的中心設置一個攝像頭，添加一些燈光並開始旋轉。

@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的自定義網格允許您裁剪球體的極值，因此圖像可以保持其縱橫比而不會被拉伸。

如果克隆和構建回購，在以前的片段添加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，基於其每個面上的立方體和一個方形圖像。另請檢查高級相機選項。

最後，請注意，現在在F（X）yz-Sampler application中演示了此更多3D高級形狀。