Intersect: свойства точки пересечения

В библиотеке Three.js объекты пересечения (intersections) создаются с помощью класса Raycaster, который позволяет определять, какие объекты сцены пересекает луч. Точки пересечения хранятся в виде массива объектов, каждый из которых содержит подробные сведения о месте и характере пересечения. Понимание этих свойств критично для точной работы с коллизиями, выбором объектов и интерактивной анимацией.

Основные свойства объекта пересечения

Каждая запись в массиве пересечений представляет собой объект с фиксированным набором свойств:

1. distance

Тип: Number Расстояние от начала луча до точки пересечения. Это значение позволяет определить, какой объект находится ближе к камере, если луч пересекает несколько объектов.

raycaster.intersectObjects(scene.children).forEach(intersect => {
    console.log(intersect.distance);
});

2. point

Тип: THREE.Vector3 Координаты точки пересечения в мировых координатах сцены. Очень полезно для точного размещения дополнительных объектов или визуальных эффектов в месте контакта луча с мешем.

const intersectionPoint = intersect.point;

3. face

Тип: THREE.Face3 Содержит информацию о грани, с которой произошло пересечение. Полезно для работы с геометрией на уровне треугольников, например, для изменения цвета отдельных граней или вычисления нормали для освещения.

const normal = intersect.face.normal;

4. faceIndex

Тип: Number Индекс грани в массиве geometry.faces исходного объекта. Позволяет точно идентифицировать треугольник, с которым произошло пересечение, особенно в сложных геометриях.

console.log(intersect.faceIndex);

5. object

Тип: THREE.Object3D Ссылка на объект сцены, с которым произошло пересечение. Включает все дочерние элементы, если используется recursive: true при настройке Raycaster. Через это свойство можно изменять свойства объекта или выполнять с ним действия.

intersect.object.material.color.set(0xff0000);

6. uv

Тип: THREE.Vector2 Текстурные координаты точки пересечения. Дают возможность точно определить, какая часть текстуры задействована, что особенно важно для нанесения декалей или динамической генерации текстур.

console.log(intersect.uv);

7. instanceId

Тип: Number (опционально) Используется для InstancedMesh, чтобы определить, какой экземпляр меша был пересечён. Позволяет управлять отдельными инстансами без создания множества отдельных объектов.

if(intersect.instanceId !== undefined){
    console.log("Instance ID:", intersect.instanceId);
}

Взаимодействие с геометрией и материалами

  • face.normal предоставляет локальную нормаль грани, которую можно преобразовать в мировую с помощью метода object.localToWorld. Это необходимо для точного позиционирования света или эффекта отражения.
  • uv позволяет динамически изменять пиксели текстуры через CanvasTexture или вычислять координаты для шейдеров.
  • distance используется для сортировки пересечений и реализации механики выбора ближайшего объекта, что критично для интерактивных сцен.

Практическое использование

  1. Выбор объекта мышью Используется Raycaster для определения точки пересечения между курсором и объектами сцены. Свойство object указывает на выбранный меш, а point — на точку клика.
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
if(intersects.length > 0){
    const hit = intersects[0];
    hit.object.material.emissive.set(0x00ff00);
}
  1. Создание эффектов на поверхности объекта Свойство uv позволяет нанести эффект точно на пересечённую точку текстуры, например, след от лазера или пятно краски.
const canvas = document.createElement('canvas');
// Использование intersect.uv для точного позиционирования на текстуре
  1. Коллизии и физика distance помогает ограничить действия на определённой дистанции, а faceIndex — реагировать на конкретные части геометрии, что полезно в игровых механиках.

Дополнительные нюансы

  • При использовании recursive: true Raycaster проверяет все дочерние объекты. В этом случае object может быть вложенным элементом группы.
  • Для BufferGeometry свойство face отсутствует, и вместо него можно работать с треугольниками напрямую через индексные буферы.
  • Свойство instanceId появляется только при работе с InstancedMesh и позволяет избежать создания множества объектов для повторяющихся элементов сцены.

Эти свойства обеспечивают детальный контроль над точкой пересечения и позволяют строить сложные интерактивные системы, от точного выбора объектов до динамического взаимодействия с поверхностями и текстурами в сценах Three.js.

Оглавление