leafletを鍛える。その9

2346 ワード
three leaflet Plunker leaflet テキストリンク

概要

leafletを鍛えてみた。
threeで、東京ドーム1個分、書いてみた。

写真

サンプルコード

var map = L.map('map').setView([37.9, 140.1], 15);
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 camera0 = new THREE.PerspectiveCamera(45, 1, 1, 1000);
camera0.position.set(100, 100, 100);
camera0.lookAt(new THREE.Vector3(0.0, 0.0, 0.0));
scene.add(camera0);

var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 0, 1);
scene.add(light);

var geometry = new THREE.SphereGeometry(23, 16, 16, 0, Math.PI * 2, 0, Math.PI / 2);
var material = new THREE.MeshBasicMaterial({
    color: 0xff0000
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);   

renderer.render(scene, camera0);
function drawingOnCanvas(canvasOverlay, params) {    
    var camera0;
    if (params.zoom == 16) camera0 = new THREE.PerspectiveCamera(25, 1, 1, 1000);    
    if (params.zoom == 15) camera0 = new THREE.PerspectiveCamera(45, 1, 1, 1000);
    if (params.zoom == 14) camera0 = new THREE.PerspectiveCamera(75, 1, 1, 1000);    
    if (params.zoom == 13) camera0 = new THREE.PerspectiveCamera(105, 1, 1, 1000);    
    camera0.position.set(100, 100, 100);
    camera0.lookAt(new THREE.Vector3(0.0, 0.0, 0.0));

    renderer.render(scene, camera0);
}

成果物

以上。