Skip to content

Instantly share code, notes, and snippets.

@nitaku
Last active May 8, 2023 17:59
Show Gist options
  • Save nitaku/3df4da046b56958e45cc to your computer and use it in GitHub Desktop.
Save nitaku/3df4da046b56958e45cc to your computer and use it in GitHub Desktop.
Three.js isometric SVG

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.

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)
html, body {
margin: 0;
padding: 0;
}
svg path {
shape-rendering: crispEdges;
}
<!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>
// 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