Three.js - Получение координат X, Y и Z щелчка мышью

Question

Я использую версию 68 из Three.js.

Я хотел бы щелкнуть где-нибудь и получить координаты X, Y и Z. Я следовал за шагами здесь, но они дают мне значение Z 0: Мышь / Холст X, Y - Three.js Мир X, Y, Z

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

Это возможно? Вот jsfiddle: http://jsfiddle.net/j9ydgyL3/

В этом jsfiddle, если мне удастся щелкнуть в центре этого квадрата, я надеюсь вычислить 10, 10, 10 для значений X, Y и Z соответственно, потому что это координаты положения квадрата. Вот две функции, вызывающие озабоченность:

function getMousePosition(clientX, clientY) {
    var mouse2D = new THREE.Vector3();
    var mouse3D = new THREE.Vector3();
    mouse2D.x = (clientX / window.innerWidth) * 2 - 1;
    mouse2D.y = -(clientY / window.innerHeight) * 2 + 1;
    mouse2D.z = 0.5;
    mouse3D = projector.unprojectVector(mouse2D.clone(), camera);
    return mouse3D;
    //var vector = new THREE.Vector3(
    //( clientX / window.innerWidth ) * 2 - 1,
    //- ( clientY / window.innerHeight ) * 2 + 1,
    //0.5 );

    //projector.unprojectVector( vector, camera );
    //var dir = vector.sub( camera.position ).normalize();
    //var distance = - camera.position.z / dir.z;
    //var pos = camera.position.clone().add( dir.multiplyScalar( distance ) );
    //return pos;
}

function onDocumentMouseUp(event) {
    event.preventDefault();

    var mouse3D = getMousePosition(event.clientX, event.clientY);
    console.log(mouse3D.x + ' ' + mouse3D.y + ' ' + mouse3D.z);
}

Я оставил часть кода, который я пытался закомментировать. Обратите внимание, что этот закомментированный код не работал на веб-сайте jsfiddle, возможно, потому, что они все еще используют версию 54 of three.js. Он отлично работает на моей машине с версией 68.

Изменить: чтобы уточнить, я хотел бы иметь возможность получить координаты независимо от того, где мышь. Я просто использовал сетку в этом примере, потому что легко проверить, работает ли она, посмотрев, совпадают ли рассчитанные координаты с сеткой. То, что я действительно хотел бы, чтобы это работало без использования raycasting на меше. Например, мы могли бы всегда выводить рассчитанные координаты на консоль каждый раз, когда движется мышь, независимо от того, что находится в сцене.

Answer 1

Вы должны использовать THREE.Raycaster за это. Когда вы устанавливаете список intersectObjects Вы сможете получить массив объектов, которые пересекались с лучом. Таким образом, вы можете получить позицию из "нажатого" объекта из возвращенного списка. Проверьте обновленную скрипку здесь. Я также изменил ваш Three.js на версию R68

Для более продвинутого использования THREE.RayCaster посмотрите примеры на http://threejs.org/examples/, как этот пример, с интерактивными кубами.