isometric drawing experiment with three.js
click the shape to enable/disable animation
source code here
Created
October 31, 2011 17:59
-
-
Save j4mie/1328186 to your computer and use it in GitHub Desktop.
blocks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
http://bl.ocks.org/1328186