{"id":1347,"date":"2015-07-28T13:19:49","date_gmt":"2015-07-28T04:19:49","guid":{"rendered":"http:\/\/www.digifie.jp\/blog\/?p=1347"},"modified":"2015-07-29T23:39:52","modified_gmt":"2015-07-29T14:39:52","slug":"three-js-geoglobe-openweathermap","status":"publish","type":"post","link":"https:\/\/www.digifie.jp\/blog\/archives\/1347","title":{"rendered":"three.js GeoGlobe + OpenWeatherMap"},"content":{"rendered":"
Facebook \u306b\u30b7\u30a7\u30a2<\/a><\/div>
Tweet<\/a><\/div><\/div>\n
\n
\"\u753b\u50cf\u30af\u30ea\u30c3\u30af\u3067\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8\u3092\u8868\u793a\"<\/a>

\u753b\u50cf\u30af\u30ea\u30c3\u30af\u3067\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8\u3092\u8868\u793a<\/p><\/div>\n

Flash \u304b js \u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3067\u30013D \u306e\u5730\u7403\u5100\u4e0a\u306b\u8a72\u5f53\u5730\u70b9\u3092\u793a\u3059\u30de\u30fc\u30ab\u30fc\u3092\u7acb\u3066\u3066\u3001\u305d\u306e\u5730\u70b9\u306e\u5929\u6c17\u3092\u5225\u67a0\u3067\u8868\u793a\u3068\u3044\u3046\u3088\u3046\u306a\u3053\u3068\u3092\u3084\u308b\u5fc5\u8981\u304c\u3067\u3066\u304d\u305f\u307f\u305f\u3044\u306a\u306e\u3067\u3001\u8abf\u67fb\u3092\u304b\u306d\u3066 three.js \u3067\u30b5\u30f3\u30d7\u30eb\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n

3\u6b21\u5143\u4e0a\u3078\u306e\u30de\u30fc\u30ab\u30fc\u8868\u793a\u306f\u3061\u3087\u3063\u3068\u60c5\u5831\u304c\u53e4\u3044\u3067\u3059\u304c \u3053\u3061\u3089<\/a> \u3092\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u3001\u3053\u306e Flash \u3092\u5143\u306b three.js \u3067\u5b9f\u88c5\u3057\u307e\u3057\u305f\u3002
\n\u305d\u308c\u306b\u52a0\u3048\u3066\u3001\u5ea7\u6a19\u3092\u30d7\u30ed\u30c3\u30c8\u3059\u308b\u969b\u306b OpenWeatherMap<\/a> \u304b\u3089\u305d\u306e\u5730\u70b9\u306e\u5929\u6c17\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u304d\u3066\u3001\u753b\u9762\u4e0a\u90e8\u306e\u30d5\u30a9\u30fc\u30e0\u306b\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n

\u3063\u3066\u3044\u3046\u304b js \u3084\u308b\u3093\u3060\u3063\u305f\u3089\u3044\u3064\u307e\u3067\u3082\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3067\u66f8\u3044\u3066\u306a\u3044\u3067\u3001\u305d\u308d\u305d\u308d\u3061\u3083\u3093\u3068 IDE \u3092\u5c0e\u5165\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u306e\u304b\u306a\u2026<\/p>\n

\u4eca\u56de\u306e\u30bd\u30fc\u30b9\u306f\u4e0b\u8a18\u3067\u3059\u3002<\/p>\n

\u30fbearth.js<\/p>\n

var container;\r\nvar camera;\r\nvar scene;\r\nvar geometry;\r\nvar material;\r\nvar spherMesh;\r\nvar renderer;\r\nvar controls;\r\nvar radius = 200;\r\nvar latitudeDegreeOffset = 90;\r\nvar longitudeDegreeOffset = 0;\r\nvar markers = [];\r\nvar tempOfset = 273.15;\r\n\r\nsetup();\r\n\r\nfunction setup()\r\n{\r\n    container = document.getElementById('container');\r\n    camera = new THREE.PerspectiveCamera(45, window.innerWidth \/ window.innerHeight, 1, 1000);\r\n    camera.position.z = 700;\r\n\r\n    scene = new THREE.Scene();\r\n    geometry = new THREE.SphereGeometry(radius, 30, 30);\r\n    material = new THREE.MeshBasicMaterial({\r\n        map: THREE.ImageUtils.loadTexture("earth.jpg")\r\n    });\r\n    spherMesh = new THREE.Mesh(geometry, material);\r\n    spherMesh.overdraw = true;\r\n    spherMesh.rotation.y = 60;\r\n    scene.add(spherMesh);\r\n\r\n    renderer = new THREE.WebGLRenderer();\r\n    renderer.setSize(window.innerWidth, window.innerHeight);\r\n    container.appendChild(renderer.domElement);\r\n\r\n    controls = new THREE.OrbitControls(camera, renderer.domElement);\r\n\r\n    renderer.setSize( window.innerWidth, window.innerHeight );\r\n\r\n    render();\r\n}\r\n\r\nfunction render()\r\n{\r\n    requestAnimationFrame(render);\r\n    spherMesh.rotation.y -= 0.001;\r\n    controls.update();\r\n    renderer.render(scene, camera);\r\n}\r\n\r\n\/\/\r\nfunction translateGeoCoords( latitude, longitude, radius )\r\n{\r\n  \tlatitude = Math.PI * latitude \/ 180;\r\n\tlongitude = Math.PI * longitude \/ 180;\r\n\r\n\tlatitude -= ( latitudeDegreeOffset * ( Math.PI \/ 180 )); \/\/ offset latitude by n degrees (in radians).\r\n\tlongitude -= ( longitudeDegreeOffset * ( Math.PI \/ 180 )); \/\/ offset longitude by n degrees (in radians).\r\n\r\n\tvar x = radius * Math.sin( latitude ) * Math.cos( longitude );\r\n\tvar y = radius * Math.sin( latitude ) * Math.sin( longitude );\r\n\tvar z = radius * Math.cos( latitude );\r\n\r\n\treturn new THREE.Vector3( -x, z, y ); \/\/ threejs \u306e\u53f3\u624b\u5ea7\u6a19\u7cfb\u306b\u5408\u308f\u305b\u3066\u5024\u3092\u5165\u308c\u308b\uff08\u4e0a\u8a18\u5909\u63db\u5f0f\u306f\u5de6\u624b\u5ea7\u6a19\u7cfb\uff09\r\n}\r\n\r\n\/\/\r\nfunction onClick()\r\n{\r\n  var lat = form1.field1.value;\r\n  var lon = form1.field2.value;\r\n\r\n  \/\/ test\r\n  apiRequest(lat, lon);\r\n}\r\n\r\nfunction onClear()\r\n{\r\n  for (var i = 0; i < markers.length; i++) {\r\n    spherMesh.remove(markers[i]);\r\n    markers[i].geometry.dispose();\r\n    markers[i].material.dispose();\r\n    markers[i] = null;\r\n  }\r\n\r\n  markers = [];\r\n  form1.field3.value = "";\r\n}\r\n\r\n\/\/\r\nfunction addMarker(lat, lon, col)\r\n{\r\n  if(isNaN(lat) || isNaN(lon))\r\n  {\r\n    alert("NaN")\r\n    return;\r\n  }\r\n\r\n  var vec3 = translateGeoCoords(lat, lon, radius);\r\n  var geo = new THREE.BoxGeometry(2,2,20);\r\n  var mat = new THREE.MeshBasicMaterial({color:col});\r\n  markers.push(new THREE.Mesh(geo, mat));\r\n  markers[markers.length-1].position.set(vec3.x, vec3.y, vec3.z);\r\n  spherMesh.add(markers[markers.length-1]);\r\n\r\n  markers[markers.length-1].lookAt(spherMesh.position);\r\n}\r\n\r\n\r\n\/**\r\n* OpenWeatheMap API\r\n**\/\r\nfunction getOpenWeatheMapQueri(lat, lon)\r\n{\r\n  var api = "http:\/\/api.openweathermap.org\/data\/2.5\/weather";\r\n  var queri = api + "?lat=" + lat + "&lon=" + lon;\r\n  return queri;\r\n}\r\n\r\n\/\/ OpenWeatheMap API \u306e\u547c\u3073\u51fa\u3057\r\nfunction apiRequest(lat, lon)\r\n{\r\n  var httpObj = new XMLHttpRequest();\r\n  httpObj.open("get", getOpenWeatheMapQueri(lat, lon), true);\r\n\r\n  \/\/ onload \u30cf\u30f3\u30c9\u30e9\r\n  httpObj.onload = function(){\r\n  \tvar json = JSON.parse(this.responseText);\r\n    console.log(json);\r\n\r\n    var weather = json.weather[0].main;\r\n    var temp = new Number(json.main.temp);\r\n    temp -= tempOfset;\r\n\r\n    form1.field3.value = json.name + "  |  weather : " + weather + "  |  temp : " + temp.toFixed(1) + "\u00b0C  humidity : " + json.main.humidity + "%";\r\n\r\n    \/\/\r\n    var col;\r\n    switch (weather)\r\n    {\r\n      case "Clear":\r\n        col = 0xFF9900;\r\n        break;\r\n      case "Clouds":\r\n        col = 0xCCAAFF;\r\n        break;\r\n      case "Rain":\r\n        col = 0x0099FF;\r\n        break;\r\n      case "Snow":\r\n        col = 0xFFFFFF;\r\n        break;\r\n      default:\r\n        col = 0xFF0000;\r\n    }\r\n    addMarker(lat, lon, col);\r\n  }\r\n  httpObj.send(null);\r\n}\r\n\r\n\/\/\r\nwindow.addEventListener('resize', function()\r\n{\r\n\trenderer.setSize(window.innerWidth, window.innerHeight);\r\n\tcamera.aspect = window.innerWidth \/ window.innerHeight;\r\n\tcamera.updateProjectionMatrix();\r\n}, false );\r\n<\/pre>\n
\u30fbindex.html<\/p>\n
<!DOCTYPE html>\r\n\t<html>\r\n\t<head>\r\n\t\t<meta charset="UTF-8" \/>\r\n\t\t<title>Three.js Geo Globe<\/title>\r\n\t\t<link rel="stylesheet" type="text\/css" href="style.css" \/>\r\n\t\t<script type="text\/javascript" src="..\/three.min.js"><\/script>\r\n\t\t<script src="..\/OrbitControls.js"><\/script>\r\n\t<\/head>\r\n\t<body>\r\n\t\t<form name="form1">\r\n\t\t\t<p>\u3000\u3000latitude : <input type="text" name="field1" size="10" value="33.6">\r\n\t\t\t\t\u3000longitude : <input type="text" name="field2" size="10"  value="130.4">\r\n\t\t\t\t\u3000<input class="button1" type="button" value="ADD GeoLocation Marker" onClick=onClick()>\r\n\t\t\t\t<input class="button2" type="button" value="CLEAR GeoLocation Marker" onClick=onClear()>\r\n\t\t\t\t<output type="text" name="field3" size="14">\r\n\t\t\t<\/p>\r\n\t\t<\/form>\r\n\t\t<div id="container"><\/div>\r\n\t\t<script type="text\/javascript" src="earth.js"><\/script>\r\n\t<\/body>\r\n<\/html><\/pre>\n
\u30fbstyle.css<\/p>\n
* {\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  overflow: hidden;\r\n  font-family: "Arial", sans-serif;\r\n  font-size: 11px;\r\n}\r\n\r\np {\r\n  background: #CCCCCC;\r\n  line-height: 32px;\r\n}\r\n\r\ninput.button1 {\r\n  background: #990000;\r\n  color: #ffffff;\r\n  width: 180px;\r\n  margin: 2px;\r\n  line-height: 20px;\r\n}\r\n\r\ninput.button1:hover {\r\n  background: #ffffff;\r\n  color: #990000;\r\n}\r\n\r\ninput.button2 {\r\n  background: #ff6600;\r\n  color: #ffffff;\r\n  width: 200px;\r\n  margin: 2px;\r\n  line-height: 20px;\r\n}\r\n\r\ninput.button2:hover {\r\n  background: #ffffff;\r\n  color: #ff6600;\r\n}\r\n\r\nbody {\r\n  background: #000000;\r\n}\r\n<\/pre>\n
        
Facebook \u306b\u30b7\u30a7\u30a2<\/a><\/div>        
Tweet<\/a><\/div><\/div>\n
\n","protected":false},"excerpt":{"rendered":"
Flash \u304b js \u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3067\u30013D \u306e\u5730\u7403\u5100\u4e0a\u306b\u8a72\u5f53\u5730\u70b9\u3092\u793a\u3059\u30de\u30fc\u30ab\u30fc\u3092\u7acb\u3066\u3066\u3001\u305d\u306e\u5730\u70b9\u306e\u5929\u6c17\u3092\u5225\u67a0\u3067\u8868\u793a\u3068\u3044\u3046\u3088\u3046\u306a\u3053\u3068\u3092\u3084\u308b\u5fc5\u8981\u304c\u3067\u3066\u304d\u305f\u307f\u305f\u3044\u306a\u306e\u3067\u3001\u8abf\u67fb\u3092\u304b\u306d\u3066 three.js \u3067\u30b5\u30f3\u30d7\u30eb\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[45],"tags":[],"_links":{"self":[{"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts\/1347"}],"collection":[{"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/comments?post=1347"}],"version-history":[{"count":10,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts\/1347\/revisions"}],"predecessor-version":[{"id":1359,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts\/1347\/revisions\/1359"}],"wp:attachment":[{"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/media?parent=1347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/categories?post=1347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/tags?post=1347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}