2014-10-08 5 views
1

Я пользуюсь версии 68 из three.js.Three.js - Получение координат X, Y и Z щелчка мыши

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

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

Возможно ли это? Вот 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 из трёх. Он отлично работает на моей машине с версией 68.

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

+1

Как вы собираетесь найти координату Z без чего-то типа сетки? Он может быть от -Inf до + Inf. Вам действительно нужно что-то там, где есть координаты для проверки, и в соответствии с ответом вы будете использовать raycaster, чтобы проверить это. – Leeft

+1

@ Leeft Я не уверен, поэтому я спросил, возможно ли это. если это действительно невозможно, тогда не стесняйтесь публиковать его в качестве ответа, и я соглашусь с ним =) –

ответ

0

Для этого необходимо использовать THREE.Raycaster. Когда вы установите список intersectObjects, вы сможете получить массив объектов, которые пересекаются с лучом. Таким образом, вы можете получить позицию из объекта «clicked» из возвращенного списка. Check the updated fiddle here. Я также изменил свой three.js до версии R68

Для более продвинутого использования THREE.RayCaster проверки примеров в Threejs.org/examples как this example with interactive cubes.