Three.jsとWebGPUで作る、マウスと連動するスクロール追従ライティング演出

// esm.sh を利用して依存関係を自動解決
import * as THREE from 'https://esm.sh/three@0.184.0/webgpu';
import {
	TSL as $
} from 'https://esm.sh/three@0.184.0/webgpu';
import {
	RectAreaLightTexturesLib
} from 'https://esm.sh/three@0.184.0/examples/jsm/lights/RectAreaLightTexturesLib.js';
THREE.RectAreaLightNode.setLTC( RectAreaLightTexturesLib.init( ) );
const renderer = await new THREE.WebGPURenderer( ).init( );
renderer.domElement.id = 'kumonosu-stage';
// main-containerの先頭にCanvasを挿入
const container = document.getElementById( 'kumonosu-main-container' );
container.prepend( renderer.domElement );
const scene = new THREE.Scene( );
const camera = new THREE.PerspectiveCamera( );
camera.position.set( 0, 0, 2 );
const mat = new THREE.MeshPhysicalNodeMaterial( {
	roughness: 0.2,
	metalness: 0.0
} );
const floor_mesh = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), mat );
scene.add( floor_mesh );
const light0_tall = 0.777;
const light0 = new THREE.RectAreaLight( 'white', 0, light0_tall, 0 );
scene.add( light0 );
const light_bulb_mat = new THREE.MeshBasicMaterial( {
	color: 0xffffff
} );
const light_bulb = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), light_bulb_mat );
scene.add( light_bulb );
const rp = new THREE.RenderPipeline( renderer );
const scene_pass = $.pass( scene, camera );
rp.outputNode = $.vec4( scene_pass.rgb, $.mx_rgbtohsv( scene_pass.rgb ).z.oneMinus( ).pow( 16 ).mul( 0.9 ) );
renderer.setAnimationLoop( ( ) => rp.render( ) );
const light0_min_height = 0.3;
const light0_max_height = 0.5;
const light0_min_radius = 0.3;
const light0_min_intensity = 1.5;
const light0_max_intensity = 3.0;
const raycaster = new THREE.Raycaster( );

function handle_pointer_move ( x, y ) {
	raycaster.setFromCamera( new THREE.Vector2( x, y ), camera );
	const intersections = raycaster.intersectObject( floor_mesh );
	for ( const i of intersections ) {
		if ( i.object === floor_mesh ) {
			const a = -Math.atan2( i.point.y, i.point.x ) + Math.PI / 2;
			const r = Math.max( light0_min_radius, Math.hypot( i.point.x, i.point.y ) ) + 0.2;
			const px = r * Math.sin( a );
			const py = r * Math.cos( a );
			const pz = light0.width / 2;
			light0.position.set( px, py, pz );
			light0.lookAt( 0, 0, pz );
			light_bulb.position.copy( light0.position );
			light_bulb.rotation.copy( light0.rotation );
			light_bulb.scale.set( light0.width, light0.height, 1 );
			const dist = Math.hypot( x, y );
			light0.height = Math.min( light0_max_height, Math.max( light0_min_height, dist ) );
			light0.intensity = light0_min_intensity + Math.min( light0_max_intensity - light0_min_intensity, dist );
		}
	}
}
document.addEventListener( 'pointermove', ( e ) => {
	const stage = document.getElementById( 'kumonosu-stage' );
	if ( !stage ) return;
	const rect = stage.getBoundingClientRect( );
	const x = ( e.clientX / rect.width ) * 2 - 1;
	const y = ( 1 - ( e.clientY ) / rect.height ) * 2 - 1;
	handle_pointer_move( x, y );
} );

function update_light0_color ( ) {
	const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
	const y_ratio = scrollHeight > 0 ? Math.min( 1.0, window.scrollY / scrollHeight ) : 0;
	light0.color.setHSL( y_ratio, 0.5, 0.5 );
	light_bulb_mat.color.setHSL( y_ratio, 0.5, 0.8 );
}
window.addEventListener( 'scroll', ( ) => update_light0_color( ) );
setTimeout( ( ) => {
	handle_pointer_move( 0.2, -0.2 );
	update_light0_color( );
}, 150 );
window.addEventListener( 'resize', ( ) => {
	const width = window.innerWidth;
	const height = window.innerHeight;
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( width, height, false );
	camera.aspect = width / height;
	camera.updateProjectionMatrix( );
} );
window.dispatchEvent( new Event( 'resize' ) );