Skip to content

Commit

Permalink
tweaked cursor pitch/yaw translation to quaternion and notation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lukas-Petervary
Lukas-Petervary committed Aug 7, 2024
1 parent 184f910 commit 907073b
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 81 deletions.
92 changes: 46 additions & 46 deletions Main.html → index.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discharge</title>

<link rel="stylesheet" href="styles.css">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/peerjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js"
integrity="sha512-n8IpKWzDnBOcBhRlHirMZOUvEq2bLRMuJGjuVqbzUJwtTsgwOgK5aS0c1JA647XWYfqvXve8k3PtZdzpipFjgg=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"
integrity="sha512-avLcnGxl5mqAX/wIKERdb1gFNkOLHh2W5JNCfJm5OugpEPBz7LNXJJ3BDjjwO00AxEY1MqdNjtEmiYhKC0ld7g=="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"
integrity="sha384-AEb/BX3YlmtV0ojuXiEU8C/HnQ+ftI0J40CIuE08tbhZnuvRXOTznQ8S2TBEa6fh"
crossorigin="anonymous"></script>
</head>
<body>
<div id="custom-cursor"></div>

<div id="terminal-container">
<div class="terminal">
<div class="terminal-header">Terminal</div>
<div class="terminal-output"></div>
<div class="terminal-input">
<span class="prompt">$ </span>
<input type="text" id="terminal-input">
</div>
</div>
</div>

<div id="pause-menu" class="overlay">
<div class="pause-content">
<button id="exit-button" onclick="g_MenuRegistry.showMenu('start-menu')">Exit to Menu</button>
<button id="back-button" onclick="g_cursor.lock()">Back to Game</button>
</div>
</div>

<div id="start-menu" class="overlay"></div>

<script type="module" src="./src/main.js"></script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discharge</title>

<link rel="stylesheet" href="styles.css">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/peerjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js"
integrity="sha512-n8IpKWzDnBOcBhRlHirMZOUvEq2bLRMuJGjuVqbzUJwtTsgwOgK5aS0c1JA647XWYfqvXve8k3PtZdzpipFjgg=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"
integrity="sha512-avLcnGxl5mqAX/wIKERdb1gFNkOLHh2W5JNCfJm5OugpEPBz7LNXJJ3BDjjwO00AxEY1MqdNjtEmiYhKC0ld7g=="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"
integrity="sha384-AEb/BX3YlmtV0ojuXiEU8C/HnQ+ftI0J40CIuE08tbhZnuvRXOTznQ8S2TBEa6fh"
crossorigin="anonymous"></script>
</head>
<body>
<div id="custom-cursor"></div>

<div id="terminal-container">
<div class="terminal">
<div class="terminal-header">Terminal</div>
<div class="terminal-output"></div>
<div class="terminal-input">
<span class="prompt">$ </span>
<input type="text" id="terminal-input">
</div>
</div>
</div>

<div id="pause-menu" class="overlay">
<div class="pause-content">
<button id="exit-button" onclick="g_MenuRegistry.showMenu('start-menu')">Exit to Menu</button>
<button id="back-button" onclick="g_cursor.lock()">Back to Game</button>
</div>
</div>

<div id="start-menu" class="overlay"></div>

<script type="module" src="./src/main.js"></script>
</body>
</html>
10 changes: 4 additions & 6 deletions src/client/Player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ export class Player {
contact.bi.id === this.playerBody.body.id ? contact.ni.negate(contactNormal) : contactNormal.copy(contact.ni);

this.canJump = contactNormal.dot(upAxis) > 0.5;
g_DebugTerminal.log(`canJump: ${g_MainPlayer.canJump}`);
});

document.addEventListener('keydown', this.onKeyDown.bind(this), false);
Expand Down Expand Up @@ -159,11 +158,9 @@ export class Player {
updateCameraRotation() {
// clamp camera pitch
const min = -Math.PI/2.2, max = Math.PI/2.2;
this.pitch = this.sensitivity * (1 - g_cursor.position.y/window.innerHeight*2);
this.pitch -= g_cursor.delta.dy / window.innerHeight * this.sensitivity;
this.pitch = this.pitch < min ? min : this.pitch > max ? max : this.pitch;
g_cursor.position.y = (1 - this.pitch/this.sensitivity) * window.innerHeight / 2;

this.yaw = this.sensitivity * (1 - g_cursor.position.x/window.innerWidth*2);
this.yaw -= g_cursor.delta.dx / window.innerWidth * this.sensitivity;

// apply pitch and yaw to camera
const lookVec = new CANNON.Quaternion();
Expand Down Expand Up @@ -194,7 +191,8 @@ export class Player {
}

movement() {
this.updateCameraRotation();
if (g_cursor.isLocked)
this.updateCameraRotation();
if (this.firstPerson)
g_renderer.camera.position.copy(this.playerBody.mesh.position);
else
Expand Down
66 changes: 41 additions & 25 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,43 +7,59 @@ import { Player } from "./client/Player.js";
import { MenuRegistry } from "./overlay/MenuRegistry.js";
import {AudioManager} from "./client/audio/AudioManager.js";

window.g_AudioManager = new AudioManager();
g_AudioManager.init();
async function main() {
await init();
g_DebugTerminal.log('Finished initializing');

window.g_MenuRegistry = new MenuRegistry();
g_MenuRegistry.showMenu('pause-menu');
onStart();
animate();
}

window.g_cursor = new CustomCursor();
window.g_DebugTerminal = new Terminal();
async function init() {
window.g_AudioManager = new AudioManager();
g_AudioManager.init();

window.g_renderer = new Renderer();
g_renderer.camera.position.set(0, 1.5, 2);
window.g_MenuRegistry = new MenuRegistry();

window.g_world = new World();
g_world.addSphere(1, { x: 0, y: 5, z: 0 });
window.g_cursor = new CustomCursor();
window.g_DebugTerminal = new Terminal();

window.g_MainPlayer = new Player();
window.g_renderer = new Renderer();
g_renderer.camera.position.set(0, 1.5, 2);

g_DebugTerminal.log('Finished initializing');
window.g_world = new World();

window.g_ConnectionManager = new ConnectionManager();
g_ConnectionManager.initialize();
window.g_MainPlayer = new Player();

const ambientLight = new THREE.AmbientLight(0xffffff, 1);
g_renderer.scene.add(ambientLight);
window.g_ConnectionManager = new ConnectionManager();
g_ConnectionManager.initialize();

g_DebugTerminal.log('Finished instantiating connection');
g_world.loadGLTFModel('../../assets/terrain/maps/portbase/scene.gltf');
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
g_renderer.scene.add(ambientLight);

function animate() {
requestAnimationFrame(animate);
g_DebugTerminal.log('Finished instantiating connection');
g_world.loadGLTFModel('../../assets/terrain/maps/portbase/scene.gltf');
}

function onStart() {
g_MenuRegistry.showMenu('pause-menu');
g_world.addSphere(1, { x: 0, y: 5, z: 0 });
}

function tick() {
g_AudioManager.pushPlayerPosition();

if(window.g_cursor.isLocked)
window.g_MainPlayer.movement();
else
window.g_world.fixToAngle(window.g_MainPlayer.playerBody, 0);
if(g_cursor.isLocked)
g_MainPlayer.movement();

g_cursor.delta = {dx: 0, dy: 0};
g_world.step();
}

function animate() {
requestAnimationFrame(animate);
tick();
g_renderer.render();
}
animate();

main();
3 changes: 1 addition & 2 deletions src/overlay/Cursor.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
export class CustomCursor {
constructor(menuRegistry) {
constructor() {
this.cursorElement = document.getElementById('custom-cursor');
this.menuRegistry = menuRegistry;
this.position = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
this.delta = { dx: 0, dy: 0 };

Expand Down
6 changes: 4 additions & 2 deletions src/overlay/MenuRegistry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,11 @@ export class MenuRegistry {

updateCursorVisibility() {
if (this.isMenuOpen) {
document.body.style.cursor = 'default'; // Show the client g_cursor
document.body.style.cursor = 'default';
g_cursor.unlock();
} else {
document.body.style.cursor = 'none'; // Hide the client g_cursor
document.body.style.cursor = 'none';
g_cursor.lock();
}
}
}

0 comments on commit 907073b

Please sign in to comment.