Щелчок по 3D объекту
Отслеживаем щелчок по 3D объектам
// выводим на экран то, что видит камера
renderer.render(scene, camera);
// создаём массив для хранения 3D объектов
let objects = [];
// заполняем массив 3D объектами
objects[0] = sphere_1;
objects[1] = cone_1;
objects[2] = plane_1;
// создаём вспомогательные объекты для поиска щелчка
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
document.getElementById("gameBox").addEventListener("click", function () {
// задаём размер игрового бокса
const ww = 800;
const hh = 600;
// выводим на экран то, что видит камера
renderer.render(scene, camera);
// получить позицию мышки относительно игрового бокса
const xMouse = event.offsetX;
const yMouse = event.offsetY;
mouse.x = ( xMouse / ww ) * 2 - 1;
mouse.y = - ( yMouse / hh ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
// получаем массив объектов, по которым был сделан щелчок
let intersects = raycaster.intersectObjects( objects );
// если этот массив не пустой
if ( intersects.length > 0 ) {
// получаем самый первый объект, по которому щёлкнули
let answer = intersects[0];
if(answer.object === objects[0]){
alert("Сфера");
}
if(answer.object === objects[1]){
alert("Конус");
}
if(answer.object === objects[2]){
alert("Плоскость");
}
}
});
Получение координат щелчка в 3D мире
if ( intersects.length > 0 ) {
const objXYZ = intersects[0].point;
let xx = objXYZ.x;
let yy = objXYZ.y;
let zz = objXYZ.z;
console.log("X = " + xx + " Y = " + yy + " Z = " + zz);
}
Last updated
Was this helpful?