Для реализации слежения за курсором мы можем использовать библиотеку 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-модели.