Working on replicating a Flash website using Three.JS and facing difficulty in achieving desired functionality.
The goal is to create button images that orbit around the center of the screen, stop when hovered over by the mouse, and open a different location upon clicking.
While most features are working smoothly, the buttons fail to pause when the mouse hovers over them. Attempting to utilize a raycast for this purpose reveals an issue where the mesh and rendered image appear to rotate in opposing directions as the mouse moves across the scene.
Below is the code snippet and a link to a live demo showcasing the ongoing development:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin: 0;}
canvas { display: block;}
</style>
</head>
... (Code continues) ...
addScript("./js/ThreeJS_0.119.1.js",function() {
addScript("./js/ThreeJS_0.119.1_Projector.js",function(){
THREEReady();
})});
})();
</script>
</body>
Check out the Live Demo here!