block by nitaku 032c1724a0433ae0f85f

Three.js isometric camera

Full Screen

An example using three.js to render a cube with an isometric camera.

Adapted from this example.

index.js

// Generated by CoffeeScript 1.4.0
(function() {
  var D, aspect, camera, cube, geometry, height, light, 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.WebGLRenderer();

  renderer.setSize(width, height);

  document.body.appendChild(renderer.domElement);

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

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

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

  scene.add(cube);

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

  light = new THREE.PointLight(0xffffff, 6, 40);

  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">
    <meta name="description" content="Three.js animated cube" />
    <title>Three.js animated cube</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.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.WebGLRenderer()
renderer.setSize(width, height)
document.body.appendChild(renderer.domElement)

# create the cube
geometry = new THREE.BoxGeometry(1,1,1)
material = new THREE.MeshPhongMaterial
  ambient: 0x555555
  color: 0x555555
  specular: 0xffffff
  shininess: 50
  shading: THREE.SmoothShading

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

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

light = new THREE.PointLight(0xffffff, 6, 40)
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;
}

canvas {
  width: 960px;
  height: 500px;
}