three实现三维山水世界漫游体验爬山天气变化场景代码-html代码-BFW代码库

three实现三维山水世界漫游体验爬山天气变化场景代码

代码语言：html

所属分类：三维

代码描述：three实现三维山水世界漫游体验爬山天气变化场景代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>山水林间 - 3D 漫游</title>
<style>
  html,body{margin:0;padding:0;overflow:hidden;background:#000;font-family:"Microsoft YaHei",sans-serif;}
  canvas{display:block;}
  #blocker{
    position:absolute;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.72);display:flex;align-items:center;justify-content:center;
    z-index:10;cursor:pointer;
  }
  #instructions{color:#fff;text-align:center;font-size:22px;line-height:2;}
  #instructions kbd{background:#333;padding:2px 10px;border-radius:4px;border:1px solid #666;font-size:15px;}
  #hud{
    position:absolute;top:10px;left:10px;color:#fff;font-size:14px;
    background:rgba(0,0,0,0.35);padding:10px 14px;border-radius:8px;
    z-index:5;line-height:1.7;text-shadow:0 1px 2px #000;
    pointer-events:none;
  }
  #crosshair{
    position:absolute;top:50%;left:50%;width:6px;height:6px;
    margin:-3px 0 0 -3px;border-radius:50%;background:rgba(255,255,255,0.75);
    box-shadow:0 0 3px #000;
    z-index:5;pointer-events:none;
  }
  #compass{
    position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
    color:#fff;font-size:13px;background:rgba(0,0,0,0.35);
    padding:6px 16px;border-radius:8px;z-index:5;pointer-events:none;
    text-shadow:0 1px 2px #000;
  }
</style>
</head>
<body>
<div id="blocker">
  <div id="instructions">
    点击屏幕开始漫游<br>
    <span style="font-size:15px;color:#ccc;">
      <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> 移动 &nbsp;
      鼠标 环顾视角 &nbsp; <kbd>Space</kbd> 跳跃 &nbsp; <kbd>Shift</kbd> 疾跑<br><br>
      可自由行走、爬坡登山，天气会随机变化<br>
      按 <kbd>Esc</kbd> 退出鼠标锁定
    </span>
  </div>
</div>
<div id="hud">
  天气：<span id="weatherText">--</span><br>
  时间：<span id="timeText">--</span><br>
  海拔：<span id="heightText">--</span> 米
</div>
<div id="compass">朝向：--</div>
<div id="crosshair"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js"></script>
<script>
/* ========================================================================
   基础场景 / 相机 / 渲染器
======================================================================== */
const scene = new THREE.Scene();
const camera = new THREE.Perspect.........完整代码请登录后点击上方下载按钮下载查看