Recently, I decided to delve into the world of Three.js by following a thorough tutorial. While everything seemed perfectly fine in my code editor of choice (Visual Studio Code 2019), I encountered a frustrating issue when I attempted to run the code and nothing appeared on the page.
The code editor I utilized stored my HTML file on the desktop, and upon running it, all I could see was the navbar that I had meticulously programmed - nothing else rendered on the page.
Below is the complete Three.js code snippet:
<script src="three.js-dev/build/three.min.js"> </script>
<script>
var scene = new THREE.scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
$('body').append(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial ({color: 0xff0000});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cube.position.z = -5;
var animate = function () {
cube.rotation.x += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(animate);
};
animate();
Here is the code that precedes the Three.js implementation:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script
src="https://code.jquery.com/jquery-2.1.4.js"
integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4="
crossorigin="anonymous"></script>
</head>
<body>
<div id="navbar"><span>Three.js Tut</span></div>
Excitedly, I anticipated a mesmerizing sight of a rotating red cube, however, much to my dismay, nothing materialized. Could there be an error that I am overlooking?