Gulum/WebOcean
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add diffrent camera modes

Browse Source
This commit is contained in:
Gulum
2026-02-04 22:41:53 +01:00
parent 86d6da33d2
commit 52c2e1dacd
5 changed files with 290 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
index.html
View File

@@ -358,17 +358,21 @@
<div id="controls">
<h3>🌊 Ocean Controls</h3>
<div class="control-group">
<strong>Camera Rotation:</strong><br>
<span class="key">W</span><span class="key">A</span><span class="key">S</span><span class="key">D</span> or
Arrow Keys
<strong>Camera Mode:</strong> <span class="key">C</span> (FPS/Orbital)<br>
<span id="current-camera-mode" style="font-size: 12px; color: #aaa;">Current: FPS</span>
</div>
<div class="control-group">
<strong>Zoom:</strong><br>
<span class="key">Q</span> / <span class="key">E</span> or <span class="key">+</span> / <span
class="key">-</span>
<strong>FPS Camera:</strong><br>
<span class="key">W</span><span class="key">A</span><span class="key">S</span><span class="key">D</span> Move<br>
<span class="key">Q</span><span class="key">E</span> or <span class="key">Space</span><span class="key">Ctrl</span> Up/Down<br>
<span class="key">Shift</span> Sprint<br>
Mouse: Look around
</div>
<div class="control-group">
<strong>Mouse:</strong> Click and drag to rotate
<strong>Orbital Camera:</strong><br>
<span class="key">W</span><span class="key">A</span><span class="key">S</span><span class="key">D</span> or Arrows Rotate<br>
<span class="key">Q</span><span class="key">E</span> or <span class="key">+</span><span class="key">-</span> Zoom<br>
Mouse: Click and drag to rotate
</div>
<div class="control-group">
<strong>Reset:</strong> <span class="key">R</span>
@@ -387,6 +391,7 @@
// Toggle controls visibility
const controls = document.getElementById('controls');
const toggleBtn = document.getElementById('toggle-controls');
const cameraModeDisplay = document.getElementById('current-camera-mode');
toggleBtn.addEventListener('click', () => {
controls.classList.toggle('hidden');
@@ -396,6 +401,27 @@
if (evt.key === 'h' || evt.key === 'H') {
controls.classList.toggle('hidden');
}
// Update camera mode display when C is pressed
if (evt.key === 'c' || evt.key === 'C') {
setTimeout(() => {
// Get camera mode from any displayed element
const cameraMode = document.getElementById('camera-mode');
if (cameraMode && cameraModeDisplay) {
const mode = cameraMode.textContent.replace('Camera: ', '');
cameraModeDisplay.textContent = `Current: ${mode}`;
}
}, 100);
}
});
// Listen for custom camera mode toggle events from UI
window.addEventListener('toggleCameraMode', () => {
const cameraMode = document.getElementById('camera-mode');
if (cameraMode && cameraModeDisplay) {
const mode = cameraMode.textContent.replace('Camera: ', '');
cameraModeDisplay.textContent = `Current: ${mode}`;
}
});
</script>
</body>