ナイス!「JavaでWebビューを使ってGLBファイルを表示」したい場合、Java単体ではGLBを直接WebViewで表示するのは難しいですが、Java + WebView + A-Frame (もしくはThree.js) を組み合わせるのがベストです。
目次
✅ 構成イメージ
- Javaアプリ内の WebView に HTML + JavaScript を表示
- HTMLでは A-Frame や Three.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ベースに変える方法も案内できるよ!