I'm currently learning from a tutorial on three.js at this link: https://www.youtube.com/watch?v=_OwJV2xL8M8
My project is supposed to display a canvas with a green sphere in the center, illuminated by a point light positioned above it. However, my point light doesn't seem to be working properly, and the sphere appears to be evenly lit. I started this project using vite.
Here is the HTML code:
<!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 Project</title>
</head>
<body>
<canvas class="webgl"></canvas>
<script type="module" src="/main.js"></script>
</body>
</html>
And here's my javascript code:
import * as THREE from 'three'
const scene = new THREE.Scene()
const geometry = new THREE.SphereGeometry(3, 64, 64);
const material = new THREE.MeshBasicMaterial({
color: '#c0ff83'
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const light = new THREE.PointLight(0xfcfcff, 4, 60);
light.position.set(0, 10, 10);
scene.add(light);
const camera = new THREE.PerspectiveCamera(45, 800 / 600); // updated
camera.position.z = 16;
scene.add(camera);
const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGLRenderer({canvas});
renderer.setSize(800, 600);
renderer.render(scene, camera);
I have attempted to troubleshoot by commenting out the lighting code, but the issue persists.
Below are the errors I encountered. Any suggestions for resolving them?