# Get div x,y coordinates, render mesh

**URL:** <https://discourse.threejs.org/t/get-div-x-y-coordinates-render-mesh/65954>\
**Category:** Questions\
**Tags:** animation, materials, geometry\
**Created:** [May 24, 2024, 10:46pm UTC](https://discourse.threejs.org/t/get-div-x-y-coordinates-render-mesh/65954 "2024-05-24T22:46:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dawken](https://avatars.discourse-cdn.com/v4/letter/d/f0a364/32.png) [@Dawken](https://discourse.threejs.org/u/Dawken)\
**Post date:** [May 24, 2024, 10:46pm UTC](https://discourse.threejs.org/t/get-div-x-y-coordinates-render-mesh/65954/1 "2024-05-24T22:46:32Z")

</div>

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.

```javascript
 addSphere(startX, startY, startZ)

```

```javascript
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:

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

```

```javascript
<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](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,

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [May 25, 2024, 8:35am UTC](https://discourse.threejs.org/t/get-div-x-y-coordinates-render-mesh/65954/2 "2024-05-25T08:35:00Z")

</div>

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](https://github.com/pmndrs/drei?tab=readme-ov-file#view) which would solve your issue.

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

- [div tracking w/ scroll](https://codesandbox.io/p/sandbox/view-tracking-bp6tmc?file=%2Fsrc%2FApp.js)
- [heads up display](https://codesandbox.io/p/sandbox/view-skissor-2-v5i9wl?file=%2Fsrc%2FApp.js)
- [multi view](https://codesandbox.io/p/sandbox/multiple-views-with-uniform-controls-r9w2ob?file=%2Fsrc%2FApp.js)