Experimenting with three.js, I am attempting to create an animation of a sine wave that originates from where a plane is clicked with the mouse. However, there seems to be a discrepancy in the ripple's starting point as it always emanates from the middle of the plane irrespective of the click location. Clicking towards the edges of the plane does alter the wave slightly, but the exact origin remains elusive.
Since math has never been my forte, I suspect there may be a logical error causing this issue!
Snippet:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
</head>
<body>
</body>
<script src="three.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
// Insert your code snippet here
</script>
</html>
The JSfiddle link for further exploration: https://jsfiddle.net/dwo3kvLp/