在three.js中用灯光跟随鼠标位置

// 引入Three.js库
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 场景、相机和渲染器的创建
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个聚光灯
const spotlight = new THREE.SpotLight(0xffffff, 1, 100);
scene.add(spotlight);

// 设置聚光灯的位置
spotlight.position.set(0, 10, 20);

// 添加一个平面作为地面
const planeGeometry = new THREE.PlaneGeometry(50, 50);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x999999 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

// 设置相机位置
camera.position.z = 30;

// 添加轨道控制，以便可以旋转和缩放场景
const controls = new OrbitControls(camera, renderer.domElement);

// 创建一个Raycaster对象
const raycaster = new THREE.Raycaster();

// 监听鼠标的移动事件
window.addEventListener('mousemove', onMouseMove, false);

function onMouseMove(event) {
    // 将鼠标位置归一化
    const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
    const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;

    // 更新Raycaster对象的鼠标位置
    raycaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), camera);

    // 计算与平面的交点
    const intersects = raycaster.intersectObject(plane);

    if (intersects.length > 0) {
        // 如果有交点，将聚光灯的位置设置为交点的位置
        spotlight.position.copy(intersects[0].point);
    }
}

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();