ナイス!「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ベースに変える方法も案内できるよ!
