In my project, I am working on enabling a player to navigate in a first-person view on a planet using three.js and JavaScript. There are two key aspects I am focusing on:
a) Implementing player movement around the planet, which involves two types of movement: rotation around the player's axis (using left-right or A/D buttons) and forward/backward movement (using W/S buttons). I was able to achieve this with the help of resources like this thread .
b) Attaching a camera to the player that rotates horizontally (perpendicular to the player's plane) as the player rotates around themselves (using A/D buttons), and the camera should be able to move from 0 (looking at the ground) to 180 degrees (looking upwards) using the Arrow Up/Arrow Down buttons (potentially with mouse interaction in the future).
While I have been successful with a), I am facing a challenge with b) where the camera rotation initially works but jumps to an incorrect position as the player moves. To help troubleshoot the issue, I have created an ArrowHelper object to represent the camera.
Here is the HTML code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<meta http-equiv="Pragma" content="no-cache"/>
<title>Planet</title>
<link href="planet.css" rel="stylesheet" type="text/css"/>
<script src="../three.js/build/three.js"></script>
<script src="../three.js/examples/js/libs/stats.min.js"></script>
<script src="planet.js"></script>
</head>
<body>
<div id="divScreen">
</div>
</body>
</html>
And here is a snippet of the JavaScript code:
// JavaScript code snippet
// ...
I have attempted different rotations with quaternions, but none of them have provided the desired outcome. You can refer to the commented section in the code for my various attempts at solving the issue. Any assistance in resolving this problem would be greatly appreciated.
For a detailed example and to interact with the code, you can access the JSFiddle link: https://jsfiddle.net/z18ctvme/3/
Thank you in advance for your help.