Get div x,y coordinates, render mesh

Questions
, ,
1

Hi,
how can i set my Mesh position in specific react div element? I render canvas full width/height in body, then i want animation to start in specific html element x,y coordinates.

 addSphere(startX, startY, startZ)

const addSphere = (startX:number, startY:number, startZ:number) => {
            const sphere = new THREE.Mesh(geometry, material)
            sphere.position.set(startX, startY, startZ)
            scene.add(sphere)
            objects.push(sphere)
}

when i set startX=5, startY=5 its in interesting me position on 1920x1080. But of course i want make it responsive and i need my div coordinates, im using next.js and im not sure what practice is good, either props with coordinates or getElementById in my three.js code.
I tried to get coordinates this way:

const getCoordinates = (event) => {
        const x = ( event.clientX / window.innerWidth ) * 2 - 1
        const y = - ( event.clientY / window.innerHeight ) * 2 + 1
    }

<div className=' hover:animate-backgroundFlow bg-gradientFlow group overflow-hidden w-10 ease-linear hover:w-24 hover:flex hover:items-end transition-all duration-300 pl-2 py-0.5 rounded-full'
     onClick={getCoordinates}
>
     <FemaleIcon />
     <span className='text-sm hidden group-hover:block'>
           Women
           {isHovered && <Confetti startX={x} startY={y} /> } 
      </span> 
</div>

but they aint matching with values in my 3js code.
To show u better what i want to achieve u can check out https://habitsgarden.com , when u click “Tick habit” button it renders to body canvas but animation start in bottom right corner of button. I know it kinda stupid question but i just started learning 3js and its kinda tough to find information.
Thank you for your help,

2

you use react-dom to express the imperative dom in react, use react-three-fiber to express imperative three. this is what react was made for. there are many things in the react eco system for three that do not exist in vanilla, like drei/view which would solve your issue.

it allows you to put threejs into your dom. every view is like a separate canvas in isolation.