Despite setting the body background color to #135462, the code below is displaying a black screen. It seems like there might be an issue with the rendering code preventing the background color from showing up properly.
Additionally, the object is not appearing on the screen as expected. You can find the link to my object here:
Does anyone have any insights into why this could be happening?
<!DOCTYPE html>
<html lang="en">
<head>
<title>My three.js Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:#135462;
color:#fff;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
}
</style>
</head>
<body>
<script src="js/three.min.js"></script>
<script src="js/loaders/BinaryLoader.js"></script>
<script src="js/loaders/ObjectLoader.js"></script>
<script src="js/Detector.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container;
var camera, scene, renderer;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 10000 );
camera.position.z = 5;
scene = new THREE.Scene();
scene.add( camera );
var loader = new THREE.ObjectLoader();
loader.load( "obj/superman/SupermanSmall.json", function(obj){
scene.add(obj);
});
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>