example/teapot.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <style>
    body, html{ margin: 0;}
    path{ fill: none; stroke: gray; stroke-width: 1; }
    line{ stroke: black; stroke-width: 1; }
  </style>
  <body>
  <script src="d3.js"></script>
  <script src="../dz.js"></script>
  <script>

var p = dz.projection.perspective()
  , cameraPos = [0, 0, 40]
  , camera = p.camera().position(cameraPos).lookAt([0, 0, 0])
    .focalLength(1)
  , w = window.innerWidth, h = window.innerHeight
  , max = Math.max(w, h), min = Math.min(w, h), diff = max - min
  // screen scaling
  , ranges = [ [0, max] , [ - diff / 2, max - diff / 2] ]
  , screenX = d3.scale.linear().domain([-1, 1]).range(ranges[w < h ? 1 : 0])
  , screenY = d3.scale.linear().domain([1, -1]).range(ranges[w > h ? 1 : 0])
  , svg = d3.select('body').append('svg').attr({width: w, height: h})
  , line = d3.svg.line()
      .x(function(d){ return screenX(perspective.x(d)) })
      .y(function(d){ return screenY(perspective.y(d)) })

d3.json('teapot.json', function(obj){
  var points = obj[0].positions
  var cells = obj[0].cells
  var lineMap = d3.map()
  // remove duplicate line segments
  var lines = d3.merge(cells.map(function(cell){ 
    return [ [ cell[0], cell[1] ], [ cell[1], cell[2] ] ] 
  })).forEach(function(line){ lineMap.set(line[0] + ":" + line[1], line) })
  lines = lineMap.values()

  var line = svg.selectAll('line').data(lines).enter().append('line')

  d3.timer(function(t){
    t = t / 5000
    p.camera().position(dz.matrix().rotateY(t).rotateZ(t/2)
      .multiVector(cameraPos))
    line.attr({
      x1: function(d){ return screenX(p.x(points[d[0]])) },
      y1: function(d){ return screenY(p.y(points[d[0]])) },
      x2: function(d){ return screenX(p.x(points[d[1]])) },
      y2: function(d){ return screenY(p.y(points[d[1]])) }
    })
  })
})

  </script>
  </body>
</html>