<!DOCTYPE html>
<html>
<head>
<title>Threejs: Four Cubes and a Perspective Camera</title>
<style>
canvas { width: 1000px; height: 500px; }
</style>
</head>
<body>
<div id="container"></div>
<script src="js/three.js"></script>
<script>
// Set Scene
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xe0e0e0); // Gray background
// Set Camera
var camera = new THREE.PerspectiveCamera(65, 2, 0.1, 1000);
camera.position.set(4, 5, 5);
camera.lookAt(0, 0, 0);
// Set Renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(1000, 500);
document.getElementById("container").appendChild(renderer.domElement);
// Add a Cube
var material = new THREE.MeshStandardMaterial({
color: 0x0000ff
});
var geometry = new THREE.BoxGeometry(2,2,2);
var cube1 = new THREE.Mesh(geometry, material);
scene.add(cube1);
// Create a cube and move it to the right
cube2 = cube1.clone();
cube2.position.x = cube2.position.x + 3;
scene.add(cube2);
// Create a cube and move it to the left
cube3 = cube1.clone();
cube3.position.x = cube3.position.x - 3;
scene.add(cube3);
// Create a cube and move it behind
cube4 = cube1.clone();
cube4.position.z = cube4.position.z - 3;
scene.add(cube4);
// Directional Light
var directionalLight = new THREE.DirectionalLight(0xffffff, 5);
directionalLight.position.x = 3;
directionalLight.position.y = 9;
directionalLight.position.z = 2;
scene.add(directionalLight);
// Show the scene
renderer.render(scene, camera);
</script>
</body>
</html>
• | Threejs: Four Cubes and an Orthographic Camera |
• | Threejs: Cube with Standard Material, and a Directional Light |
• | Threejs: Change Scene Background Color |