PLATEAUの建物データを使ってカッコイイ画像を作りたい

![スクリーンショット 2023-07-19 14.13.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/5fb4bcd2-3111-2737-8380-f9ae0d42bd92.png)

## はじめに
https://www.mlit.go.jp/plateau/

PLATEAUの冒頭のムービー、カッコイイですよね
でも実際、こういうムービーを作るのはそれなりのセンスと技術があってできるものであって、なかなか思うように作れなかったりします
私も、さすがにムービーを作るとまでは行かなくとも、カッコイイ絵を作ってみたいなーと思っていました

## 準備
https://www.mlit.go.jp/plateau/learning/tpc12-2/

今回はとりあえずthree.jsで読み込めばなんとかなるだろうと思い、上記サンプルをそのまま利用しました
この作例もすごいカッコイイです

ReactThreeFiberで書くので、普通にThree.jsを書くのとは結構違います

https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

手元で3Dデータを用意するのは手間ですので、以下の配信データを利用させてもらいます

https://github.com/Project-PLATEAU/plateau-streaming-tutorial/blob/main/3d-tiles/plateau-3dtiles-streaming.md

ここで一つ問題が発生しました
サンプルで利用していた３DTilesは少しバージョンが古く、GLTFのDRACO圧縮が行われていませんでした
ただ、最新の3DTilesはDRACO圧縮が行われているので、データ読込み時にDRACOのデコードが必要になります

https://threejs.org/docs/#examples/en/loaders/DRACOLoader

GLTFをロードしている、PlateauTileset.tsxでDRACOのデコードを行うことで、無事表示できました

```javascript:PlateauTileset.tsx
const gltfLoader = new GLTFLoader();
const draco = new DRACOLoader();
draco.setDecoderConfig({ type: 'js' });
draco.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
gltfLoader.setDRACOLoader(draco);
gltfLoader.register(parser => new CesiumRTCPlugin(parser));
```

## ワイヤーフレーム表示にする
ワイヤーフレームの表現がカッコイイなと思ったので、ワイヤーフレーム表示にしました
読み込んだGLTFのマテリアルのwireframeフラグをtrueにします
emissiveIntensityやtoneMappedのプロパティは、次のエフェクト効果を実現させるためのものです

```javascript:PlateauTileset.tsx
tiles.onLoadModel = scene => {
    scene.traverse(object => {
        if (object instanceof Mesh) {
            object.material.wireframe = true；
            object.material.color = new Color(0x008833);
            object.material.emissiveIntensity = 2；
            object.material.toneMapped = false；
        }
    })
}
```

## エフェクトをかける

エフェクトはポストエフェクトでブラーの処理をかけます
ReactThreeFiberでサクッと書けました
パラメーターはこんな感じ
ambientLightのintensityの値と合わせて調整します
```javascript:App.tsx
//- 省略 -
import { EffectComposer } from '@react-three/postprocessing'
import { Bloom } from '@react-three/postprocessing'
import { KernelSize, Resolution } from 'postprocessing'
//- 省略 -
    <ambientLight intensity={5} />
//- 省略 -
    <EffectComposer>
        <Bloom
            intensity={0.5}
            kernelSize={KernelSize.LARGE}
            luminanceThreshold={0.25}
            luminanceSmoothing={0.025}
            mipmapBlur={false}
            resolutionX={Resolution.AUTO_SIZE}
            resolutionY={Resolution.AUTO_SIZE}
        />
    </EffectComposer>
 </Canvas>
```

## アウトプット
これで、以下のような画面が取れます
（ちなみにカバー絵は新宿です）

札幌駅
![スクリーンショット 2023-07-19 17.38.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/3ccd8348-23eb-e8e5-01e5-25a96a62b812.png)

札幌テレビ塔
![Kapture 2023-07-19 at 17.47.43.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/67f565a6-6e6f-3777-4e68-99d5ef8c3162.gif)

横浜
![スクリーンショット 2023-07-19 18.05.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/2427303f-b5a3-c6fd-497f-5a1b90ff8e29.png)

東京タワー
![スクリーンショット 2023-07-19 14.08.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/04c5f184-fa20-bc0c-993a-de2dbde19541.png)

京都タワー
![スクリーンショット 2023-07-19 18.19.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/2c4809cd-943c-d551-48fd-6edc69e1f481.png)

沖縄セルラースタジアム
![スクリーンショット 2023-07-19 18.28.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/f728c2fd-99a2-67ac-5420-5ff5321a423e.png)

などなど。。。

日本全国の主要都市はほぼカバーされているので、色々な場所でこの絵を作ることが出来ます
もう少し派手なエフェクトとかかけても面白いかもなあ。。と思いつつ

ちなみに若干読み込みに時間がかかるので、VJなどで使いたい場合はローカルにセットアップしていけば十分使い物になるのではと思いました