Mapbox-GL.jsのCanvasをテクスチャにして遊ぶ

最初はベクトルタイルのpbfを読み込んでCanvasに描画してテクスチャにするという面倒な事をやっていたのですが、Mapbox-GL.jsにgetCanvasというメソッドがあるのを知り、こっちのほうがお手軽に出来るな。。。ということでやってみました
こんな感じです

https://northprint.net/webgl/mapbox-getcanvas/

利用ライブラリーは

• Mapbox-GL.js
• three.js

の２つです

以下のような感じでcanvasをPlaneのテクスチャーに設定しています

index.js

(略)
        geometry = new THREE.PlaneGeometry( 5, 5, 32 );
        plane = createMesh(geometry);
        scene.add(plane);
(略)
function createMesh (geometry) {
    const canvas = new THREE.Texture(map.getCanvas()); // canvas要素を読み込む
    const material = new THREE.MeshBasicMaterial({side: THREE.DoubleSide});
    material.map = canvas;
    return new THREE.Mesh(geometry, material);
}

ソースコードはこちらに置いておきます
https://github.com/northprint/mapbox-getcanvas-sample
ちなみにmapのタイルURLは設定していないので自分の好きなものを設定してください
おすすめはこちら→https://maptiler.jp/