How to make geometry in three.js a hyperlink? - three.js

Question

Im pretty new to using three js, have been able to set up a basic scene, using a skybox and loading a few static glb meshes. I would like to make these into hyperlinks - can anyone explain how I might do this or point me in the direction of a good tutorial? thanks!
*edit : have been attempting it with no luck - here is my code, please let me know if you spot any mistakes or maybe i have gone in the wrong direction entirely haha
var scene, camera, renderer;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(55,window.innerWidth/window.innerHeight,45,30000);
camera.position.set(-900,-200,-900);
// set canvas - dynamic resizing without distortion
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
// controls
var controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', renderer);
controls.minDistance = 100;
controls.maxDistance = 2000;
// lights
var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
light.position.set( 0, 200, 0 );
scene.add( light );
var light = new THREE.AmbientLight( 0xFFFFFF )
scene.add( light )
// moon mesh
var sphere = new THREE.SphereGeometry( 6.7, 21.4, 21.4 )
var material = new THREE.MeshPhongMaterial()
material.map = new THREE.TextureLoader().load('moonmap4k.jpg')
var moonMesh = new THREE.Mesh( sphere, material )
moonMesh.position.set(10, 10, 0)
moonMesh.scale.set(15, 15, 15)
moonMesh.userData = { URL: "https://threejs.org/examples/?q=fbx#webgl_loader_fbx"};
scene.add( moonMesh )
function onMouseMove(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
mouseX = event.clientX - window.innerWidth / 2;
mouseY = event.clientY - window.innerHeight / 2;
camera.position.x += (mouseX - camera.position.x) * 0.01;
camera.position.y += (mouseY - camera.position.y) * 0.01;
camera.lookAt(scene.position);
};
function onDocumentMouseDown(event) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects([moonMesh]);
if (intersects.length > 0) {
//get a link from the userData object
openMoonMesh();
}
};
// skybox
var materialArray = [];
var texture_ft = new THREE.TextureLoader().load( 'graycloud_ft.jpg');
var texture_bk = new THREE.TextureLoader().load( 'graycloud_bk.jpg');
var texture_up = new THREE.TextureLoader().load( 'graycloud_up.jpg');
var texture_dn = new THREE.TextureLoader().load( 'graycloud_dn.jpg');
var texture_rt = new THREE.TextureLoader().load( 'graycloud_rt.jpg');
var texture_lf = new THREE.TextureLoader().load( 'graycloud_lf.jpg');
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_ft }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_bk }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_up }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_dn }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_rt }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_lf }));
for (var i = 0; i < 6; i++)
materialArray[i].side = THREE.BackSide;
var skyboxGeo = new THREE.BoxGeometry( 10000, 10000, 10000);
var skybox = new THREE.Mesh( skyboxGeo, materialArray );
scene.add( skybox );
animate();
}
function animate() {
renderer.render(scene,camera);
requestAnimationFrame(animate);
requestAnimationFrame(render)
var delta = clock.getDelta();
mixer.update( delta )
}
init();