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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от willa_will , 8 месяцев назад

@greyson 

Чтобы понять, касается ли курсор объекта в three.js, вы можете использовать Raycaster. Он представляет собой луч, который вы можете проецировать из позиции курсора в сцене. Затем вы можете проверить, пересекает ли луч какие-либо объекты в сцене. Если он пересекает объект, то вы можете считать, что курсор "касается" этого объекта. Вот пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

// в обработчике события мыши (например, в mousemove)
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

raycaster.setFromCamera(mouse, camera);

var intersects = raycaster.intersectObjects(scene.children);

if (intersects.length > 0) {
  // курсор касается объекта
} else {
  // курсор не касается объекта
}