Python/Qtベースの点群ビューア q3dviewer を、もっと気軽に試せる形にしたくて、WebGLベースの点群ビューア q3dweb を作りました。
q3dviewerは研究や開発で使う大規模な点群や3Dオブジェクトを可視化するためのビューアですが、インストールに手間がかかるという課題がありました。そこで、ブラウザでアクセスするだけで動き、さらにVS Codeの拡張機能としても開ける形に移植しているのがq3dwebです。
q3dwebの特徴
- インストール不要で、ブラウザで使える
- VS Code拡張としても使える
- 大規模点群を表示できる軽量な実装
- LASファイルを地図と重ねて表示できる
対応しているファイル形式
- PCD
- PLY
- LAS
- LAZ
- E57
セットアップ
ブラウザ版
以下のURLにアクセスして、点群ファイルをドラッグアンドドロップしてください。
VS Code版
使い方
1. 操作方法
点群ファイルをドラッグアンドドロップして表示したら、あとはマウスやキーボードで自由に操作できます。
基本操作もシンプルです。
| 入力 | 動作 |
|---|---|
| 右ドラッグ | 回転 |
| 左ドラッグ | 平行移動 |
| マウスホイール | ズーム |
| W / A / S / D / Z / X | カメラを移動 |
| Shift + 移動キー | より速く移動 |
| Ctrl + 左クリック | 2点間の距離を計測 |
| Ctrl + 右クリック | 計測点をリセット |
| M | 設定メニューの表示切り替え |
| Space(Film Makerタブ) | 現在のカメラ位置からキーフレームを追加 |
| Delete(Film Makerタブ) | 現在のキーフレームを削除 |
2. LAS / LAZ の地図表示
LASに座標参照系の情報が入っていれば、その情報を読み取り、点群を地図上に重ねて表示できます。
標準で以下の地図が利用可能です。
- OpenStreetMap
- 国土地理院標準地図
- 国土地理院淡色地図
- 国土地理院航空写真
- 国土地理院白地図
3. 点群のデモ動画作成
点群のデモ動画を作る機能もあります。
設定画面からFilm Makerタブを開いて、カメラ位置を記録していくと、滑らかに補間されたカメラワークを作れます。あとは録画ボタンを押すだけで、動画ファイル(MP4)として保存できます。
4. 距離測定
control+左クリックすると距離測定ができます。
複数回クリックすると合計の長さも測定できます。
control+右クリックで取り消しです。

q3dwebのカスタマイズ
q3dwebは、github上でMITライセンスで公開しています。自由に開発してお使い下さい。
ローカル環境で開発する場合は、以下のコマンドで必要なパッケージをインストールし、ビルドしてください。
1. 開発環境のセットアップ
git clone https://github.com/Panasonic-Advanced-Technology/q3dweb.git
cd q3dweb
npm install
cd extension && npm install && cd ..
2. ブラウザ版の実行
# 開発サーバー起動
npm run dev
3. VS Code版の実行
# 拡張ビルド (Webビューアビルド + 拡張コンパイル)
npm run build:extension
# VSIX パッケージ作成
npm run package:extension
VSIXパッケージが生成されたら、VS Codeの拡張機能から「Install from VSIX」を選択して、生成されたVSIXファイルを選択してください。
おわりに
q3dwebは、q3dviewerの資産をブラウザとVS Codeに持っていくために進めているプロジェクトです。点群ビューアをもっと配布しやすく、共有しやすく、試しやすくしたいという動機から作っています。
まだまだ開発途中のプロジェクトですが、点群データを扱う人にとって便利なツールになればと思っています。
ぜひ試してみて、フィードバックや機能リクエストをお寄せください!
参考リンク
- q3dweb GitHub
- オリジナル版q3dviewer




