Forked from: cx20's 地理院地図3Dデータを使ってみるテスト(その10改2) View Diff (5) 地理院地図3Dデータを使ってみるテスト(その10改3) cx20 Follow 2014-09-25 21:42:47 License: MIT License Fork0 Fav0 View1704 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 112 lines HTML 8 lines CSS 10 lines 地理院地図3Dデータを使ってみるテスト(その10改3) <対応した点> ・地図データを富士山から黒部峡谷に変更 <参考> ■ 立体地図の表示例(黒部峡谷) http://cyberjapandata.gsi.go.jp/3d/picture/kurobekyoukoku/index.html ■ 地理院地図3Dデータを使ってみるテスト http://jsdo.it/cx20/l4shv ■ 地理院地図3Dデータを使ってみるテスト(その13) http://jsdo.it/cx20/4D7O 地理院地図3Dデータを使ってみるテスト(その10改3) // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その10改2)" http://jsdo.it/cx20/sL2i // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その10改)" http://jsdo.it/cx20/yc3W // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その10)" http://jsdo.it/cx20/wbmT // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その9)(失敗)" http://jsdo.it/cx20/d2KX // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その8)" http://jsdo.it/cx20/8Jmv // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その7)" http://jsdo.it/cx20/A5nH // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その6)" http://jsdo.it/cx20/i5wV // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その5)" http://jsdo.it/cx20/qEka // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その4)" http://jsdo.it/cx20/jEqZ // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その3)" http://jsdo.it/cx20/ky6o // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その2)" http://jsdo.it/cx20/rrlt // forked from cx20's "地理院地図3Dデータを使ってみるテスト" http://jsdo.it/cx20/l4shv var scene; var camera; var theta = 0; var cylinders = []; var angles = []; function animate() { requestAnimationFrame( animate ); render(); } function render() { camera.lookAt(scene.position); /* camera.position.x = 100 * Math.sin(theta * Math.PI / 180); camera.position.y = 100 * Math.cos(60 * Math.PI / 180); camera.position.z = 100 * Math.cos(theta * Math.PI / 180); */ controls.update(); theta += 0.1; renderer.render(scene, camera); } width = window.innerWidth; height = window.innerHeight; var xhr = new XMLHttpRequest(); xhr.addEventListener('load', function (evt) { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000); camera.position.set(0, 100, 100); renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); controls = new THREE.OrbitControls( camera, renderer.domElement ); controls.userPan = false; controls.userPanSpeed = 0.0; controls.maxDistance = 5000.0; controls.maxPolarAngle = Math.PI * 0.495; controls.autoRotate = true; //true:自動回転する,false:自動回転しない controls.autoRotateSpeed = -2.0; //自動回転する時の速度 var n = 2; var x1 = 128; var y1 = 128; var x2 = 192 / n; var y2 = 192 / n; var geometry = new THREE.BoxGeometry(4,2,4); var s = (evt.target.response || evt.target.responseText).split("\n"); for (var i = 0; i < y2; i++) { var colors = []; var r = s[Math.floor(i * n)].split(","); for (var j = 0; j < x2; j++) { var x = (j * n / 2) - 50; var y = Math.floor((r[j * n] * 1) / n * n); var z = ((i - 1) * n / 2) - 50; var color = new THREE.Color(); console.log( y ); color.setHSL((y / 40 * 360 | 0) / 360.0, 0.80, 0.50); var material = new THREE.MeshLambertMaterial({ color: color, wireframe: false }); var mesh = new THREE.Mesh(geometry, material); mesh.position.x = x; mesh.position.y = y; mesh.position.z = z; scene.add(mesh); } } var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.set(-10, 50, 50).normalize(); scene.add(light); var light2 = new THREE.DirectionalLight(0xffffff); light2.position.set(-100, 0, 50).normalize(); scene.add(light2); document.getElementById('webgl').appendChild(renderer.domElement); animate(); }, false); //xhr.open('GET', 'dem.csv', true); //xhr.open('GET', '/assets/2/g/t/o/2gtor', true); // 富士山 //xhr.open('GET', '/assets/4/9/G/4/49G4v', true); // 芦ノ湖 xhr.open('GET', '/assets/7/D/o/H/7DoHj', true); // 黒部峡谷 xhr.send(null); window.onresize = function () { width = window.innerWidth; height = window.innerHeight; renderer.setSize(width, height); // レンダラ―画面の再設定 camera.aspect = width / height; // カメラのアスペクト比の再調整 camera.updateProjectionMatrix(); animate(); // 再描画 }; <!-- three.js --> <script src="http://threejs.org/build/three.min.js"></script> <!-- OrbitControls.js --> <script src="http://jsrun.it/assets/e/w/8/e/ew8eQ"></script> <div id="webgl" style="background-color:#e6e6fa"></div> 地理院地図3Dデータを使ってみるテスト(その10改3) * { margin: 0; padding: 0; border: 0; overflow: hidden; } body { background: #000; } 地理院地図3Dデータを使ってみるテスト(その10改3) <対応した点> ・地図データを富士山から黒部峡谷に変更 <参考> ■ 立体地図の表示例(黒部峡谷) http://cyberjapandata.gsi.go.jp/3d/picture/kurobekyoukoku/index.html ■ 地理院地図3Dデータを使ってみるテスト http://jsdo.it/cx20/l4shv ■ 地理院地図3Dデータを使ってみるテスト(その13) http://jsdo.it/cx20/4D7O // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その10改2)" http://jsdo.it/cx20/sL2i // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その10改)" http://jsdo.it/cx20/yc3W // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その10)" http://jsdo.it/cx20/wbmT // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その9)(失敗)" http://jsdo.it/cx20/d2KX // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その8)" http://jsdo.it/cx20/8Jmv // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その7)" http://jsdo.it/cx20/A5nH // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その6)" http://jsdo.it/cx20/i5wV // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その5)" http://jsdo.it/cx20/qEka // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その4)" http://jsdo.it/cx20/jEqZ // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その3)" http://jsdo.it/cx20/ky6o // forked from cx20's "地理院地図3Dデータを使ってみるテスト(その2)" http://jsdo.it/cx20/rrlt // forked from cx20's "地理院地図3Dデータを使ってみるテスト" http://jsdo.it/cx20/l4shv var scene; var camera; var theta = 0; var cylinders = []; var angles = []; function animate() { requestAnimationFrame( animate ); render(); } function render() { camera.lookAt(scene.position); /* camera.position.x = 100 * Math.sin(theta * Math.PI / 180); camera.position.y = 100 * Math.cos(60 * Math.PI / 180); camera.position.z = 100 * Math.cos(theta * Math.PI / 180); */ controls.update(); theta += 0.1; renderer.render(scene, camera); } width = window.innerWidth; height = window.innerHeight; var xhr = new XMLHttpRequest(); xhr.addEventListener('load', function (evt) { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000); camera.position.set(0, 100, 100); renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height); controls = new THREE.OrbitControls( camera, renderer.domElement ); controls.userPan = false; controls.userPanSpeed = 0.0; controls.maxDistance = 5000.0; controls.maxPolarAngle = Math.PI * 0.495; controls.autoRotate = true; //true:自動回転する,false:自動回転しない controls.autoRotateSpeed = -2.0; //自動回転する時の速度 var n = 2; var x1 = 128; var y1 = 128; var x2 = 192 / n; var y2 = 192 / n; var geometry = new THREE.BoxGeometry(4,2,4); var s = (evt.target.response || evt.target.responseText).split("\n"); for (var i = 0; i < y2; i++) { var colors = []; var r = s[Math.floor(i * n)].split(","); for (var j = 0; j < x2; j++) { var x = (j * n / 2) - 50; var y = Math.floor((r[j * n] * 1) / n * n); var z = ((i - 1) * n / 2) - 50; var color = new THREE.Color(); console.log( y ); color.setHSL((y / 40 * 360 | 0) / 360.0, 0.80, 0.50); var material = new THREE.MeshLambertMaterial({ color: color, wireframe: false }); var mesh = new THREE.Mesh(geometry, material); mesh.position.x = x; mesh.position.y = y; mesh.position.z = z; scene.add(mesh); } } var light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.set(-10, 50, 50).normalize(); scene.add(light); var light2 = new THREE.DirectionalLight(0xffffff); light2.position.set(-100, 0, 50).normalize(); scene.add(light2); document.getElementById('webgl').appendChild(renderer.domElement); animate(); }, false); //xhr.open('GET', 'dem.csv', true); //xhr.open('GET', '/assets/2/g/t/o/2gtor', true); // 富士山 //xhr.open('GET', '/assets/4/9/G/4/49G4v', true); // 芦ノ湖 xhr.open('GET', '/assets/7/D/o/H/7DoHj', true); // 黒部峡谷 xhr.send(null); window.onresize = function () { width = window.innerWidth; height = window.innerHeight; renderer.setSize(width, height); // レンダラ―画面の再設定 camera.aspect = width / height; // カメラのアスペクト比の再調整 camera.updateProjectionMatrix(); animate(); // 再描画 }; <!-- three.js --> <script src="http://threejs.org/build/three.min.js"></script> <!-- OrbitControls.js --> <script src="http://jsrun.it/assets/e/w/8/e/ew8eQ"></script> <div id="webgl" style="background-color:#e6e6fa"></div> * { margin: 0; padding: 0; border: 0; overflow: hidden; } body { background: #000; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? 地理院地図3Dデータを使ってみるテスト(その10改3) <対応した点> ・地図データを富士山から黒部峡谷に変更 <参考> ■ 立体地図の表示例(黒部峡谷) http://cyberjapandata.gsi.go.jp/3d/picture/kurobekyoukoku/index.html ■ 地理院地図3Dデータを使ってみるテスト http://jsdo.it/cx20/l4shv ■ 地理院地図3Dデータを使ってみるテスト(その13) http://jsdo.it/cx20/4D7O Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author cx20 URLhttp://profile.hatena.ne.jp/cx20/ プログラマ(マイクロソフト系の言語を使用することが多いです。) JavaScript のライブラリを色々と試して遊んでます。 ■ 各種 WebGL ライブラリによる基本サンプル一覧 http://qiita.com/cx20/items/0fa19c96aa6470d98807 ■ 各種 WebGLライブラリと3D物理演算ライブラリの組み合わせ一覧 http://qiita.com/cx20/items/3ebed669fb9c9e797935 ■ glTF 対応ライブラリのサンプル一覧 https://github.com/cx20/gltf-test ■ Grimoire.js サンプル一覧 http://jsdo.it/tag/Grimoire.js ■ GLBoost サンプル一覧 http://jsdo.it/tag/GLBoost Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/zt4L/js"></script> art&design html5_elements&api library&test Discussion Questions on this code? Tags art&design html5_elements&api library&test