I've hit a roadblock with the shadow effect at the moment, despite trying various solutions for hours, it's still not appearing. Can anyone point out what I may have done incorrectly?
Below is the code snippet for my current scene:
//Setting up camera
const fov = 120;
const aspect = window.innerWidth / window.innerHeight;
const near = 0.1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 1, 2);
camera.lookAt(0, 0, 0);
//Initializing renderer
const renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true,
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
//Adding light source
const light = new THREE.PointLight(0xffffff, 1);
light.position.set(-2, 1.8, 1);
light.castShadow = true;
light.shadow.mapSize.width = 512;
light.shadow.mapSize.height = 512;
scene.add(light);
//Creating sphere object
const sphereGeometry = new THREE.SphereGeometry(1, 32, 16);
const sphereMaterial = new THREE.MeshStandardMaterial({
color: 0xffffff,
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(0, 0.2, 0);
sphere.castShadow = true;
scene.add(sphere);
//Adding plane object as ground
const plane = new THREE.PlaneGeometry(20, 20, 1, 1);
const planeMaterial = new THREE.MeshStandardMaterial({
color: 0xeeeeee,
});
const planeObj = new THREE.Mesh(plane, planeMaterial);
planeObj.position.y = -1;
planeObj.rotation.x = -0.5 * Math.PI;
plane.receiveShadow = true;
scene.add(planeObj);
Any suggestions for corrections are welcome. Apologies for any language errors.