【CesiumJS】チュートリアルをやってみよう！　Glitchで動かして。。自分のPCで動かす？その前に【その２】

Cesiumの教材

日本語のとってもいい教材を見つけました。

https://gis-oer.github.io/gitbook/book/materials/web_gis/Cesium/Cesium.html

これで勉強してください（笑）　ほぼ、Google　Mapsで点を打つとかと同じことができるようになります。KMLをGoogle Mapsから落としてCesiumで表示なんてことができますよ。

だと。。終わってしまうので・・　小平あたりでCivicTech的な教材を作ってみたいと思います（笑）

いきなりnpmをダウンロードして、CesiumJSをダウンロードして。。というのは少しハードルも高いでしょうから。。少しずつ。。

たけのこ公園の上にドローンを飛ばす

こういう感じの身近な課題が面白いかな？と。。

できあがりイメージはこちら。。

青色のドローンが、たけのこ公園の上に飛んでいますよね。

まずは、こういうことをしたいことに近い　３DModelsのページにアクセスしてみてください。

こんなのが出てきたと思います。

一番下のGalleryって書いてあるところに、サンプルのプログラムがいろいろあります。

左側のJavaScript codeや HTML body &CSSってところがプログラムを書くところで右側にその結果が出てきます。

一番上に、New　Run(F8）とかのボタンもありますね。これで実行させることができます。

それでは、この３D modelsを改造して見ましょう。

で。。　何をするかというと、緯度経度を変更する。ってことと、Droneだけを出すってことだけです。

OpenStreetMapで緯度経度を調べる

まず、たけのこ公園の緯度経度を調べますか？

どうも、Cesiumの緯度経度は、Google Mapsの緯度経度と少し違い、OpenStreetMapの緯度経度とあっているようです。緯度経度の表現方法って、度分秒で表されてたり、角度小数点で表されてたりしますので。。

OpenStreetMap　を　開いて、たけのこ公園を検索

URLの中に、緯度経度の値が入ってますので、それをコピーしておきます。

まぁ好きなところどこでもいいですけど。。

で。。これを、どこに入れるかというと。。。　positionって変数があるので、そこに入れます。

const position = Cesium.Cartesian3.fromDegrees(
139.50409,
35.72964,
height
);

最初からドローンを表示します。

やり方はいろいろあるんでしょうけど。。

コードの中に、モデルを読み込むところがります。

const options = [
{
text: "Aircraft",
onselect: function () {
createModel(
"../SampleData/models/CesiumAir/Cesium_Air.glb",
5000.0
);
},
},
{
text: "Drone",
onselect: function () {
createModel(
"../SampleData/models/CesiumDrone/CesiumDrone.glb",
150.0
);
},
},
{

これの順番を、Droneが一番上になるように、変更します。（他のモデル全部とっちゃってもいいですけど）

const options = [

{
text: "Drone",
onselect: function () {
createModel(
"../SampleData/models/CesiumDrone/CesiumDrone.glb",
10.0
);
},
},

で。。

ついでにいうと、ここで、高さも変えてしまっています。150→10にしていますよね。

ドローン（３Dモデルの向きを変える）

const heading = Cesium.Math.toRadians(90);
const pitch = 0;
const roll = 0;
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);

の headingのところ。。90に変えてます。好きなように変えて　Run(F8）押してみてください。

こんな感じに見えます。

マウスを使って、画面を大きくしたり、小さくしたり、高さ上げたり。。。してみてください。

こういう風に、まずは少し数値のところだけでもいじると、何が変わるのかわかりますね。

プログラムってこんな感じで操作を覚えていけばいいんじゃないかな？って思います。

さて。。このシリーズ続くのか？？

一応、改造したJavaScriptのコード入れておきますね。

const viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false,
selectionIndicator: false,
shadows: true,
shouldAnimate: true,
});

function createModel(url, height) {
viewer.entities.removeAll();

const position = Cesium.Cartesian3.fromDegrees(
139.50409,
35.72964,
height
);
const heading = Cesium.Math.toRadians(90);
const pitch = 0;
const roll = 0;
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);

const entity = viewer.entities.add({
name: url,
position: position,
orientation: orientation,
model: {
uri: url,
minimumPixelSize: 128,
maximumScale: 20000,
},
});
viewer.trackedEntity = entity;
}

const options = [

{
text: "Drone",
onselect: function () {
createModel(
"../SampleData/models/CesiumDrone/CesiumDrone.glb",
10.0
);
},
},
{
text: "Aircraft",
onselect: function () {
createModel(
"../SampleData/models/CesiumAir/Cesium_Air.glb",
5000.0
);
},
},
{
text: "Ground Vehicle",
onselect: function () {
createModel(
"../SampleData/models/GroundVehicle/GroundVehicle.glb",
0
);
},
},
{
text: "Hot Air Balloon",
onselect: function () {
createModel(
"../SampleData/models/CesiumBalloon/CesiumBalloon.glb",
1000.0
);
},
},
{
text: "Milk Truck",
onselect: function () {
createModel(
"../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
0
);
},
},
{
text: "Skinned Character",
onselect: function () {
createModel(
"../SampleData/models/CesiumMan/Cesium_Man.glb",
0
);
},
},
{
text: "Draco Compressed Model",
onselect: function () {
createModel(
"../SampleData/models/DracoCompressed/CesiumMilkTruck.gltf",
0
);
},
},
{
text: "KTX2 Compressed Balloon",
onselect: function () {
if (!Cesium.FeatureDetection.supportsBasis(viewer.scene)) {
window.alert(
"This browser does not support Basis Universal compressed textures"
);
}
createModel(
"../SampleData/models/CesiumBalloonKTX2/CesiumBalloonKTX2.glb",
1000.0
);
},
},
];

Sandcastle.addToolbarMenu(options);