three实现游乐园三维小轨道火车操控行驶代码-html代码-BFW代码库

three实现游乐园三维小轨道火车操控行驶代码

代码语言：html

所属分类：三维

代码描述：three实现游乐园三维小轨道火车操控行驶代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Train Control Game</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #000; font-family: Arial, sans-serif; }
canvas { display: block; }
#ui {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    align-items: center;
    background: rgba(0,0,0,0.6);
    padding: 15px 25px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}
#ui button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    transition: transform 0.1s;
}
#ui button:active { transform: scale(0.95); }
#speedUp { background: #4CAF50; }
#slowDown { background: #f44336; }
#reverse { background: #FF9800; }
#horn { background: #9C27B0; }
#speedDisplay {
    color: white;
    font-size: 18px;
    min-width: 120px;
    text-align: center;
}
#info {
    position: absolute;
    top: 15px;
    left: 15px;
    color: white;
    background: rgba(0,0,0,0.6);
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
}
#cameraButtons {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#cameraButtons button {
    padding: 8px 16px;
    font-size: 13px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: rgba(255,255,255,0.2);
    color: white;
    backdrop-filter: blur(10px);
}
#cameraButtons button.active {
    background: rgba(33,150,243,0.8);
}
</style>
</head>
<body>

<div id="info">
    🚂 Train Controls:<br>
    W / ↑ : Speed Up<br>
    S / ↓ : Slow Down<br>
    R : Reverse<br>
    H : Horn 🔊<br>
    Mouse: Rotate Camera
</div>

<div id="cameraButtons">
    <button id="camTop" onclick="setCameraMode('top')">Top View</button>
    <button id="camFollow" class="active" onclick="setCameraMode('follow')">Follow</button>
    <button id="camDriver" onclick="setCameraMode('driver')">Driver</button>
    <button id="camFree" onclick="setCameraMode('free')">Free</button>
</div>

<div id="ui">
    <button id="slowDown" onclick="changeSpeed(-0.3)">⏪ Brake</button>
    <div id="speedDisplay">Speed: 0</div>
    <button id="speedUp" onclick="changeSpeed(0.3)">Accel ⏩</button>
    <button id="reverse" onclick="toggleReverse()">🔄 Reverse</button>
    <button id="horn" onclick="playHorn()">📯 Horn</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Scene setup
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB);
scene.fog = new THREE.FogExp2(0x87CEEB, 0.008);

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
document.body.appendChild(renderer.domElement);

// Lighting
const ambientLight = new THREE.AmbientLight(0x6688cc, 0.5);
scene.add(ambientLight);

const sunLight = new THREE.DirectionalLight(0xf.........完整代码请登录后点击上方下载按钮下载查看