LoginSignup
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-06

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

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

利用ライブラリーは

  • Mapbox-GL.js
  • three.js

の2つです

以下のような感じで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/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1