test

jsdoit.css

body{margin:0;padding:0;overflow:hidden}
.banner{background-color:rgba(204,204,204,0.333);position:fixed;top:0;left:0}

jsdoit.html

<div id="container"></div>
<script src="http://jsrun.it/assets/r/z/o/W/rzoW1"></script><!-- d3.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.min.js"></script><!-- three.js -->
<script src="http://jsrun.it/assets/t/m/J/w/tmJwU"></script><!-- TrackballControl.js -->

<div class="banner">
  国土地理院
  <br>
  &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors
</div>

jsdoit.js

// Generated by CoffeeScript 1.7.1
// Source URL: TODO

var camera, renderer, scene;

window.lonlatToTile = function(lon, lat, zoom) {
  var lonDegreesPerTile, numOfTiles, sinLat, tx, ty;
  numOfTiles = Math.pow(2, zoom);
  lonDegreesPerTile = 360 / numOfTiles;
  sinLat = Math.sin(lat * Math.PI / 180);
  tx = (lon + 180) / lonDegreesPerTile;
  ty = (0.5 + -0.5 * Math.log((1 + sinLat) / (1 - sinLat)) / (2 * Math.PI)) * numOfTiles;
  return [Math.floor(tx), Math.floor(ty)];
};

window.tileToLonlat = function(tx, ty, zoom) {
  var lat, latRadians, lon, numOfTiles, x, y;
  numOfTiles = Math.pow(2, zoom);
  x = tx / numOfTiles;
  y = ty / numOfTiles;
  lon = (x - (1 / 2)) / (1 / 360);
  latRadians = (y - (1 / 2)) / -(1 / (2 * Math.PI));
  lat = (2 * Math.atan(Math.exp(latRadians)) - Math.PI / 2) / Math.PI * 180;
  return [lon, lat];
};

window.tileToBoundary = function(x, y, zoom) {
  var p1, p2;
  p1 = tileToLonlat(x, y, zoom);
  p2 = tileToLonlat(x + 1, y + 1, zoom);
  return {
    n: p1[1],
    w: p1[0],
    s: p2[1],
    e: p2[0]
  };
};

window.midpoint = function(_arg, _arg1) {
  var x, x1, x2, y, y1, y2;
  x1 = _arg[0], y1 = _arg[1];
  x2 = _arg1[0], y2 = _arg1[1];
  x = x1 - (x1 - x2) / 2;
  y = y1 - (y1 - y2) / 2;
  return [x, y];
};

window.centroid = function(boundary) {
  var p1, p2;
  p1 = [boundary.w, boundary.n];
  p2 = [boundary.e, boundary.s];
  return midpoint(p1, p2);
};

window.createProjection = function(center) {
  return d3.geo.mercator().scale(6.5 * 1000 * 1000).center(center).translate([0, 0]);
};

window.loadDem = function(tile) {
  var baseUrl, parseDemCsv, url;
  parseDemCsv = function(text) {
    return text.substring(0, text.length - 1).split('\n').map(function(row) {
      return row.split(',').map(function(height) {
        return parseFloat(height) || -1;
      });
    });
  };
  baseUrl = 'http://cyberjapandata.gsi.go.jp/xyz/dem/{z}/{x}/{y}.txt';
  url = baseUrl.replace(/\{([xyz])\}/g, function(match, key) {
    return tile[key];
  });
  return $.get(url).then(parseDemCsv).done(function() {
    return window.aaa = arguments;
  });
};

window.loadTexture = function(tile) {
  var baseUrl, url;
  THREE.ImageUtils.crossOrigin = '*';
  baseUrl = 'http://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png';
  url = baseUrl.replace(/\{([xyz])\}/g, function(match, key) {
    return tile[key];
  });
  return $.when(THREE.ImageUtils.loadTexture(url));
};

window.createGround = function(project, boundary, dem, mapimage) {
  var geometry, ground, latDegreesPerSegment, lonDegreesPerSegment, xlength, ylength;
  xlength = dem[0].length;
  ylength = dem.length;
  lonDegreesPerSegment = (boundary.e - boundary.w) / xlength;
  latDegreesPerSegment = (boundary.n - boundary.s) / ylength;
  geometry = new THREE.PlaneGeometry(0, 0, xlength - 1, ylength - 1);
  dem.forEach(function(row, yindex) {
    return row.forEach(function(height, xindex) {
      var lat, lon, vertex, x, y, _ref;
      lon = boundary.w + lonDegreesPerSegment * xindex;
      lat = boundary.n - latDegreesPerSegment * yindex;
      _ref = project([lon, lat]), x = _ref[0], y = _ref[1];
      vertex = geometry.vertices[xindex + (yindex * xlength)];
      vertex.x = x;
      vertex.y = y;
      return vertex.z = dem[yindex][xindex];
    });
  });
  ground = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
    map: mapimage,
    opacity: 0.9,
    transparent: true
  }));
  ground.rotation.x = 90 * Math.PI / 180;
  ground.scale.z = -1;
  return ground;
};

window.tileKaruizawa = {
  x: 14501,
  y: 6414,
  z: 14
};

scene = window.scene = null;

renderer = window.renderer = null;

camera = window.camera = null;

$(function() {
  var atmospere, boundary, center, loading, project, targetTile;
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById('container').appendChild(renderer.domElement);
  atmospere = new THREE.Mesh(new THREE.SphereGeometry(20000, 60, 49), new THREE.MeshBasicMaterial({
    color: 0xeeeeff
  }));
  atmospere.scale.x = -1;
  scene.add(atmospere);
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 40 * 1000);
  camera.position.set(-3000, 3000, -3000);
  scene.add(camera);
  targetTile = window.tileKaruizawa;
  boundary = tileToBoundary(targetTile.x, targetTile.y, targetTile.z);
  center = centroid(boundary);
  project = createProjection(center);
  loading = $.when.apply($, [loadDem(targetTile), loadTexture(targetTile)]);
  return loading.then(function(dem, mapimage) {
    var animate, controls, ground;
    ground = createGround(project, boundary, dem, mapimage);
    scene.add(ground);
    controls = new THREE.TrackballControls(camera, renderer.domElement);
    controls.target = new THREE.Vector3(0, 900, 0);
    return requestAnimationFrame(animate = function() {
      requestAnimationFrame(animate);
      controls.update();
      return renderer.render(scene, camera);
    });
  });
});

main.coffee

# https://developers.google.com/maps/documentation/javascript/examples/map-coordinates
window.lonlatToTile = (lon, lat, zoom) ->
  numOfTiles = 2 ** zoom
  lonDegreesPerTile = 360 / numOfTiles
  sinLat = Math.sin(lat * Math.PI / 180)
  tx = (lon + 180) / lonDegreesPerTile
  ty = (0.5 + -0.5 * Math.log((1 + sinLat) / (1 - sinLat)) / (2 * Math.PI)) * numOfTiles
  [Math.floor(tx), Math.floor(ty)]

window.tileToLonlat = (tx, ty, zoom) ->
  numOfTiles = 2 ** zoom
  x = tx / numOfTiles
  y = ty / numOfTiles

  lon = (x - (1 / 2)) / (1 / 360)
  latRadians = (y - (1 / 2)) / -(1 / (2 * Math.PI))
  lat = (2 * Math.atan(Math.exp(latRadians)) - Math.PI / 2) / Math.PI * 180
  [lon, lat]

window.tileToBoundary = (x, y, zoom) ->
  p1 = tileToLonlat(x, y, zoom)
  p2 = tileToLonlat(x + 1, y + 1, zoom)

  n: p1[1]
  w: p1[0]
  s: p2[1]
  e: p2[0]

window.midpoint = ([x1, y1], [x2, y2]) ->
  x = x1 - (x1 - x2) / 2
  y = y1 - (y1 - y2) / 2
  [x, y]

window.centroid = (boundary) ->
  p1 = [boundary.w, boundary.n]
  p2 = [boundary.e, boundary.s]
  midpoint(p1, p2)



window.createProjection = (center) ->
  d3.geo.mercator()
    .scale(6.5 * 1000 * 1000)
    .center(center)
    .translate([0, 0])



window.loadDem = (tile) ->
  parseDemCsv = (text) ->
    text.substring(0, text.length - 1)
      .split('\n')
      .map (row) ->
        row.split(',').map (height) ->
          parseFloat(height) || -1

  baseUrl = 'http://cyberjapandata.gsi.go.jp/xyz/dem/{z}/{x}/{y}.txt'
  url = baseUrl.replace /\{([xyz])\}/g, (match, key) -> tile[key]
  $.get(url)
    .then(parseDemCsv)
    .done -> window.aaa = arguments


window.loadTexture = (tile) ->
  THREE.ImageUtils.crossOrigin = '*'
  baseUrl = 'http://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png'
  url = baseUrl.replace /\{([xyz])\}/g, (match, key) -> tile[key]
  $.when(THREE.ImageUtils.loadTexture(url))



window.createGround = (project, boundary, dem, mapimage) ->
  xlength = dem[0].length
  ylength = dem.length
  lonDegreesPerSegment = (boundary.e - boundary.w) / xlength
  latDegreesPerSegment = (boundary.n - boundary.s) / ylength

  geometry = new THREE.PlaneGeometry \
    0, 0, # initial geometry size
    xlength - 1, ylength - 1 # segments

  dem.forEach (row, yindex) ->
    row.forEach (height, xindex) ->
      lon = boundary.w + lonDegreesPerSegment * xindex
      lat = boundary.n - latDegreesPerSegment * yindex
      [x, y] = project [lon, lat]

      vertex = geometry.vertices[xindex + (yindex * xlength)]
      vertex.x = x
      vertex.y = y
      vertex.z = dem[yindex][xindex]

  ground = new THREE.Mesh \
    geometry,
    new THREE.MeshBasicMaterial
      map: mapimage
      opacity: 0.9
      transparent: true
      # side: THREE.DoubleSide

  ground.rotation.x = 90 * Math.PI / 180
  ground.scale.z = -1
  ground



window.tileKaruizawa =
  x: 14501
  y: 6414
  z: 14

scene = window.scene = null
renderer = window.renderer = null
camera = window.camera = null

$ ->

  scene = new THREE.Scene()
  renderer = new THREE.WebGLRenderer()

  renderer.setSize(window.innerWidth, window.innerHeight)
  document.getElementById('container').appendChild(renderer.domElement)

  atmospere = new THREE.Mesh \
    new THREE.SphereGeometry(20000, 60, 49),
    new THREE.MeshBasicMaterial(color: 0xeeeeff)
  atmospere.scale.x = -1
  scene.add atmospere




  camera = new THREE.PerspectiveCamera \
    70,
    window.innerWidth / window.innerHeight,
    1,
    40 * 1000
  camera.position.set(-3000, 3000, -3000)
  scene.add(camera)



  targetTile = window.tileKaruizawa
  boundary = tileToBoundary(targetTile.x, targetTile.y, targetTile.z)
  center = centroid(boundary)
  project = createProjection(center)


  loading = $.when [
    loadDem(targetTile)
    loadTexture(targetTile)
  ]...

  loading.then (dem, mapimage) ->
    ground = createGround(project, boundary, dem, mapimage)
    scene.add(ground)

    controls = new THREE.TrackballControls(camera, renderer.domElement)
    controls.target = new THREE.Vector3(0, 900, 0)


    requestAnimationFrame animate = ->
      requestAnimationFrame(animate)

      controls.update()
      renderer.render(scene, camera)