TOPIC 6｜Cesiumで活用する[2/2]｜Reactを用いたCesiumの応用

import { Cesium3DTileset, Viewer } from 'cesium'
 
// 1. Viewerを作成する
const viewer = new Viewer(document.getElementById('root'))
// 3. tilesetをviewerに追加する
const tileset = viewer.scene.primitives.add(
  // 2. Cesium3DTilesetを作成する
  new Cesium3DTileset({
    url: '...'
  })
)
// 4. viewerのカメラ位置と角度をtilesetに合わせて移動する
viewer.flyTo(tileset)

<Viewer id='root'>
  <Tileset url={A} flyTo />
</Viewer>

<Viewer id='root'>
  <Tileset url={A} flyTo />
  <Tileset url={B} />
  <Tileset url={C} />
</Viewer>

<Viewer id='root'>
  <Tileset url={A} />
  <Tileset url={B} flyTo />
  <Tileset url={C} />
</Viewer>

import { Viewer as CesiumViewer } from 'cesium'
import React, {
  ReactNode,
  createContext,
  useLayoutEffect,
  useState
} from 'react'

export const ViewerContext = createContext<CesiumViewer | undefined>(undefined)

export const Viewer: React.FC<{
  id: string
  children: ReactNode
}> = ({ id, children }) => {
  const [viewer, setViewer] = useState<CesiumViewer>()

  // `id`が変更されるごとに実行される処理
  useLayoutEffect(() => {
    const element = document.getElementById(id)
    if (element == null) {
      // `element`がnullである場合は無視します。
      setViewer(undefined)
      return
    }
    const viewer = new CesiumViewer(element)
    setViewer(viewer)
    // useEffectあるいはuseLayoutEffectの返り値の関数は、次に`element`が変更されるご
    // とに、第一引数の関数より前に実行されます。
    // ここではViewerを破壊し、副作用を消去します。
    return () => {
      viewer.destroy()
    }
  }, [id])

  return (
    <ViewerContext.Provider value={viewer}>{children}</ViewerContext.Provider>
  )
}

import { Cesium3DTileset } from 'cesium'
import React, { useContext, useEffect, useState } from 'react'

import { ViewerContext } from './Viewer'

export const Tileset: React.FC<{
  url: string
  flyTo?: boolean
}> = ({ url, flyTo = false }) => {
  const [tileset, setTileset] = useState<Cesium3DTileset>()
  const viewer = useContext(ViewerContext)

  // `url`あるいは`viewer`が変更されるごとに実行される処理
  useEffect(() => {
    if (viewer?.isDestroyed() !== false) {
      // `viewer`がnullであるか、既に破壊されている場合は無視します。
      setTileset(undefined)
      return
    }
    const tileset = new Cesium3DTileset({ url })
    viewer.scene.primitives.add(tileset)
    setTileset(tileset)
    return () => {
      // 上でaddしたCesium3DTilesetをremoveし、副作用を回収します。
      // Reactのコンポーネントは親から子の順で破壊されます。つまり、Tilesetが破壊され
      // るときには、既にViewerが破壊されている場合があるため、ここでもisDestroyedの
      // 確認が必要です。
      if (!viewer.isDestroyed()) {
        viewer.scene.primitives.remove(tileset)
      }
    }
  }, [url, viewer])

  // `flyTo`がtrueである場合にカメラを移動する。
  useEffect(() => {
    if (flyTo && viewer != null && tileset != null) {
      void viewer.flyTo(tileset)
    }
  }, [flyTo, viewer, tileset])

  return null
}

{
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.6",
    "cesium": "^1.98.1",
    "next": "^12.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-merge-refs": "^2.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@types/node": "^18.8.3",
    "typescript": "^4.8.4"
  }
}

npm install

mkdir public
ln -s ../node_modules/cesium/Build/Cesium public/cesium

mkdir pages

next dev

├── node_modules/
├── pages/
├── public/
├── src/
├── next-env.d.ts
├── package-lock.json
├── package.json
└── tsconfig.json

import { Global, css } from '@emotion/react'
import styled from '@emotion/styled'
import { Viewer as CesiumViewer, Color } from 'cesium'
import React, {
  ComponentPropsWithRef,
  ForwardedRef,
  createContext,
  forwardRef,
  useEffect,
  useLayoutEffect,
  useRef,
  useState
} from 'react'
import { mergeRefs } from 'react-merge-refs'
 
const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
export const ViewerContext = createContext<CesiumViewer | undefined>(undefined)
 
const Root = styled.div(css`
  position: relative;
  width: 100%;
  height: 100%;
`)
 
export interface ViewerProps extends ComponentPropsWithRef<typeof Root> {
  viewerRef?: ForwardedRef<CesiumViewer>
}
 
export const Viewer = forwardRef<HTMLDivElement, ViewerProps>(
  ({ viewerRef, children, ...props }, forwardedRef) => {
    const ref = useRef<HTMLDivElement>(null)
    const [viewer, setViewer] = useState<CesiumViewer>()
    useIsomorphicLayoutEffect(() => {
      if (ref.current == null) {
        setViewer(undefined)
        return
      }
      const viewer = new CesiumViewer(ref.current, {
        // 今回は使用しないため、すべての組み込みUIを非表示にします。
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        navigationInstructionsInitiallyVisible: false
      })
 
      // Viewerのピクセル密度をデバイスのピクセル密度に合わせます。
      // 注意：レンダリング品質は向上しますが、GPUへの負荷は大きくなります。
      viewer.resolutionScale = window.devicePixelRatio
 
      // 今回は使用しないため、組み込みのImagery Layerを削除します。
      viewer.scene.imageryLayers.removeAll()
 
      // 視覚的なパラメータ調整です。
      const scene = viewer.scene
      scene.skyBox = undefined as any
      scene.globe.baseColor = Color.WHITE
 
      // デフォルトでは地形に対してデプステストが行われません（地面にめり込んでいる建物
      // やその部分が表示される）。PLATEAUの3D都市モデルを用いる場合には基本的にtrueに
      // することになるでしょう。
      scene.globe.depthTestAgainstTerrain = true
 
      setViewer(viewer)
      return () => {
        viewer.destroy()
      }
    }, [])
 
    // コンポーネント外から`viewerRef`経由でViewerオブジェクトを利用可能にします。
    useEffect(() => {
      if (typeof viewerRef === 'function') {
        viewerRef(viewer ?? null)
      } else if (viewerRef != null) {
        viewerRef.current = viewer ?? null
      }
    }, [viewerRef, viewer])
 
    return (
      <Root ref={mergeRefs([ref, forwardedRef])} {...props}>
        <Global
          // Viewerが作成するHTMLCanvasElementを`Root`を覆うサイズまで広げます。
          styles={css`
            .cesium-viewer,
            .cesium-viewer-cesiumWidgetContainer,
            .cesium-widget,
            .cesium-widget canvas {
              width: 100%;
              height: 100%;
            }
          `}
        />
        <ViewerContext.Provider value={viewer}>
          {children}
        </ViewerContext.Provider>
      </Root>
    )
  }
)

import React from 'react'

import { Viewer } from './Viewer'

export const App: React.FC = () => {
  return <Viewer />
}

import { Global, css } from '@emotion/react'
import { NextPage } from 'next'
import React from 'react'

import { App } from '../src/App'

// Cesiumが実行時にWeb Workerのためのスクリプトを読み込むために、「6.3.2　環境構築」
// で作成したpublic/cesiumの静的ファイルへのパスを指定します。
if (typeof window !== 'undefined') {
  window.CESIUM_BASE_URL = '/cesium'
}

const Index: NextPage = () => {
  return (
    <>
      <Global
        styles={css`
          html,
          body,
          #__next {
            width: 100%;
            height: 100%;
            margin: 0;
          }
        `}
      />
      <App />
    </>
  )
}

export default Index

import { Cesium3DTileStyle, Cesium3DTileset } from 'cesium'
import React, { useContext, useEffect, useState } from 'react'
 
import { ViewerContext } from './Viewer'
 
export interface PlateauTilesetProps {
  path: string
  color?: string
}
 
export const PlateauTileset: React.FC<PlateauTilesetProps> = ({
  path,
  color = '#ffffff'
}) => {
  const [tileset, setTileset] = useState<Cesium3DTileset>()
  const viewer = useContext(ViewerContext)
  useEffect(() => {
    if (viewer?.isDestroyed() !== false) {
      return
    }
    const tileset = new Cesium3DTileset({
      url: `https://plateau.geospatial.jp/main/data/3d-tiles/${path}/tileset.json`
    })
    viewer.scene.primitives.add(tileset)
    setTileset(tileset)
    return () => {
      if (!viewer.isDestroyed()) {
        viewer.scene.primitives.remove(tileset)
      }
      setTileset(undefined)
    }
  }, [path, viewer])
 
  useEffect(() => {
    if (tileset != null) {
      tileset.style = new Cesium3DTileStyle({
        color: `color("${color}")`
      })
    }
  }, [color, tileset])
 
  return null
}

import { Cartesian3, HeadingPitchRoll } from 'cesium'
import React, { useContext, useEffect } from 'react'
 
import { ViewerContext } from './Viewer'
 
export const Camera: React.FC = () => {
  const viewer = useContext(ViewerContext)
  useEffect(() => {
    if (viewer?.isDestroyed() !== false) {
      return
    }
    viewer.camera.setView({
      destination: Cartesian3.fromDegrees(139.745, 35.68, 2000),
      orientation: new HeadingPitchRoll(Math.PI / 2, -Math.PI / 4, 0)
    })
  }, [viewer])
 
  return null
}

import React from 'react'
 
import { Camera } from './Camera'
import { PlateauTileset } from './PlateauTileset'
import { Viewer } from './Viewer'
 
export const App: React.FC = () => {
  return (
    <Viewer>
      <Camera />
      <PlateauTileset path='bldg/13100_tokyo/13101_chiyoda-ku/notexture' />
      <PlateauTileset path='bldg/13100_tokyo/13102_chuo-ku/notexture' />
    </Viewer>
  )
}

import { Cartesian3 } from 'cesium'
import React, { useContext, useEffect } from 'react'
 
import { ViewerContext } from './Viewer'
 
// 適当な球面調和関数の係数
// https://cesium.com/learn/cesiumjs/ref-doc/ImageBasedLighting.html#sphericalHarmonicCoefficients
const sphericalHarmonicCoefficients = [
  new Cartesian3(1.5, 1.5, 1.5), // L_0,0
  new Cartesian3(1.25, 1.25, 1.25), // L_1,-1
  new Cartesian3(1.5, 1.5, 1.5), // L_1,0
  new Cartesian3(-1.25, -1.25, -1.25), // L_1,1
  new Cartesian3(-1, -1, -1), // L_2,-2
  new Cartesian3(1.25, 1.25, 1.25), // L_2,-1
  new Cartesian3(0, 0, 0), // L_2,0
  new Cartesian3(-1, -1, -1), // L_2,1
  new Cartesian3(-0, -0, -0) // L_2,2
]
 
export const Lighting: React.FC = () => {
  const viewer = useContext(ViewerContext)
  useEffect(() => {
    if (viewer?.isDestroyed() !== false) {
      return
    }
    const scene = viewer.scene
    scene.light.intensity = 5
    scene.sphericalHarmonicCoefficients = sphericalHarmonicCoefficients
 
    // シャドウマップの有効化とパラメータ調整。
    // 4096pxのシャドウマップはGPUによっては負荷が大きすぎるかもしれません。その場合は
    // `size`を2048にしたり、`softShadows`をfalseにしてください。
    scene.shadowMap.enabled = true
    scene.shadowMap.size = 4096
    scene.shadowMap.softShadows = true
    scene.shadowMap.darkness = 0.5
 
    // シャドウマップのZファイティングを避けるために非公開APIのnormalOffsetScaleを調
    // 整します。ブラウザやGPUドライバによっては不要かもしれません。
    ;(scene.shadowMap as any)._primitiveBias.normalOffsetScale = 5
  }, [viewer])
 
  return null
}

import { JulianDate } from 'cesium'
import React, { useContext, useEffect } from 'react'
 
import { ViewerContext } from './Viewer'
 
export const Clock: React.FC = () => {
  const viewer = useContext(ViewerContext)
  useEffect(() => {
    if (viewer?.isDestroyed() !== false) {
      return
    }
    JulianDate.fromDate(new Date(2022, 0, 1, 13), viewer.clock.currentTime)
  }, [viewer])
 
  return null
}

import React from 'react'
 
import { Camera } from './Camera'
import { Clock } from './Clock'
import { Lighting } from './Lighting'
import { PlateauTileset } from './PlateauTileset'
import { Viewer } from './Viewer'
 
export const App: React.FC = () => {
  return (
    <Viewer>
      <Camera />
      <Clock />
      <Lighting />
      <PlateauTileset path='bldg/13100_tokyo/13101_chiyoda-ku/notexture' />
      <PlateauTileset path='bldg/13100_tokyo/13102_chuo-ku/notexture' />
    </Viewer>
  )
}

import { CesiumTerrainProvider, IonResource } from 'cesium'
import React, { useContext, useEffect } from 'react'

import { ViewerContext } from './Viewer'

export const PlateauTerrain: React.FC = () => {
  const viewer = useContext(ViewerContext)
  useEffect(() => {
    if (viewer?.isDestroyed() !== false) {
      return
    }
    // https://github.com/Project-PLATEAU/plateau-streaming-tutorial/blob/main/terrain/plateau-terrain-streaming.md
    viewer.terrainProvider = new CesiumTerrainProvider({
      url: IonResource.fromAssetId(770371, {
        accessToken:
          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5N2UyMjcwOS00MDY1LTQxYjEtYjZjMy00YTU0ZTg5MmViYWQiLCJpZCI6ODAzMDYsImlhdCI6MTY0Mjc0ODI2MX0.dkwAL1CcljUV7NA7fDbhXXnmyZQU_c-G5zRx8PtEcxE'
      })
    })
  }, [viewer])

  return null
}

import React from 'react'

import { Camera } from './Camera'
import { Clock } from './Clock'
import { Lighting } from './Lighting'
import { PlateauTerrain } from './PlateauTerrain'
import { PlateauTileset } from './PlateauTileset'
import { Viewer } from './Viewer'

export const App: React.FC = () => {
  return (
    <Viewer>
      <Camera />
      <Clock />
      <Lighting />
      <PlateauTerrain />
      <PlateauTileset path='bldg/13100_tokyo/13101_chiyoda-ku/notexture' />
      <PlateauTileset path='bldg/13100_tokyo/13102_chuo-ku/notexture' />
    </Viewer>
  )
}

import { MapboxStyleImageryProvider } from 'cesium'
import React, { useContext, useEffect } from 'react'

import { ViewerContext } from './Viewer'

export interface MapboxImageryProps
  extends Pick<
    MapboxStyleImageryProvider.ConstructorOptions,
    'accessToken' | 'username' | 'styleId'
  > {}

export const MapboxImagery: React.FC<MapboxImageryProps> = ({
  accessToken,
  username,
  styleId
}) => {
  const viewer = useContext(ViewerContext)
  useEffect(() => {
    if (viewer?.isDestroyed() !== false) {
      return
    }
    const imageryLayer = viewer.imageryLayers.addImageryProvider(
      new MapboxStyleImageryProvider({
        accessToken,
        username,
        styleId,
        scaleFactor: true
      })
    )
    return () => {
      if (!viewer.isDestroyed()) {
        viewer.imageryLayers.remove(imageryLayer)
      }
    }
  }, [accessToken, username, styleId, viewer])

  return null
}

import React from 'react'

import { Camera } from './Camera'
import { Clock } from './Clock'
import { EllipsoidTerrain } from './EllipsoidTerrain'
import { Lighting } from './Lighting'
import { MapboxImagery } from './MapboxImagery'
import { PlateauTileset } from './PlateauTileset'
import { Viewer } from './Viewer'

export const App: React.FC = () => {
  return (
    <Viewer>
      <Camera />
      <Clock />
      <Lighting />
      <EllipsoidTerrain />
      <MapboxImagery
        accessToken='取得したアクセストークン'
        username='shotamatsuda'
        styleId='cl9302ng4000915rmrwd0m710'
      />
      <PlateauTileset path='bldg/13100_tokyo/13101_chiyoda-ku/notexture' />
      <PlateauTileset path='bldg/13100_tokyo/13102_chuo-ku/notexture' />
    </Viewer>
  )
}