Just dipping my toes into the world of three.js...my cube is displaying in black even though I set the color to red. Any ideas why?
<!DOCTYPE html>
<html>
<head>
<title>Experimenting with shapes</title>
<script type="text/javascript" src="../lib/threejs/build/three.js"></script>
<script type="text/javascript" src="../lib/jquery-2.1.3.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="output">
</div>
<script type="text/javascript">
$(function() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
var cubeGeometry = new THREE.CubeGeometry(8,8,8);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x990000});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
scene.add(cube);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
$("#output").append(renderer.domElement);
renderer.render(scene, camera);
});
</script>
</body>
</html>
I specified the color in the mesh lambert material...I'm unsure why it's showing up as black instead of red. Could it be related to the setClearColour function by any chance?