Get position of pointer event *relative to canvas height*

Questions
, ,
1

I need to know whether or not a downPointer event was registered within the upper-half of the canvas. I don’t see any information in the event object that indicates the height of the canvas relative to the measure of the y position of the event. Any clues?

2

I’m not sure exactly what you need.

In the example Construction of frames with contour/profile , the position of the pointer is displayed.

See ConstructFrame line 1093

function onContainerBMouseMove

getMarkerXY( event.clientX, event.clientY );

reticle.position.set( markerX, markerY, 0 );

xyValue.style.left = event.clientX + 10 + "px";
xyValue.style.top = event.clientY - 10 +"px";

xyValue.innerHTML = Math.round( 10000 *( markerX + 1 ) * sizeFactorL ) / 10000 + " ▪ " + Math.round( 10000 * markerY * sizeFactorL ) / 10000;

and

function getMarkerXY( ecX, ecY )

3

in R3F you can use the Canvas onPointerDown event and log it to see all properties available.

import { Canvas } from '@react-three/fiber'

export default function App() {
  return (
    <Canvas
      camera={{ position: [1, 1, 1] }}
      onPointerDown={(e) =>
        console.log(e)
      }>
      <gridHelper />
    </Canvas>
  )
}

If you wanted just clientX and clientY, you could use,

onPointerDown={({ clientX, clientY }) => console.log(clientX, clientY)}
1 Like