three.js

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<div id="canvas"></div>
<div class="cnt">
  <canvas id="depth0" width="140" height="30"></canvas>
  <canvas id="depth1" width="120" height="30"></canvas>
  <canvas id="depth2" width="100" height="30"></canvas>
</div>
<input id="scale" type="range" />

CSS

.cnt {
    display: none;
}

CoffeeScript

createNode = (params)->
  style =
    "0":
      w: 140
      h: 200
      y: 0
      z: 0
      c: 0x0000aa
      fillStyle: "#0000aa"
      canvas: $("#depth0").get(0)
    "1":
      w: 120
      h: 150
      y: -25
      z: 30
      c: 0xaa0000
      fillStyle: "#aa0000"
      canvas: $("#depth1").get(0)
    "2":
      w: 100
      h: 100
      y: -50
      z: 60
      c: 0x00aa00
      fillStyle: "#00aa00"
      canvas: $("#depth2").get(0)
        
  s = style[params.depth]
  geo  = new THREE.CubeGeometry s.w, s.h, 30
  mat  = new THREE.MeshLambertMaterial color: s.c
  mesh = new THREE.Mesh geo, mat
  mesh.position.x = params.x
  mesh.position.y = params.y + s.y
  mesh.position.z = s.z
  params.obj3d.add mesh
          
  ctx = s.canvas.getContext("2d")
  ctx.fillStyle = s.fillStyle
  ctx.fillRect 0,0,s.w,30
  ctx.fillStyle = "#aaaaaa"
  ctx.fillText params.text, 50,20
  ctx.stroke()

  texture   = new THREE.ImageUtils.loadTexture s.canvas.toDataURL()
  lGeo      = new THREE.PlaneGeometry s.w,30
  lMat      = new THREE.MeshLambertMaterial map: texture
  label     = new THREE.Mesh lGeo, lMat
  label.position.x = mesh.position.x
  label.position.y = mesh.position.y + s.h/2 -15
  label.position.z = mesh.position.z + 15.01
  params.obj3d.add label
$ ->
  width = 640
  height = 480
  group = new THREE.Object3D

  createNode
    depth: 0
    x: 0
    y: 0
    obj3d: group
    text: "xxx"  
    
  createNode
    depth: 1
    x: 0
    y: 0
    obj3d: group
    text: "yyy"
    
  createNode
    depth: 2
    x: 0
    y: 0
    obj3d: group
    text: "zzz"
    
    



  camera   = new THREE.PerspectiveCamera 40, width / height, 1, 1000
  camera.position.z = -400
  camera.lookAt group.position

  light    = new THREE.DirectionalLight 0xffffff, 1.5
  light.position = 
    x: 0
    y: 0.2
    z: -1

  scene    = new THREE.Scene

  scene.add group
  scene.add light

  renderer = new THREE.WebGLRenderer
  renderer.setSize width, height

  render = ->
    renderer.render...