Как понять касается ли курсор объекта в three.js?

Пользователь

от terrence , в категории: JavaScript , 7 месяцев назад

Как понять касается ли курсор объекта в three.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jensen , 7 месяцев назад

@terrence 

Используйте метод raycasting в Three.js. Этот метод позволяет определить, касается ли луч, исходящий из позиции курсора, некоторого объекта в 3D пространстве.


Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// Создаем луч из позиции курсора
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(cursorPos, camera);

// Получаем массив объектов, которые пересекает луч
const intersects = raycaster.intersectObjects(scene.children);

if (intersects.length > 0) {
  // Если есть пересечения, значит курсор касается некоторого объекта
} else {
  // Если пересечений нет, значит курсор не касается объектов
}


Здесь cursorPos - это вектор позиции курсора в нормализованных координатах (-1,1), camera - объект камеры, а scene.children - массив всех объектов в сцене Three.js. Результатом работы raycasting является массив, содержащий все объекты, пересекаемые лучом. Если этот массив не пустой, значит курсор касается какого-то объекта в сцене.