Блог

Как я могу получить координату — или В — GridHelper того, на что я нажимаю? Особенно, когда на вершине? Mesh GridHelper

Мой GridHelper настроен следующим образом:

 let  helperGrid = new THREE.GridHelper(600, 120, "yellow", “blue”);
 

Таким образом, расстояние между каждой линией сетки равно 5 (причина 600/12 = 5)

Когда я щелкаю по экрану, я хотел бы знать, в какой части Сетки я щелкнул. Например, я щелкнул где-нибудь в самом первом квадрате? Что означает щелчок (для значения X) в любом месте между (0, 0, 0) и (5, 0, 0), а для Z-значений в любом месте между (0, 0, 0) и (0, 0, -5)?

Я собирался попытаться вычислить это, используя мои координаты, которые я вычисляю с помощью mousedown события, обычным способом:

 mousePositionVector.x = (event.clientX / window.innerWidth) * 2 - 1;
mousePositionVector.y = -(event.clientY / window.innerHeight) * 2   1;
            
 

Но это приводит к действительно крошечным десятичным числам. Например, когда я щелкаю в любом месте самого первого поля сетки, то есть между x = 0 и x = 5, я получаю значения положения мыши, такие как:

  ( 0.07309721175584016 , 0.03186646433990892 )
 

или:

 ( 0.09269027882441594 , 0.02427921092564489 )
 

и т.д.

Между тем, соответствующие event.clientX event.clientY значения и — для того же самого события касания — следующие:

 clientXY = ( 740 , 634 ) 
 

Таким образом, ни один из наборов значений, похоже, не указывает мне в правильном направлении.

Помимо всего этого, я хотел бы в конечном итоге разместить ландшафт над этой сеткой, что означает, что rayCaster Я использую will catch вершину Местности Mesh , которую я создаю, что может еще больше усложнить проблему.

Как правильно поступить с этим?

Уже есть демонстрация с вашим точным сценарием: Raycasting с сеткой местности (нажмите на значок в правом нижнем <> углу, чтобы просмотреть источник).

Когда raycast пересекается с сеткой terrain, он вернет объект со следующими свойствами, как описано в документации: { distance, point, face, faceIndex, object } , поэтому, если вы хотите узнать x, z координаты того места, где вы зависли, просто посмотрите на .point свойство пересекаемого объекта:

 function onMouseMove( event ) {

    // Get screen-space x/y
    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2   1;

    // Perform raycast
    raycaster.setFromCamera( mouse, camera );

    // See if the ray from the camera into the world hits our mesh
    const intersects = raycaster.intersectObject( terrainMesh );

    // Check if an intersection took place
    if ( intersects.length > 0 ) {
        const posX = intersects[0].point.x;
        const posZ = intersects[0].point.z;
        console.log(posX, posZ);
    }

}
 

Наконец, если вы хотите узнать позицию с шагом в 5 единиц, просто выполните небольшой трюк с округлением:

 const posX = Math.round(intersects[0].point.x / 5) * 5;
const posZ = Math.round(intersects[0].point.z / 5) * 5;