I have the following contents in my main.js file:
import './style.css';
import * as THREE from 'three';
// Create a new scene
const scene = new THREE.Scene();
// Define the camera with arguments for field of view, aspect ratio, and view frustrum
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth/window.innerHeight,
0.1,
1000,
);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('.canvas'), // Specify which DOM element to use
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth / window.innerHeight);
camera.position.setZ(100);
// Define sphere geometry with radius, width segments, height segments
const geometry = new THREE.SphereGeometry(15, 32, 16);
// Set wireframe true to better visualize its geometry
const material = new THREE.MeshBasicMaterial({color: 0xffff00, wireframe: true});
// Create a mesh (globe) using the defined geometry and material
const globe = new THREE.Mesh(geometry, material);
scene.add(globe);
function animate(){
requestAnimationFrame(animate); // Optimize rendering
// Implement rotation
globe.rotateOnAxis += 0.01;
renderer.render(scene, camera);
}
animate();
renderer.render(scene, camera);
In my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Gautam</title>
</head>
<body>
<canvas id="globe">This is the canvas
</canvas>
<script type="module" src="./main.js"></script>
</body>
</html>
However, when I run this code, nothing appears on my screen despite the main.js file executing properly.