I'm in the process of creating a simple Three JS application. As I familiarize myself with Three JS, I've been experimenting with different features. Currently, I am working on constructing a scene that includes a floor, an object, and a light source. My goal is to be able to see the shadow of the object being cast onto the floor by the light. Below is the code snippet I have been working on:
import * as THREE from 'three';
const scene = new THREE.Scene();
const aspect_ratio = window.innerWidth / window.innerHeight;
const camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
camera.position.z = 500;
scene.add(camera);
const renderer = new THREE.WebGLRenderer();
renderer.shadowMapEnabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.append(renderer.domElement);
var shape = new THREE.TorusGeometry(100, 50, 8, 20);
var cover = new THREE.MeshPhongMaterial();
cover.emissive.setRGB(0.8, 0.1, 0.1);
cover.specular.setRGB(0.9, 0.9, 0.9);
var donut = new THREE.Mesh(shape, cover); scene.add(donut);
donut.castShadow = true;
var sunlight = new THREE.DirectionalLight();
sunlight.intensity = 0.5;
sunlight.position.set(100, 100, 100);
scene.add(sunlight);
sunlight.castShadow = true;
var shape = new THREE.PlaneGeometry(1500, 1500);
var cover = new THREE.MeshBasicMaterial();
var ground = new THREE.Mesh(shape, cover);
scene.add(ground);
ground.position.set(0, -180, 0);
ground.rotation.set(-Math.PI/2, 0, 0);
ground.receiveShadow = true;
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
The issue I'm facing is that despite setting up the scene for the shadows, the donut does not seem to cast any shadow on the floor as intended. Instead, it appears without the shadow effect.
https://i.sstatic.net/KG8AQ.png
I would greatly appreciate any guidance or assistance in identifying what might be incorrect in my code and how I can rectify it to achieve the desired shadow effect?