I am new to using THREE.js and I'm having trouble rendering a sphere in the center of my canvas. Can anyone help troubleshoot my code? Here is what I have:
<canvas id='canvas' width='960' height='720'></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"></script>
<script>
var T = THREE;
var canvas = document.getElementById('canvas');
var WIDTH = 960, HEIGHT = 720;
var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000;
var renderer = new T.WebGLRenderer({antialias:true});
var camera = new T.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
var scene = new T.Scene();
scene.add(camera);
camera.position.z = 300;
renderer.setSize(WIDTH, HEIGHT);
var sphMat = new T.MeshLambertMaterial({color: 0x778B71});
var sph = new T.Mesh(new T.SphereGeometry(5, 20, 20), sphMat);
sph.position.x = 0;
sph.position.y = 0;
sph.position.z = 0;
scene.add(sph);
renderer.render(scene, camera);
canvas.appendChild(renderer.domElement);
</script>