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>北京四合院三维场景</title>
  <style>
    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #000;
      font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    }

    canvas {
      display: block;
    }

    #overlay {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.38);
      z-index: 10;
      transition: opacity 0.25s ease;
    }

    #overlay.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .panel {
      width: min(520px, 90vw);
      padding: 28px 26px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
      color: #222;
      text-align: center;
    }

    .panel h1 {
      margin: 0 0 12px;
      font-size: 28px;
    }

    .panel p {
      margin: 8px 0;
      line-height: 1.7;
      color: #444;
      font-size: 15px;
    }

    #startBtn {
      margin-top: 16px;
      border: none;
      border-radius: 10px;
      padding: 12px 24px;
      font-size: 16px;
      cursor: pointer;
      background: #8b1f17;
      color: #fff;
    }

    #startBtn:hover {
      background: #a52a20;
    }

    #hud {
      position: fixed;
      left: 16px;
      bottom: 16px;
      z-index: 5;
      padding: 8px 12px;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      font-size: 13px;
      opacity: 0;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }

    #hud.show {
      opacity: 1;
    }
  </style>

  <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>
</head>
<body>
  <div id="overlay">
    <div class="panel">
      <h1>北京四合院三维场景</h1>
      <p>布局：北房两卧一厅，东厢房一卧，西厢房茶室，带庭院、大门、窗户与基础家具。</p>
      <p>点击进入第一视角，W A S D 移动，鼠标查看方向，Esc 退出。</p>
      <button id="startBtn">进入场景</button>
    </div>
  </div>

  <div id="hud">W A S D 移动 · 鼠标查看 · Esc 退出</div>

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

    const overlay = document.getElementById("overlay");
    const startBtn = document.getElementById("startBtn");
    const hud = document.getElementById("hud");

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xbfd8ff);
    scene.fog = new THREE.Fog(0xbfd8ff, 70, 180);

    const camera = new THREE.PerspectiveCam.........完整代码请登录后点击上方下载按钮下载查看