I feel like I'm at my wit's end. I've been struggling to make anything render in this simple three.js program and it's driving me insane. I've tried everything - adding cubes, copying geometries, adjusting lights, moving the camera, but nothing works. I can't see anything but the background color of the scene. It's like every time I try to work on a project, I'm met with obstacle after obstacle, and it's frustrating beyond belief. It's like hitting a brick wall over and over again...
My HTML is fine, the scene renders perfectly in the background. But no matter what I do, I can't get any shaded geometries to show up. There are no console errors, no issues in VS Code, and other projects run perfectly. It's like a curse has been placed on this project, stopping me in my tracks...
Everything seems to be set up correctly - I have the context, renderer, loader, scene, and camera all defined. I even have lights and a red sphere object in the scene. Yet, no matter what I do, it just won't render properly. I'm running the web app on Node liveserver, and my browser is up to date, so I'm at a loss...
var context = null,
renderer = null,
loader = null,
scene = null,
camera = null;
var redSphere;
var cube;
function onLoad() {
//CONTEXT
context = document.getElementById("deep");
context.style.height = "100vh";
context.style.width = "100vw";
//RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize(window.innerWidth, window.innerHeight);
context.appendChild(renderer.domElement);
//CAMERA
camera = new THREE.PerspectiveCamera(45, context.offsetWidth/context.offsetHeight, 1, 100);
camera.position.set(0, 0, 0);
//SCENE
scene = new THREE.Scene();
scene.background = new THREE.Color("rgb(20, 0, 20)");
//LIGHTS
var sun1 = new THREE.AmbientLight(0xffffff, 1.0);
var sun2 = new THREE.DirectionalLight(0xffffff, 1.0);
var sun3 = new THREE.DirectionalLight(0xffffff, 1.0);
sun1.position.set(0, 0, 0);
sun2.position.set(-3, 3, 2);
sun3.position.set(0, -3, 2);
scene.add(sun1, sun2, sun3);
//RED OBJECT
var sphereGeo = new THREE.BoxGeometry(1, 1, 1);
var redSphereMat = new THREE.MeshPhongMaterial({color: "rgb(255, 0, 0)" });
redSphere = new THREE.Mesh(sphereGeo, redSphereMat);
redSphere.position.set(0, 5, 0);
scene.add(redSphere);
draw();
}
function draw() {
renderer.render(scene, camera);
camera.lookAt(redSphere);
redSphere.rotation.y -= 0.1;
requestAnimationFrame(draw);
}