three实现三维陕西·地坑院“地下四合院场景漫游体验代码-html代码-BFW代码库

代码语言：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">
<title>陕西·地坑院 —— 地下四合院</title>
<style>
  html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#1a130b;
    font-family:"Noto Serif SC","STSong","SimSun",serif;}
  canvas{display:block;}
  #overlay{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;
    justify-content:center;background:rgba(16,11,6,.66);color:#f3e2c2;text-align:center;
    transition:opacity .8s;cursor:pointer;}
  #overlay.hide{opacity:0;pointer-events:none;}
  #overlay h1{font-size:44px;letter-spacing:10px;margin:0 0 10px;color:#ffd98f;
    text-shadow:0 2px 18px rgba(255,150,40,.45);}
  #overlay .sub{font-size:17px;letter-spacing:6px;color:#e8c890;margin-bottom:22px;}
  #overlay .poem{font-size:15px;color:#cdb188;letter-spacing:3px;line-height:2;}
  #startBtn{margin-top:34px;font-size:20px;letter-spacing:6px;padding:14px 46px;
    background:linear-gradient(#c22e1f,#8f1d12);color:#ffe9c0;border:1px solid #e8a04c;
    border-radius:4px;cursor:pointer;font-family:inherit;}
  #startBtn:hover{filter:brightness(1.2);}
  #overlay .note{margin-top:22px;font-size:12px;color:#9a8262;letter-spacing:2px;}
  #hud{position:fixed;inset:0;z-index:10;pointer-events:none;color:#f3e2c2;}
  #tip{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:13px;
    letter-spacing:2px;background:rgba(20,14,8,.55);padding:7px 18px;border-radius:20px;
    border:1px solid rgba(232,160,76,.35);}
  #btns{position:absolute;top:12px;right:14px;display:flex;gap:8px;pointer-events:auto;}
  #btns button{font-family:inherit;font-size:13px;letter-spacing:2px;color:#f0d8ac;
    background:rgba(30,20,10,.6);border:1px solid rgba(232,160,76,.45);border-radius:4px;
    padding:7px 14px;cursor:pointer;}
  #btns button.on{background:#a03020;color:#ffe9c0;}
  #btns button:hover{filter:brightness(1.25);}
  #lockTip{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);
    font-size:14px;letter-spacing:3px;background:rgba(20,14,8,.7);padding:9px 22px;
    border-radius:6px;border:1px solid rgba(232,160,76,.4);display:none;}
  #info{position:absolute;bottom:14px;left:16px;font-size:12px;letter-spacing:2px;
    color:#cbb088;background:rgba(20,14,8,.45);padding:6px 12px;border-radius:6px;}
  #err{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;
    color:#ffcf9a;background:#1a130b;font-size:15px;letter-spacing:2px;}
</style>
</head>
<body>
<div id="overlay">
  <h1>地 坑 院</h1>
  <div class="sub">陕西 · 渭北高原 · 地下四合院</div>
  <div class="poem">见树不见村,进村不见房。<br>闻声知有人,炊烟自地起。</div>
  <button id="startBtn">进 院 参 观</button>
  <div class="note">WASD 移动 · 鼠标环视 · Shift 加速 · 沿坡道可下入院落(建议桌面端)</div>
</div>
<div id="hud">
  <div id="tip">WASD 移动 · 鼠标环视 · 沿南侧坡道下入院落</div>
  <div id="btns">
    <button id="bWalk" class="on">漫 游</button>
    <button id="bTop">俯 瞰</button>
    <button id="bDay">黄 昏</button>
    <button id="bSound">♪ 声音</button>
  </div>
  <div id="lockTip">点击画面任意处继续漫游</div>
  <div id="info">地平线下的人家 —— 黄土塬上的生土建筑奇观</div>
</div>
<div id="err">加载 Three.js 失败,请检查网络(需访问 CDN)。</div>

<script type="importmap">
{ "imports": {
  "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
} }
</script>
<script>
setTimeout(()=>{ if(!window.__ok) document.getElementById('err').style.display='flex'; },8000);
</script>

<script type="module">
import * as THREE from 'three';
import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
window.__ok = true;

/* ================= 基础 ================= */
const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(innerWidth,innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio,2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.08;
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xd8c9a8, 70, 215);
const camera = new THREE.PerspectiveCamera(66, innerWidth/innerHeight, 0.1, 900);
camera.rotation.order = 'YXZ';

const UP = new THREE.Vector3(0,1,0);
const clock = new THREE.Clock();

/* ================= 地形函数 =.........完整代码请登录后点击上方下载按钮下载查看