An example using three.js to render a cube with an isometric camera.
Adapted from this example.
An example using three.js to render a cube with an isometric camera.
Adapted from this example.
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.WebGLRenderer() | |
renderer.setSize(width, height) | |
document.body.appendChild(renderer.domElement) | |
# create the cube | |
geometry = new THREE.BoxGeometry(1,1,1) | |
material = new THREE.MeshPhongMaterial | |
ambient: 0x555555 | |
color: 0x555555 | |
specular: 0xffffff | |
shininess: 50 | |
shading: THREE.SmoothShading | |
cube = new THREE.Mesh(geometry, material) | |
scene.add(cube) | |
# create lights | |
scene.add( new THREE.AmbientLight(0x4000ff) ) | |
light = new THREE.PointLight(0xffffff, 6, 40) | |
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; | |
} | |
canvas { | |
width: 960px; | |
height: 500px; | |
} |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="description" content="Three.js animated cube" /> | |
<title>Three.js animated cube</title> | |
<link type="text/css" href="index.css" rel="stylesheet"/> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.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, 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.WebGLRenderer(); | |
renderer.setSize(width, height); | |
document.body.appendChild(renderer.domElement); | |
geometry = new THREE.BoxGeometry(1, 1, 1); | |
material = new THREE.MeshPhongMaterial({ | |
ambient: 0x555555, | |
color: 0x555555, | |
specular: 0xffffff, | |
shininess: 50, | |
shading: THREE.SmoothShading | |
}); | |
cube = new THREE.Mesh(geometry, material); | |
scene.add(cube); | |
scene.add(new THREE.AmbientLight(0x4000ff)); | |
light = new THREE.PointLight(0xffffff, 6, 40); | |
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); |