JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Holywater™ Three.js</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        canvas {
            display: block;
            width: 100vw;
            height: 100vh;
        }
        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            pointer-events: none;
            text-shadow: 0px 2px 4px rgba(0,0,0,0.8);
            z-index: 10;
        }
        h1 { margin: 0 0 5px 0; font-size: 1.5rem; }
        p { margin: 0; font-size: 0.9rem; opacity: 0.8; }
        .controls {
            margin-top: 15px;
            padding: 10px;
            background: rgba(0,0,0,0.5);
            border-radius: 8px;
            display: inline-block;
        }
        .key {
            display: inline-block;
            background: #fff;
            color: #333;
            padding: 3px 8px;
            border-radius: 4px;
            font-weight: bold;
            font-family: monospace;
            margin: 0 2px;
        }
    </style>
</head>
<body>

    <div id="info">
        <h1>Holywater™</h1>
        <p>Move Mouse (Drag & Zoom) or WASD the boat!</p>        
    </div>

    <!-- Three.js Bibliothek -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <!-- OrbitControls für die Kamera -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <!-- dat.GUI für die Regler (Sliders) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>

    <script>
        // --- Szene, Kamera und...