как в этом коде сделать тени более гладкими? (от источника света spotLight )
Весь код переписывать не надо, только там где нужно поправить

import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import * as dat from 'dat.gui';

const renderer = new THREE.WebGL1Renderer();
renderer.shadowMap.enabled = true;

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth/ window.innerHeight,
    0.1,
    1000
);

const orbit = new OrbitControls(camera, renderer.domElement);

const axesHalper = new THREE.AxesHelper(4);
scene.add(axesHalper);

camera.position.set(0,1,5);
orbit.update();

const boxGeometry = new THREE.BoxGeometry();
const boxMaterial = new THREE.MeshStandardMaterial({color: 0xF0F100});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(box);
box.castShadow = true;

const planeGeometry = new THREE.PlaneGeometry(10,10,10);
const planeMaterial = new THREE.MeshStandardMaterial({
    color: 0xFDDFF0,
    side: THREE.DoubleSide    
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);
plane.rotation.x = -Math.PI/2;
plane.position.y = -1;
plane.receiveShadow = true;


const sphereGeometry = new THREE.SphereGeometry(0.9, 100.8, 100);
const sphereMaterial = new THREE.MeshStandardMaterial({
    color: 0x000fff,
    wireframe: false    
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
sphere.position.set(1, 1, 0);
sphere.castShadow = true;

const ambientLight = new THREE.AmbientLight(0x333333);
scene.add(ambientLight);

// const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.5);
// scene.add(directionalLight);
// directionalLight.position.set(3,3,3);
// directionalLight.castShadow = true;
// //directionalLight.shadow.camera.bottom = -1;

// const dLightHalper = new THREE.DirectionalLightHelper(directionalLight, 1);
// scene.add(dLightHalper); 

// const dLightShadowHalper = new THREE.CameraHelper(directionalLight.shadow.camera);
// scene.add(dLightShadowHalper);

const spotLight = new THREE.SpotLight(0xFFFFFF);
scene.add(spotLight);
spotLight.position.set(0,2,0);
spotLight.castShadow = true;
spotLight.angle = 1.5;

const sLightHalper = new THREE.SpotLightHelper(spotLight);
scene.add(sLightHalper);


const gridHalper = new THREE.GridHelper();
scene.add(gridHalper);

const gui = new dat.GUI();
const options = {
    spotLightHight: 2,
    sphereColor: '#ffee00',
    wireframe: false,
    speed: 0.2
};

gui.add(options, 'spotLightHight', 0, 10);

gui.addColor(options, 'sphereColor').onChange(function(e){
    sphere.material.color.set(e);
});

gui.add(options, 'wireframe').onChange(function(e){
    sphere.material.wireframe = e;
});

gui.add(options, 'speed', 0, 0.2);

let step = 0;

function animate(time) {
    box.rotation.y = time / 1000;
    box.rotation.x = time / 1000;

    step += options.speed;
    sphere.position.y = 0.4 * Math.abs(Math.sin(step));
    spotLight.position.y = options.spotLightHight;


    renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);