isometric drawing experiment with three.js
click the shape to enable/disable animation
source code here
-
-
Save DamonOehlman/2048970 to your computer and use it in GitHub Desktop.
blocks
This file contains 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 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 = 20 | |
| ROWS = 20 | |
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment