20
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VSCode とブラウザで使える軽量点群ビューアを作ってみた

20
Last updated at Posted at 2026-05-13

Python/Qtベースの点群ビューア q3dviewer を、もっと気軽に試せる形にしたくて、WebGLベースの点群ビューア q3dweb を作りました。

q3dviewerは研究や開発で使う大規模な点群や3Dオブジェクトを可視化するためのビューアですが、インストールに手間がかかるという課題がありました。そこで、ブラウザでアクセスするだけで動き、さらにVS Codeの拡張機能としても開ける形に移植しているのがq3dwebです。

nakanoshima_color.png

q3dwebの特徴

  1. インストール不要で、ブラウザで使える
  2. VS Code拡張としても使える
  3. 大規模点群を表示できる軽量な実装
  4. LASファイルを地図と重ねて表示できる

対応しているファイル形式

  • PCD
  • PLY
  • LAS
  • LAZ
  • E57

セットアップ

ブラウザ版

以下のURLにアクセスして、点群ファイルをドラッグアンドドロップしてください。

VS Code版

  1. VS Codeの拡張機能から「q3d」を検索してインストール
    vscode_install2.png

  2. 点群ファイルをVS Codeで開くと、q3dwebビューアが起動します。

使い方

1. 操作方法

点群ファイルをドラッグアンドドロップして表示したら、あとはマウスやキーボードで自由に操作できます。

drag_pcd.gif

基本操作もシンプルです。

入力 動作
右ドラッグ 回転
左ドラッグ 平行移動
マウスホイール ズーム
W / A / S / D / Z / X カメラを移動
Shift + 移動キー より速く移動
Ctrl + 左クリック 2点間の距離を計測
Ctrl + 右クリック 計測点をリセット
M 設定メニューの表示切り替え
Space(Film Makerタブ) 現在のカメラ位置からキーフレームを追加
Delete(Film Makerタブ) 現在のキーフレームを削除

2. LAS / LAZ の地図表示

LASに座標参照系の情報が入っていれば、その情報を読み取り、点群を地図上に重ねて表示できます。
標準で以下の地図が利用可能です。

  • OpenStreetMap
  • 国土地理院標準地図
  • 国土地理院淡色地図
  • 国土地理院航空写真
  • 国土地理院白地図

map.gif

3. 点群のデモ動画作成

点群のデモ動画を作る機能もあります。
設定画面からFilm Makerタブを開いて、カメラ位置を記録していくと、滑らかに補間されたカメラワークを作れます。あとは録画ボタンを押すだけで、動画ファイル(MP4)として保存できます。

firm_l.gif

4. 距離測定

control+左クリックすると距離測定ができます。
複数回クリックすると合計の長さも測定できます。
control+右クリックで取り消しです。
measure.gif

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

20
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?