3D Дизайн на Three.js: Камера и взаимодействие

Этот текст описывает работу с камерой и взаимодействие пользователя в Three.JS, используя классы OrbitControls и Raycaster.

Управление камерой

Для удобного управления камерой используется класс OrbitControls. Его импорт осуществляется следующим образом:

import { OrbitControls } from 'examples/jsm/controls/OrbitControls';

После создания камеры, добавляем управление:

const controls = new OrbitControls( camera, renderer.domElement );

Настраиваем параметры OrbitControls:

controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.minDistance = 2;
controls.maxDistance = 10;

В функции animate необходимо постоянно обновлять положение камеры:

controls.update();

Теперь можно управлять камерой с помощью мыши, вращая и перемещая сцену.

Взаимодействие с объектами

Для взаимодействия с объектами используется класс Raycaster. Создадим необходимые константы:

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

Функция onMouseClick обрабатывает клик мыши:

function onMouseClick( event ) {
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    raycaster.setFromCamera( mouse, camera );

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

    if ( intersects.length > 0 ) {
        const object = intersects[0].object;
        object.material.color.set( 0x0000ff ); // Устанавливаем синий цвет
    }
}

Добавляем обработчик события click:

window.addEventListener( 'click', onMouseClick, false );

При клике по объекту, его цвет изменится на синий.

Добавление объектов и обработка mousemove

Добавим сферу для демонстрации:

const sphereGeometry = new THREE.SphereGeometry( 1, 32, 32 );
const sphereMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } );
const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.position.x = 2;
scene.add( sphere );

Обработка наведения курсора осуществляется через событие mousemove:

function onMouseMove(event) {
    // Логика обработки наведения
    // Например, отображение всплывающего окна или изменение цвета
    alert("clicked on item");
}
window.addEventListener('mousemove', onMouseMove, false);

OrbitControls обеспечивает удобное управление камерой, а Raycaster позволяет реализовать взаимодействие пользователя с объектами сцены, реагируя на клики и наведение курсора. Это позволяет создавать интерактивные 3D-приложения с использованием Three.JS.