# Add a link to displayed text

**URL:** <https://discourse.threejs.org/t/add-a-link-to-displayed-text/40043>\
**Category:** Questions\
**Tags:** interaction\
**Created:** [July 6, 2022, 7:27am UTC](https://discourse.threejs.org/t/add-a-link-to-displayed-text/40043 "2022-07-06T07:27:36Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![RRBiz](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@RRBiz](https://discourse.threejs.org/u/RRBiz)\
**Post date:** [July 6, 2022, 7:27am UTC](https://discourse.threejs.org/t/add-a-link-to-displayed-text/40043/1 "2022-07-06T07:27:36Z")

</div>

Opening a new browser tab by clicking on textgeometry?  
How can I add a link like new url(“[https://website](https://website)”) to an object like textgeometry?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 6, 2022, 7:32am UTC](https://discourse.threejs.org/t/add-a-link-to-displayed-text/40043/2 "2022-07-06T07:32:02Z")

</div>

If have intersection from mouse click to textgeometry, then  
`window.open("https://website/","_blank");`

---

<div class="post-metadata">

**Author:** ![RRBiz](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@RRBiz](https://discourse.threejs.org/u/RRBiz)\
**Post date:** [July 6, 2022, 7:50am UTC](https://discourse.threejs.org/t/add-a-link-to-displayed-text/40043/3 "2022-07-06T07:50:38Z")

</div>

I have a function  
function onPointerStart(event) {  
isUserInteracting = true;  
clientX = event.clientX || event.touches[0].clientX;  
clientY = event.clientY || event.touches[0].clientY;  
onMouseDownMouseX = clientX;  
onMouseDownMouseY = clientY;  
}  
And control sections on a sphere mesh and have user interaction by clicking on certain points on the screen borders of the window  
But I did not find a way to add a link to the text which varies in size and position

> **[Tauplitz Steiermark Austria Grimming Weißkirchl Gwendlingstein Ralph...](https://panoworlds.com/RalphRoeske/TimeLine.php?TL=1752346.5484094ItB)**
>
> Tauplitz Steiermark Austria Grimming Weißkirchl Gwendlingstein Ralph Geburtstag DJI Air2S Drohne Copter #Dronephotography #Panoramaphotography #Panorama #Panorama #3D #3DPanorama #Pano #World #Landscape #PanoWorlds #Photography #Panoramaphotography

I want to add any link - not only to my own site …

---

<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:** [July 6, 2022, 8:00am UTC](https://discourse.threejs.org/t/add-a-link-to-displayed-text/40043/4 "2022-07-06T08:00:08Z")

</div>

onPointerStart is not something that exists on the dom? The event is called onclick, you raycast and look if your mesh has been hit, and then, like @Chaser_Code said, you call the window.open function.

---

<div class="post-metadata">

**Author:** ![RRBiz](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@RRBiz](https://discourse.threejs.org/u/RRBiz)\
**Post date:** [July 6, 2022, 8:11am UTC](https://discourse.threejs.org/t/add-a-link-to-displayed-text/40043/5 "2022-07-06T08:11:01Z")

</div>

In my editor I have tens of on click functions like  
$(document).on(‘click’, ‘#saveTURN’, function() { … }  
But they work with buttons in html and overlay the three scene  
I need a connection to the text detecting a mouse click and then open another window which is defined with a link “behind” the text  
Ok - actually I thought after so may years there would be a solution somewhere and I do not have to invent the wheel on my own 😉

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 6, 2022, 8:23am UTC](https://discourse.threejs.org/t/add-a-link-to-displayed-text/40043/6 "2022-07-06T08:23:29Z")

</div>

For dom element click:

```javascript
dom.addEventListener("pointerdown", () => {
console.info("click");
});

```

---

<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:** [July 6, 2022, 11:27am UTC](https://discourse.threejs.org/t/add-a-link-to-displayed-text/40043/7 "2022-07-06T11:27:39Z")

</div>

> [@RRBiz](#):
>
> I need a connection to the text detecting a mouse click and then open another window which is defined with a link “behind” the text

threejs does not have events, you have to implement all of this yourself with raycasting. or use three with react, which has a full pointer-events implementation: [https://codesandbox.io/s/circling-birds-forked-or90cs?file=/src/App.js](https://codesandbox.io/s/circling-birds-forked-or90cs?file=/src/App.js) (needs fullscreen for the link to work otherwise it runs in a sandbox)

pair it with [GitHub - pmndrs/react-three-a11y: ♿️ Accessibility tools for React Three Fiber](https://github.com/pmndrs/react-three-a11y) and you can even have keyboard/tab navigation, focus, screen reader and all that.

---

<div class="post-metadata">

**Author:** ![RRBiz](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@RRBiz](https://discourse.threejs.org/u/RRBiz)\
**Post date:** [July 6, 2022, 2:55pm UTC](https://discourse.threejs.org/t/add-a-link-to-displayed-text/40043/8 "2022-07-06T14:55:45Z")

</div>

@drcmda  
Thanks - That was the right information  
Opens the linked website in a new tab  
Because of Firefox you must set all Flags to 0 and the Link to “” (what is better anyway) - otherwise the site opens 100 times, because even if the window has no focus Firefox believes you are still clicking the mouse 🙂

```
		PW_Raycaster.setFromCamera( PW_Pointer, camera2 );
		if (textMesh1)
		{
			PW_Intersects = PW_Raycaster.intersectObject( textMesh1 );
			if(PW_Intersects) { PW_Flag=1; } else { PW_Flag = 0; }
		}
		if(PW_Flag==1 && isUserInteracting==true && PW_Link != '') //isUserInteracting from function onPointerStart(event)
		{
			window.open(PW_Link, "_blank");
		}

```