threejs如何加载跟随鼠标位置移动的点光源

在Three.js中，要实现一个跟随鼠标位置移动的点光源，可以按照以下步骤进行：

1. 创建一个点光源

要创建一个点光源，可以使用Three.js提供的PointLight类。例如：

const pointLight = new THREE.PointLight(0xffffff, 1, 100);
scene.add(pointLight);

这里创建了一个颜色为白色、强度为1、距离为100的点光源，并将其添加到场景中。

2. 监听鼠标移动事件

要让点光源跟随鼠标位置移动，需要监听鼠标移动事件。可以使用JavaScript的addEventListener方法，监听mousemove事件。例如：

document.addEventListener('mousemove', onDocumentMouseMove);

这里定义了一个名为onDocumentMouseMove的函数，它将在鼠标移动时被调用。

3. 在鼠标移动事件中更新点光源位置

在onDocumentMouseMove函数中，可以获取鼠标位置，并将点光源的位置设置为鼠标位置的三维坐标。例如：

function onDocumentMouseMove(event) {
    const mouseX = event.clientX;
    const mouseY = event.clientY;
    const vector = new THREE.Vector3(
        (mouseX / window.innerWidth) * 2 - 1,
        -(mouseY / window.innerHeight) * 2 + 1,
        0.5
    );
    vector.unproject(camera);
    const dir = vector.sub(camera.position).normalize();
    const distance = -camera.position.z / dir.z;
    const pos = camera.position.clone().add(dir.multiplyScalar(distance));
    pointLight.position.copy(pos);
}

这里使用了Three.js提供的Vector3类来计算鼠标位置对应的三维坐标。具体的计算方法可以参考Three.js的官方文档。最后，将点光源的位置设置为计算得到的位置。

通过以上步骤，就可以实现一个跟随鼠标位置移动的点光源了。完整的代码可以参考下面的示例：

let camera, scene, renderer, pointLight;

init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    scene = new THREE.Scene();

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    pointLight = new THREE.PointLight(0xffffff, 1, 100);
    scene.add(pointLight);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    document.addEventListener('mousemove', onDocumentMouseMove);
}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

function onDocumentMouseMove(event) {
    const mouseX = event.clientX;
    const mouseY = event.clientY;
    const vector = new THREE.Vector3(
        (mouseX / window.innerWidth) * 2 - 1,
        -(mouseY / window.innerHeight) * 2 + 1,
        0.5
    );
    vector.unproject(camera);
    const dir = vector.sub(camera.position).normalize();
    const distance = -camera.position.z / dir.z;
    const pos = camera.position.clone().add(dir.multiplyScalar(distance));
    pointLight.position.copy(pos);
}