Three.js: инструмент выбора Как обнаружить пересечение 2D-квадрата и 3D-объектов

Пересечение прямоугольника в экранном пространстве эквивалентно пересечению пирамиды (перспектива) или куба (ортогональный вид) в трехмерном пространстве. Я думаю, вы должны определить THREE.Frustum на основе вашего 2D-бокса.

Для перспективной камеры:

1. преобразовать координаты угла окна в пространстве экрана в 3D-векторы (вектор от положения камеры до заданной точки)

var topLeftCorner3D = new THREE.Vector3(topLeftCorner2D.x, topLeftCorner2D.y, 1).unproject(camera);

2. построим по этим точкам 4 плоскости (по одной плоскости на одну сторону коробки). Третья точка плоскости — это положение камеры.

TopPlane.SetFromcoplanarpoints (Camera.Position, TopleftCorner3D, TOPRightcorner3D) RightPlane.SetFromcornernArappoints (Camera.position, TOPRightcorner3D, DoteRightcorner3D) Noneplane.etromcorner3D) (Camera.Position, BendRightcorner3D, undeleftcorner3D) (камера.

3. Постройте усеченный конус на основе этих плоскостей, добавив к ним ближнюю и дальнюю плоскости камеры.

var frustum = new THREE.Frustum(верхняя плоскость, нижняя плоскость, левая плоскость, правая плоскость, ближняя плоскость, дальняя плоскость);

4. Пересечение усеченного конуса с объектами

frustum.intersectsBox(object.geometry.boundingBox)

or

frustum.intersectsSphere(object.geometry.boundingSphere)

Альтернатива использованию самого объекта Frustum: можно пропускать ближнюю и дальнюю плоскости, нужно только проверять, находится ли объект в пространстве, граничащем с вашими 4 плоскостями. Вы можете написать функцию, подобную методу Frustum.intersectSphere(), только с 4 плоскостями:

function isObjectInFrustum(object3D) {
    var sphere = object3D.geometry.boundingSphere;
    var center = sphere.center;
    var negRadius = - sphere.radius;

    if ( topPlane.distanceToPoint( center )< negRadius ) return false;
    if ( bottomPlane.distanceToPoint( center )< negRadius ) return false;
    if ( rightPlane.distanceToPoint( center )< negRadius ) return false;
    if ( leftPlane.distanceToPoint( center )< negRadius ) return false;

    return true;  
}

Вы можете использовать ограничивающие рамки объектов. THREE.Geometry содержит свойство boundingBox. Это null по умолчанию, вы должны вычислить его, вызвав computeBoundingBox() напрямую.

scene.traverse( function ( node ) {
    if ( node.geometry )
         node.geometry.computeBoundingBox();
} );

После того, как у вас есть ограничивающие рамки, 2D-координаты ограничивающей рамки (если «y» является осью UP):

mesh.geometry.boundingBox.min.x
mesh.geometry.boundingBox.min.z
mesh.geometry.boundingBox.max.x
mesh.geometry.boundingBox.max.z

См. http://threejs.org/docs/#Reference/Core/Geometry.

(однако, если вам нужен точный результат для сеток непрямоугольной формы, вам потребуются дополнительные вычисления)

Чтобы узнать о более точном методе, чем выбор под усеченным конусом, см. выбор бегущей строки с тремя js . Он работает, проецируя 8 углов ограничивающих рамок на пространство экрана, а затем пересекая прямоугольник экрана. см. также здесь третий более быстрый метод (написанный на ClojureScript), который проецирует ограничивающую трехмерную сферу на ограничивающий круг в пространстве экрана, а также реализации первых двух методов. См. также соответствующий вопрос о переполнении стека, который пытается использовать GPU для выполнить проецирование экрана и выбор с помощью пикселов чтения (я не изучал этот метод, так как предполагаю, что пиксели чтения слишком сильно остановят конвейер рендеринга, но дайте мне знать, если я ошибаюсь).

Я сделал рабочий пример выбора подусеченной пирамиды по адресу http://jsbin.com/tamoce/3/. , но это слишком неточно. Важная часть:

          var rx1 = ( x1 / window.innerWidth ) * 2 - 1;
          var rx2 = ( x2 / window.innerWidth ) * 2 - 1;
          var ry1 = -( y1 / window.innerHeight ) * 2 + 1;
          var ry2 = -( y2 / window.innerHeight ) * 2 + 1;

          var projectionMatrix = new THREE.Matrix4();
          projectionMatrix.makeFrustum( rx1, rx2, ry1, ry2, camera.near, camera.far );

          camera.updateMatrixWorld();
          camera.matrixWorldInverse.getInverse( camera.matrixWorld );

          var viewProjectionMatrix = new THREE.Matrix4();
          viewProjectionMatrix.multiplyMatrices( projectionMatrix, camera.matrixWorldInverse );

          var frustum = new THREE.Frustum();
          frustum.setFromMatrix( viewProjectionMatrix );