Add a link to displayed text

Questions
1

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

2

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

3

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

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

4

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.

5

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 :wink:

6

For dom element click:

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

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 (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 and you can even have keyboard/tab navigation, focus, screen reader and all that.

1 Like
8

@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 :slightly_smiling_face:

		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");
		}