🐈

【LiDAR×three.js】iPhone12 Proで撮影したPointCloudをWebで表示するまで

2020/11/27に公開

JavaScript

はじめに

（ソフトバンクの48回分割払いで）iPhone12 Pro買いました。
フロントエンドエンジニアとして気になるのは、やはりLiDAR機能です。
今回はそのLiDARで撮影した3Dデータ（PointCloud）を、three.jsを使用してWebに表示させるところまでやってみます。

PointCloudってなに

絵でご覧いただいた方が早いと思うので、完成形を以下に。

PointCloudとは日本語で言うと「点群データ」であり、つまりは「多くの点によって立体を表現したデータ」です。
iPhone12 Proに搭載されたLiDARは、スキャンしたい対象物の点群、つまりはxyz座標をぶわーーーーっと取得できるという訳です（色情報【rgb】はカメラの方で取得？）
Webというよりは、建築の測量などでよく使用されているようです。

使用アプリ

PointCloudを取得するためにはアプリを使用します。
有名どころとしてpronoPointsScanというアプリがあるのですが、今回はたまたまタイムラインで目に入ったSiteScapeというアプリを使ってみました。

アプリの使い方は上記ツイートの通りめちゃくちゃ簡単です。

plyという形式で出力されるのですが、three.jsにはPLYLoaderというものがあるので簡単にWebで読み込めます。

three.jsでply読み込み

点群なので、THREE.Pointsを使います。
ポイントとなる部分だけ記述します。

const plyLoader = new THREE.PLYLoader();
const material = new THREE.PointsMaterial({
    vertexColors: true,//頂点の色付けを有効にする
    size: 0.03,
});
plyLoader.load('xxx.ply', (geometry) => { //引数にはpositionとcolorを持つBufferGeometryが入ってる
    const particles = new THREE.Points(geometry, material);
    scene.add(particles);
});