<!DOCTYPE html>
<html>
<head>
<title>Threejs: Set Scene, Camera, Renderer and a Cube</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();
// 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.MeshBasicMaterial({
color: 0x00ff00
});
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);
// Show the scene
renderer.render(scene, camera);
</script>
</body>
</html>
Related Snippets
