<!DOCTYPE html>
<html>
<head>
<title>Threejs: Cube with Standard Material, and a Directional Light</title>
<style>
canvas { width: 1024px; height: 512px; }
</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(75, 2, 0.1, 1000);
camera.position.set(0, 0, 2);
// Set Renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(1024, 512);
document.getElementById("container").appendChild(renderer.domElement);
// Add a Cube
var material = new THREE.MeshStandardMaterial({
color: 0x0000ff
});
var geometry = new THREE.BoxGeometry(1,1,1);
var cube = new THREE.Mesh(geometry, material);
cube.rotation.x = 22.5;
cube.rotation.y = 45;
scene.add(cube);
// Directional Light
var directionalLight = new THREE.DirectionalLight(0xffffff, 5);
directionalLight.position.x = 0;
directionalLight.position.y = 5;
directionalLight.position.z = 5;
scene.add(directionalLight);
// Show the scene
renderer.render(scene, camera);
</script>
</body>
</html>
Related Snippets
