D3.jsで読み込んだgeoJSONデータをthree.jsを使って3D表示する。

マウスでグリグリできる。
d3threejsjapan

example

サンプル

d3-threeDというライブラリを使用しています。

d3.json("japan.geojson", function(json) {
    d3main(json);
});


function d3main(json) {
    var container;
    var camera, scene, renderer;
    var mesh;
    
    initScene();


    function initScene() {
	container = document.createElement('div');
	document.body.appendChild(container);
	
	//シーンの追加
	scene = new THREE.Scene();
	
	//カメラの設定
	camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
	camera.position.set(0, 0, 300);
	
	controls = new THREE.TrackballControls( camera );
	
	scene.add(camera);
	
	//ライティングの設定
	var light = new THREE.DirectionalLight(0xffffff, 2);
	light.position.set(1, 1, 1).normalize();
	scene.add(light);
	
	//目印用のキューブを追加
	var geometry = new THREE.CubeGeometry(20, 20, 20);
	var material = new THREE.MeshLambertMaterial({color:0x0000ff})
	mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);
	
	
	
	//geojsonデータ読み込み
	var geodata = json.features;
	
	//投影法指定
	var mercator = d3.geo.equirectangular();
	
	//path変換関数生成
	var path = d3.geo.path().projection(mercator);
	
	//表示位置調整
	var translate = mercator.translate();
	translate[0] = -2200;
	translate[1] = 550;
	mercator.translate(translate);
	
	//スケール指定
	mercator.scale(900);
	    
	    
	//geoJSON→svg path→three.js mesh変換    
	var countries = [];
	for (i = 0 ; i < geodata.length ; i++) {
	    var geoFeature = geodata[i];
	    var properties = geoFeature.properties;
	    var feature = path(geoFeature);
	
	    //svgパスをthree.jsのmeshに変換
	    var gmesh = transformSVGPathExposed(feature);
	
	    for (j = 0 ; j < gmesh.length ; j++) {
		countries.push({"data": properties, "mesh": gmesh[j]});
	    }
	}
	
	//mesh追加
	for (i = 0 ; i < countries.length ; i++) {
	
	    var material = new THREE.MeshPhongMaterial({
		color: Math.floor(Math.random() * 0xFFFFFF), 
		opacity:1
	    });
	    
	    var shape3d = countries[i].mesh.extrude({
		amount: 20,
		bevelEnabled: false
	    });
	    var toAdd = new THREE.Mesh(shape3d, material);
	    toAdd.rotation.x = 60;
	    scene.add(toAdd);
	}
	
	
	//レンダリング
	renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	
	container.appendChild(renderer.domElement);
	renderer.render(scene, camera);
	    
	animate();
    }

  
    function animate() {
	requestAnimationFrame( animate ); 
	renderer.render( scene, camera ); 
	controls.update();
    }  
  
}

100

101

102

103

104

105

106

107

108

109

110

111

d3.json("japan.geojson", function(json) {

d3main(json);

});

function d3main(json) {

var container;

var camera, scene, renderer;

var mesh;

initScene();

function initScene() {

container = document.createElement('div');

document.body.appendChild(container);

//シーンの追加

scene = new THREE.Scene();

//カメラの設定

camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);

camera.position.set(0, 0, 300);

controls = new THREE.TrackballControls( camera );

scene.add(camera);

//ライティングの設定

var light = new THREE.DirectionalLight(0xffffff, 2);

light.position.set(1, 1, 1).normalize();

scene.add(light);

//目印用のキューブを追加

var geometry = new THREE.CubeGeometry(20, 20, 20);

var material = new THREE.MeshLambertMaterial({color:0x0000ff})

mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

//geojsonデータ読み込み

var geodata = json.features;

//投影法指定

var mercator = d3.geo.equirectangular();

//path変換関数生成

var path = d3.geo.path().projection(mercator);

//表示位置調整

var translate = mercator.translate();

translate[0] = -2200;

translate[1] = 550;

mercator.translate(translate);

//スケール指定

mercator.scale(900);

//geoJSON→svg path→three.js mesh変換

var countries = [];

for (i = 0 ; i < geodata.length ; i++) {

var geoFeature = geodata[i];

var properties = geoFeature.properties;

var feature = path(geoFeature);

//svgパスをthree.jsのmeshに変換

var gmesh = transformSVGPathExposed(feature);

for (j = 0 ; j < gmesh.length ; j++) {

countries.push({"data": properties, "mesh": gmesh[j]});

}

//mesh追加

for (i = 0 ; i < countries.length ; i++) {

var material = new THREE.MeshPhongMaterial({

color: Math.floor(Math.random() * 0xFFFFFF),

opacity:1

});

var shape3d = countries[i].mesh.extrude({

amount: 20,

bevelEnabled: false

});

var toAdd = new THREE.Mesh(shape3d, material);

toAdd.rotation.x = 60;

scene.add(toAdd);

}

//レンダリング

renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

container.appendChild(renderer.domElement);

renderer.render(scene, camera);

animate();

}

function animate() {

requestAnimationFrame( animate );

renderer.render( scene, camera );

controls.update();

}

表示位置の調整とかが結構面倒でした。
amountで無理やり厚みを付けているので、あんまり綺麗に表示できてません。
ちゃんと使いこなすには、Three.jsを勉強しないとならないですね。

サンプル

投稿者: shimizu