search
LoginSignup
1

More than 1 year has passed since last update.

posted at

updated at

Organization

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

最初はベクトルタイルの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
What you can do with signing up
1