Recently, I decided to dive into creating a POV game by following a tutorial on YouTube. However, I ran into an issue during episode 8 of the tutorial where Google Chrome started displaying a white screen no matter what changes I made in the JavaScript code. Despite inspecting the code with Chrome's developer tools, I couldn't find any warnings or errors.
In an attempt to troubleshoot the problem, I started fresh with new files and cleared the caches for Chrome. I meticulously compared my altered code with the original source code from the tutorial, but none of my modifications seemed problematic (although I am still relatively new to JavaScript). Below is the revised JavaScript file that closely follows the instructions from the YouTube tutorial:
var scene, camera, renderer, mesh;
function init(){
scene = new THREE.Scene();
scene.background = new THREE.Color(0x8CD9FF);
camera = new THREE.PerspectiveCamera(90, 1280/720, 0.1, 10);
mesh = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({color: 0xff9999, wireframe: true})
);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(1280/720);
document.body.appendChild(renderer.domElement);
animate();
}
function animate(){
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
window.onload = init;