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

はじめに

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

準備

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

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

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

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

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

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のプロパティは、次のエフェクト効果を実現させるためのものです

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の値と合わせて調整します

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>