JavaでWebビューを使ってGLBファイルを表示

ナイス!「JavaでWebビューを使ってGLBファイルを表示」したい場合、Java単体ではGLBを直接WebViewで表示するのは難しいですが、Java + WebView + A-Frame (もしくはThree.js) を組み合わせるのがベストです。


目次

✅ 構成イメージ

  • Javaアプリ内の WebView に HTML + JavaScript を表示
  • HTMLでは A-FrameThree.js を使って .glb を表示
  • GLBファイルはローカルまたはHTTP経由で読み込み

✅ 実現ステップ(Swing + JavaFX編)

1. JavaFX WebView を使う

JavaFXの WebView コンポーネントで HTML/JS を埋め込みます。

2. HTML側で A-Frame を使って GLB表示


🔧 サンプル実装

🔹 Java側のコード(WebView表示)

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class GlbViewerApp extends Application {
    @Override
    public void start(Stage stage) {
        WebView webView = new WebView();
        webView.getEngine().load(getClass().getResource("/viewer.html").toExternalForm());

        stage.setScene(new Scene(webView, 800, 600));
        stage.setTitle("GLB Viewer in WebView");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

🔹 /resources/viewer.html(A-FrameでGLB表示)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>GLB Viewer</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <a-asset-item id="model" src="model.glb"></a-asset-item>
      </a-assets>
      <a-entity gltf-model="#model" position="0 1.5 -3" rotation="0 180 0"></a-entity>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

✅ GLBファイルの配置

your-project/
├── src/
│   └── main/
│       └── resources/
│           ├── viewer.html
│           └── model.glb

⚠ 注意点

  • WebView はローカルファイルの読み込みに制限があるので、HTTPサーバ経由にする(例:Jetty埋め込み)と安全。
  • model.glb のファイルサイズが大きいと読み込みに時間がかかるので注意。

✨ 補足:もっとリッチにしたい場合

  • Three.js を使えば、UIやアニメーション制御も可能。
  • GLBモデルに アニメーション再生やカメラ操作 を追加可能。
  • Java → JavaScript 連携でインタラクティブなビューアに拡張もできます。

この方向で進める感じでOK? Jetty組み込みとか、Three.jsベースに変える方法も案内できるよ!

よかったらシェアしてね!
目次