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.
Last active
May 8, 2023 17:59
-
-
Save nitaku/3df4da046b56958e45cc to your computer and use it in GitHub Desktop.
Three.js isometric SVG
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 = 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) |
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
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| svg path { | |
| shape-rendering: crispEdges; | |
| } |
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> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Three.js isometric SVG</title> | |
| <link type="text/css" href="index.css" rel="stylesheet"/> | |
| <script src="http://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> |
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
| // 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment