isometric drawing experiment with three.js
click the shape to enable/disable animation
source code here
<!DOCTYPE html> | |
<title>three.js</title> | |
<script src="https://raw.github.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script> | |
<script src="https://raw.github.com/mrdoob/three.js/r45/build/Three.js"></script> | |
<script src="https://raw.github.com/mrdoob/three.js/r45/examples/js/RequestAnimationFrame.js"></script> | |
<script src="iso.coffee" type="text/coffeescript"></script> | |
<style type="text/css"> | |
canvas { | |
display: block; | |
margin: 0 auto; | |
} | |
</style> |
WIDTH = 600 | |
HEIGHT = 600 | |
CUBE_SIZE = 50 | |
ROWS = 3 | |
geometry = new THREE.CubeGeometry CUBE_SIZE, CUBE_SIZE, CUBE_SIZE | |
materials = [ | |
new THREE.MeshBasicMaterial color: 0xffffff, shading: THREE.FlatShading | |
new THREE.MeshBasicMaterial color: 0x000000, shading: THREE.FlatShading, wireframe: true, wireframeLinewidth: 5 | |
] | |
group = new THREE.Object3D() | |
for outer in [1..ROWS] | |
for inner in [1..outer] | |
cube = new THREE.Mesh geometry, materials | |
cube.position = new THREE.Vector3( | |
outer * -CUBE_SIZE + inner * CUBE_SIZE | |
inner * -CUBE_SIZE + CUBE_SIZE * ROWS | |
outer * CUBE_SIZE - CUBE_SIZE * ROWS | |
) | |
group.add cube | |
scene = new THREE.Scene() | |
scene.add group | |
camera = new THREE.OrthographicCamera WIDTH / -2, HEIGHT / 2, WIDTH / 2, HEIGHT / -2, -100, 1000 | |
camera.position = new THREE.Vector3 100, 100, 100 | |
camera.lookAt scene.position | |
renderer = new THREE.CanvasRenderer() | |
renderer.setSize WIDTH, HEIGHT | |
document.body.appendChild renderer.domElement | |
renderer.render scene, camera | |
animate = false | |
render = -> | |
window.requestAnimationFrame render | |
if animate | |
group.rotation.y += 0.01 | |
renderer.render scene, camera | |
render() | |
document.addEventListener 'mousedown', (-> animate = not animate), false |
http://bl.ocks.org/1328186