threeJS
  • Введение
  • Инициализация сцены
  • Сетка Оси Камера
  • 3D объекты
  • Источники света
  • Плоские фигуры
  • Щелчок по 3D объекту
  • Вставка изображений
  • Точки и грани
Powered by GitBook
On this page

Was this helpful?

Щелчок по 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);
    }
PreviousПлоские фигурыNextВставка изображений

Last updated 5 years ago

Was this helpful?