three实现操控三维探测车行驶月球表面俯视地球场景代码-html代码-BFW代码库

three实现操控三维探测车行驶月球表面俯视地球场景代码

代码语言：html

所属分类：三维

代码描述：three实现操控三维探测车行驶月球表面俯视地球场景代码

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Lunar Rover Simulator</title>
  
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #000;
      font-family: sans-serif;
    }
    #ui-container {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: #ffffff;
      background: rgba(0, 0, 0, 0.6);
      padding: 15px 25px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      font-size: 16px;
      text-align: center;
      pointer-events: none;
      text-shadow: 0 2px 4px rgba(0,0,0,0.8);
      z-index: 10;
      transition: opacity 1s;
    }
    .key-hint {
      color: #ffd700;
      font-weight: bold;
    }
  </style>
</head>

<body translate="no">
  <div id="ui-container">
    <div>使用 <span class="key-hint">W A S D</span> 驾驶登月车</div>
    <div style="margin-top: 5px; font-size: 14px; color: #ccc;">鼠标左键拖拽可自由旋转摄像机</div>
  </div>

  <!-- Dependencies -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lil-gui@0.18"></script>
  
  <script>
// ==========================================
// DEFAULTS & CONFIGURATION
// ==========================================
const defaults = {
  roverColor: '#dddddd',
  maxSpeed: 25.0,
  acceleration: 20.0,
  turnSpeed: 1.8,
  sunIntensity: 4.5,
  sunHeight: 45,
  .........完整代码请登录后点击上方下载按钮下载查看