three三维三层别墅场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由deepseek-4.1 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维农村小别墅场景

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>豪华三层小别墅 · 3D 自由漫游</title>
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; overflow:hidden; background:#000; font-family:"Microsoft YaHei","PingFang SC",sans-serif; }
  canvas { display:block; }

  #hud {
    position:fixed; left:14px; top:14px; z-index:10;
    color:#fff; font-size:13px; line-height:1.7;
    text-shadow:0 1px 3px rgba(0,0,0,.85);
    pointer-events:none; user-select:none;
  }
  #hud .tag {
    display:inline-block; background:rgba(0,0,0,.38);
    border:1px solid rgba(255,255,255,.16);
    border-radius:7px; padding:6px 11px; margin-bottom:6px;
    backdrop-filter:blur(6px);
  }
  #hud b { color:#7fe3ff; font-weight:600; }
  #hud .w { color:#ffd67f; }

  #crosshair {
    position:fixed; left:50%; top:50%; z-index:9;
    width:22px; height:22px; margin:-11px 0 0 -11px;
    pointer-events:none; opacity:.85;
  }
  #crosshair::before, #crosshair::after {
    content:''; position:absolute; background:#fff;
    box-shadow:0 0 4px rgba(0,0,0,.9);
  }
  #crosshair::before { left:10px; top:0; width:2px; height:22px; }
  #crosshair::after  { top:10px; left:0; height:2px; width:22px; }

  #overlay {
    position:fixed; inset:0; z-index:20;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:radial-gradient(circle at 50% 40%, rgba(20,40,70,.82), rgba(4,8,16,.96));
    color:#fff; cursor:pointer; text-align:center; padding:20px;
  }
  #overlay h1 { font-size:30px; letter-spacing:4px; margin-bottom:14px;
                background:linear-gradient(90deg,#8fd9ff,#ffe6a8,#8fd9ff);
                -webkit-background-clip:text; background-clip:text; color:transparent; }
  #overlay p { font-size:14px; color:#b9c9dc; line-height:2; max-width:640px; }
  #overlay .key { display:inline-block; min-width:22px; padding:1px 7px; margin:0 3px;
                  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
                  border-radius:5px; font-size:12px; }
  #overlay .go { margin-top:24px; font-size:16px; color:#7fe3ff; animation:bl 1.6s infinite; }
  @keyframes bl { 0%,100%{opacity:.45} 50%{opacity:1} }

  #toast {
    position:fixed; left:50%; top:78px; transform:translateX(-50%);
    z-index:15; padding:9px 22px; border-radius:20px;
    background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2);
    color:#fff; font-size:14px; opacity:0; transition:opacity .5s;
    pointer-events:none; backdrop-filter:blur(6px);
  }
  #toast.on { opacity:1; }

  body.dragging #crosshair { opacity:.35; }
  body.dragging canvas { cursor:grabbing; }
</style>
</head>
<body>

<div id="hud">
  <div class="tag">🕐 <b id="hTime">08:00</b> &nbsp;|&nbsp; 🌤 <span class="w" id="hWeather">晴朗</span> &nbsp;|&nbsp; 🚶 <span id="hRoom">庭院</span> &nbsp;|&nbsp; <span id="hFps">60</span> FPS</div>
  <div class="tag" style="font-size:12px;opacity:.85">WASD 移动 &nbsp;·&nbsp; 鼠标 视角 &nbsp;·&nbsp; Shift 疾跑 &nbsp;·&nbsp; 空格 跳跃 &nbsp;·&nbsp; E / 左键 开关门窗</div>
</div>

<div id="crosshair"></div>
<div id="toast"></div>

<div id="overlay">
  <h1>豪 华 三 层 小 别 墅</h1>
  <p>
    走进这座带围墙的私家宅院 —— 菜园、池塘、假山、凉亭、车库一应俱全。<br>
    推开大门进入别墅，现代化的室内装修，沿楼梯参观三层空间。<br>
    所有门窗都可以开关，天气随机变化，昼夜不断循环。
  </p>
  <p style="margin-top:16px">
    <span class="key">W</span><span class="key">A</span><span class="key">S</span><span class="key">D</span> 移动 &nbsp;
    <span class="key">鼠标</span> 视角 &nbsp;
    <span class="key">Shift</span> 疾跑 &nbsp;
    <span class="key">空格</span> 跳跃 &nbsp;
    <span class="key">E</span>/<span class="key">左键</span> 开关门窗
  </p>
  <div class="go">点击屏幕开始漫游</div>
</div>

<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
  }
}
</script>

<script type="module">
import * as THREE from 'three';

/* ==================================================================
   0. 全局工具 & 数据结构
   ================================================================== */
const colliders    = [];   // { box:Box3, enabled:bool } 玩家碰撞体
const walkables    = [];   // { minX,maxX,minZ,maxZ,top } 可站立面
const interactables= [];   // 可点击开关的对象
const houseLights  = [];   // 室内灯光
const lampBulbs    = [];   // 灯泡材质

const clamp = THREE.MathUtils.clamp;
const rand  = (a,b) => a + Math.random()*(b-a);

/* ==================================================================
   1. 渲染器 / 场景 / 相机
   ================================================================== */
const renderer = new THREE.WebGLRenderer({ antialias:true, powerPreference:'high-performance' });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x9dc4e8, 70, 420);

const camera = new THREE.PerspectiveCamera(72, innerWidth/innerHeight, 0.05, 3000);
camera.rotation.order = 'YXZ';

addEventListener('resize', () => {
  camera.aspect = innerWidth/innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

/* ==================================================================
   2. 材质库
   ================================================================== */
const M = {
  grass:      new THREE.MeshStandardMaterial({ color:0x5d9e4b, roughness:1 }),
  path:       new THREE.MeshStandardMaterial({ color:0xc0b8ab, roughness:0.95 }),
  soil:       new THREE.MeshStandardMaterial({ color:0x5b3f2a, roughness:1 }),
  wallOut:    new THREE.MeshStandardMaterial({ color:0xf2ece1, roughness:0.9 }),
  wallIn:     new THREE.MeshStandardMaterial({ color:0xf8f6f2, roughness:0.95 }),
  wallWarm:   new THREE.MeshStandardMa.........完整代码请登录后点击上方下载按钮下载查看