Skip to content

Instantly share code, notes, and snippets.

@nitaku
Last active October 18, 2023 12:17
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nitaku/032c1724a0433ae0f85f to your computer and use it in GitHub Desktop.
Save nitaku/032c1724a0433ae0f85f to your computer and use it in GitHub Desktop.
Three.js isometric camera
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment