Looking to implement a unique menu for a web page using three.js, where each tab is represented by an object (a 2D rectangle) and clicking on the rectangle will navigate to a specific page of the website. I've been researching how to achieve this functionality using a raycaster activated upon a right-click event, and then utilizing the intersected objects array to determine which object was clicked.
I've tried several tutorials online but have not been successful in getting a functional raycaster and eventListener for the right-click. The raycast function I'm using is directly from the official three.js documentation.
Below is my code (script.js). Can you spot any errors or provide any suggestions for improvement? Thank you in advance for your assistance!
var camera, scene, rendu;
var geometrie, materiau, mesh;
var controle;
var couleur, plan, onglet1, onglet2, onglet3, onglet4, onglet5, onglet6;
var r, t;
var rayon, souris;
init();
function init() {
// Code omitted for brevity
}
// Remaining code truncated for brevity
And here is my html code (index.html)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
body{margin: 0px;}
canvas{width: 100%; height: 100%;}
</style>
</head>
<body>
<script src="js/build/three.js"></script>
<script src="js/build/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/GLTFLoader.js"></script>
<script src="js/script.js"></script>
</body>
</html>