block by nitaku 3df4da046b56958e45cc

Three.js isometric SVG

Full Screen

An example showing an isometric rendering in SVG, thanks to three.js.

The example is inspired by this post on using three.js to generate illustrations for scientific papers.

index.js

// Generated by CoffeeScript 1.4.0
(function() {
  var D, aspect, camera, cube, geometry, height, light, lil_cube, lil_geometry, material, renderer, scene, width;

  width = 960;

  height = 500;

  aspect = width / height;

  D = 1;

  scene = new THREE.Scene();

  camera = new THREE.OrthographicCamera(-D * aspect, D * aspect, D, -D, 1, 1000);

  renderer = new THREE.SVGRenderer();

  renderer.setSize(width, height);

  document.body.appendChild(renderer.domElement);

  material = new THREE.MeshPhongMaterial({
    ambient: 0x555555,
    color: 0x555555,
    specular: 0xffffff,
    shininess: 50,
    shading: THREE.SmoothShading
  });

  geometry = new THREE.BoxGeometry(1, 1, 1);

  cube = new THREE.Mesh(geometry, material);

  scene.add(cube);

  lil_geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);

  lil_cube = new THREE.Mesh(lil_geometry, material);

  lil_cube.position.x = 1;

  scene.add(lil_cube);

  scene.add(new THREE.AmbientLight(0x4000ff));

  light = new THREE.DirectionalLight(0xffffff, 2);

  light.position.set(10, 20, 15);

  scene.add(light);

  camera.position.set(20, 20, 20);

  camera.lookAt(scene.position);

  renderer.render(scene, camera);

}).call(this);

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Three.js isometric SVG</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/r68/examples/js/renderers/SVGRenderer.js"></script>
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

index.coffee

width = 960
height = 500
aspect = width/height
D = 1

scene = new THREE.Scene()
camera = new THREE.OrthographicCamera(-D*aspect, D*aspect, D, -D, 1, 1000)

renderer = new THREE.SVGRenderer()
renderer.setSize(width, height)
document.body.appendChild(renderer.domElement)

# create two cubes
material = new THREE.MeshPhongMaterial
  ambient: 0x555555
  color: 0x555555
  specular: 0xffffff
  shininess: 50
  shading: THREE.SmoothShading

geometry = new THREE.BoxGeometry(1,1,1)
cube = new THREE.Mesh(geometry, material)
scene.add(cube)

lil_geometry = new THREE.BoxGeometry(0.2,0.2,0.2)
lil_cube = new THREE.Mesh(lil_geometry, material)
lil_cube.position.x = 1
scene.add(lil_cube)

# create lights
scene.add( new THREE.AmbientLight(0x4000ff) )

light = new THREE.DirectionalLight(0xffffff, 2)
light.position.set(10, 20, 15)
scene.add(light)

# set the camera
camera.position.set(20, 20, 20)
camera.lookAt(scene.position)

renderer.render(scene, camera)

index.css

html, body {
  margin: 0;
  padding: 0;
}

svg path {
  shape-rendering: crispEdges;
}