I am currently working on a project that involves using three.js. I have been trying to learn the basics and wrote this simple code just to test it out. However, when I try to view it in the web browser, nothing appears.
Here is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="Three.js"></script>
</head>
<body>
<script type="text/javascript">
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(document.body.clientWidth,
document.body.clientHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColorHex(0xEEEEEE, 1.0);
renderer.clear();
// new THREE.PerspectiveCamera( FOV, viewAspectRatio, zNear, zFar );
var camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.z = 300;
var scene = new THREE.Scene();
var cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50),
new THREE.MeshBasicMaterial({ color: 0x000000 }));
scene.add(cube);
renderer.render(scene, camera);
</script>
</body>
</html>
What could be causing it not to work? Any suggestions on what I might have done incorrectly?