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: '© ' + 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);
}
成果物
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: '© ' + 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);
}
以上。
Author And Source
この問題について(leafletを鍛える。その8), 我々は、より多くの情報をここで見つけました https://qiita.com/ohisama@github/items/b3dc2f40368985c8a69b著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .