Hello friends i am new to threejs please help to add hyperlink in the side of a cube so that if i click on a face of a cube it opens a website
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,
window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// How to make a responsive thing
window.addEventListener('resize', function() {
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
//How to make controls of a geometry in your hand
controls = new THREE.OrbitControls(camera, renderer.domElement);
//The geometry of the shape is begin
var geometry = new THREE.BoxGeometry(2, 2, 2);
var cubeMaterials = [
new THREE.MeshBasicMaterial({
map: new
THREE.TextureLoader().load('1.svg'),
side: THREE.DoubleSide
}), //Right Side
new THREE.MeshBasicMaterial({
map: new
THREE.TextureLoader().load('2.svg'),
side: THREE.DoubleSide
}), //Left Side
new THREE.MeshBasicMaterial({
map: new
THREE.TextureLoader().load('3.svg'),
side: THREE.DoubleSide
}), //Top Side
new THREE.MeshBasicMaterial({
map: new
THREE.TextureLoader().load('4.svg'),
side: THREE.DoubleSide
}), //Bottom Side
new THREE.MeshBasicMaterial({
map: new
THREE.TextureLoader().load('5.svg'),
side: THREE.DoubleSide
}), //Front Side
new THREE.MeshBasicMaterial({
map: new
THREE.TextureLoader().load('6.svg'),
side: THREE.DoubleSide
}) //Back Side
]
//Create a material,color or image texture
var material = new THREE.MeshFaceMaterial(cubeMaterials);
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
//game logic
var animate = function() {
requestAnimationFrame(animate);
// cube.rotation.x += 0.01;
// cube.rotation.y += 0.01;
//draw scene
renderer.render(scene, camera);
};
animate();
</script>