I recently started experimenting with three.js (and don't have much experience with it). I followed a tutorial that instructed a green box to be displayed on the screen. Despite not encountering any errors in the console, all I see is a blank black screen. https://i.sstatic.net/vkmZy.png
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/main.js">
</script>
<script async src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2a3c6222202b3a232a623c2726223c0f7e617c6179">[email protected]</a>/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="097d617b6c6c493927383b3f3a48393430395467783f393d">[email protected]</a>/build/three.module.js"
}
}
</script>
</body>
</html>
This is my MAIN.JS file
import * as THREE from "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95e1fde7f0f0d5a5bba4a7a3bba4788bc0cdcccaccdccfcdcbc6ece1ccd0cfc8cacadc78ededfbddfdf4feefeae8fbeabaafaacabaaefdecbe7ebbfbbccececdbdcfaeeaeeeaea">[email protected]</a>/build/three.module.js";
const scene = new THREE.Scene();
const camera =new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1,1000)
const renderer= new THREE.WebGL1Renderer();
console.log(scene);
console.log(camera);
console.log(renderer);
document.body.appendChild(renderer.domElement);
renderer.setSize(innerWidth , innerHeight);
const boxGeometery=new THREE.BoxGeometry(1,1,1) // width length and height
const material= new THREE.MeshBasicMaterial({ color : 0x00f00 })
const mesh=new THREE.Mesh(boxGeometery , material);
scene.add(mesh);
renderer.render(scene,camera)
camera.position.z=5;
console.log(mesh)
console.log(material)
console.log(boxGeometery);
NOTE = I did not install three.js with npm, but rather included the cdn link.
The instructor's output showed a green box, while mine does not display such a box on the screen.https://i.sstatic.net/72CNO.png
If anyone could offer some assistance, I would greatly appreciate it