I am new to THREE.js. I would like to implement a feature where clicking the mouse selects a loaded .obj object in the scene, highlights it by making it half transparent, and then allows the object to follow the mouse as it moves. Subsequently, another click should restore the object's solid color and make it stick to the clicked position.
Despite adding the loaded objects to the objects array, the raycaster seems unable to detect when I click on these objects.
Check out my code below:
<html>
<head includeDefault="true">
<script src="js/three.js"></script>
<script src="js/PointerLockControls.js"></script>
<script src="js/OBJLoader.js"></script>
<script src="js/MTLLoader.js"></script>
<script src="js/dat.gui.min.js"></script>
<script src="js/stats.min.js"></script>
<script src="js/OrbitControls.js"></script>
</head>
<body>
<script>
// Your JavaScript code goes here
</script>
</body>
</html>