Как сделать слежение за курсором модели Three.JS?

Для реализации слежения за курсором мы можем использовать библиотеку Three.js в сочетании с JavaScript. Ниже приведен подробный ответ, который объясняет, как это можно сделать.

1. Подключите библиотеку Three.js к вашему проекту. Вы можете скачать ее с официального сайта Three.js или использовать CDN-ссылку для включения в ваш HTML-файл.

<script src="https://threejs.org/build/three.js"></script>

2. Создайте сцену, камеру и объект, за которым будем слежить. Например, создадим сцену, камеру и куб.

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

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

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

3. Создайте функцию, которая будет обновлять позицию объекта на основе координат курсора мыши.

function onMouseMove(event) {
    // Получаем позицию курсора мыши в нормализованных координатах (-1 до 1)
    var mouseX = (event.clientX / window.innerWidth) * 2 - 1;
    var mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
  
    // Используем метод raycaster для определения объектов под курсором мыши
    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), camera);
  
    // Получаем список объектов, находящихся под курсором мыши
    var intersects = raycaster.intersectObjects(scene.children);
  
    // Если найден хотя бы один объект, обновляем позицию куба
    if (intersects.length > 0) {
        cube.position.copy(intersects[0].point);
    }
}

// Добавляем слушатель события на движение мыши и вызываем нашу функцию onMouseMove
window.addEventListener('mousemove', onMouseMove, false);

4. Создайте функцию анимации, чтобы рендерить сцену как можно чаще.

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

animate();

Это основной шаблон, который вам нужно изменить и дополнить согласно вашим потребностям. Вы можете изменить тип объектов, добавить свои модели и настроить их дополнительные атрибуты.

Теперь при движении курсора мыши объект будет перемещаться в соответствии с его позицией. Вы можете использовать этот шаблон, чтобы добавить слежение за курсором к своей Three.js-модели.