leafletを鍛える。その8

概要

leafletを鍛えてみる。
threeを、表示してみた。

写真

サンプルコード

var map = L.map('map').setView([37.9, 140.1], 12);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
}).addTo(map);
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
var glLayer = L.canvasOverlay().drawing(drawingOnCanvas).addTo(map);
var canvas = glLayer.canvas();
glLayer.canvas.width = canvas.clientWidth;
glLayer.canvas.height = canvas.clientHeight;
renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    alpha: true
});
renderer.setSize(450, 450);
var camera = new THREE.PerspectiveCamera(45, 1, 1, 1000);
camera.position.set(100, 100, 100);
camera.lookAt(new THREE.Vector3(0.0, 0.0, 0.0));
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 0, 1);
scene.add(light);
var cube = new THREE.Mesh(new THREE.CubeGeometry(30, 30, 30), new THREE.MeshLambertMaterial({
    color: 0xff00ff
}));
scene.add(cube);
renderer.render(scene, camera);
function drawingOnCanvas(canvasOverlay, params) {
    renderer.render(scene, camera);
}

成果物

以上。