threejs-animations/examples/lightChangeToExample.js

A package for three.js light and transformations animations

// Don`t forget to import Three im html file
import * as THREE from "three";
import { changeLightIntensityTo } from "threejs-anims"; // Function import for smooth light intesity set.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 1, 4); // Position camera to see better how its works

const canvas = document.getElementById("three-canvas"); // If you want to import scene in <canvas>
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 10); // intensity is 10
scene.add(hemiLight);
hemiLight.position.set(0, 3, 0); // Change Y position to cover top and bot part
changeLightIntensityTo(hemiLight, 5, 0.1, 0.5); // hemiLight - THREE.Light. In 5 sec with interval 0.1 sec, smoothly changing light to 2 intensity.

// Add cube for exsample
const cubeGeometry = new THREE.BoxGeometry(1);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 }); // Standard material to interact with light
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();