More than 5 years have passed since last update.

bablon.jsで地形データを表示したい２

Babylon.js

Last updated at 2020-10-11Posted at 2020-10-05

はじめに

bablon.jsで地形データを表示したい１で地形の点群データをbabylon.jsで点群データとして表示しました。その続きで、点群データを面として表示します。

リボン

面の作成は@dmystkさんがリボンを使っていたので、私もこれでやってみたい。複数個の点をつないで形状を作成します。

リボンで作る地形はこんなイメージ

babylon.jsリボンのドキュメント
https://doc.babylonjs.com/how_to/ribbon_tutorial

プログラムはこんな感じ。座標を２次元配列で生成して、MeshBuilder.CreateRibbonです。

  // ribbon生成
  var path1 = [
    new BABYLON.Vector3(-1, 2, 0),
    new BABYLON.Vector3(0, 2, 0),
    new BABYLON.Vector3(1, 2, 0)
  ];
  var path2 = [
    new BABYLON.Vector3(-2, 1, 1),
    new BABYLON.Vector3(-1, 1, 1),
    new BABYLON.Vector3(0, 1, 1),
    new BABYLON.Vector3(1, 1, 1)
  ];
  var path3 = [
    new BABYLON.Vector3(-1, 0, 0),
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(1, 0, 0),
    new BABYLON.Vector3(2, 0, 0)
  ];
  
  var ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbon", {pathArray: [path1, path2, path3]}, scene);

See the Pen babylon.js CreateRibbon by nobuyuki ishii (@nobuyuki-ishii) on CodePen.

で、前回作成した点群データでリボンを作ると、、！？

もとはこれなのですが、、

点データの並び替え

リボンの作成は２次元配列の座標値をパラメータとするのですが、設定した順に線を結びます。近い点が結ばれる並びになっていなかったようです。国土地理院とか見ていますと、1mメッシュなどといって、決められた大きさの格子ごとにデータを扱うやり方があります。格子の中の複数個の点は、座標値の平均をとって、１コに変換します。

格子内の平均値を出すイメージ