three三维2层小洋楼场景外立面与内饰展示代码-html代码-BFW代码库

three三维2层小洋楼场景外立面与内饰展示代码

代码语言：html

所属分类：三维

代码描述：three三维2层小洋楼场景外立面与内饰展示代码

下面为部分代码预览，完整代码请点击下载或在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>Three.js 两层平顶小洋楼</title>
  <style>
    html, body {
      margin: 0;
      height: 100%;
      overflow: hidden;
      background: #c7dced;
      font-family: system-ui, sans-serif;
    }

    #overlay {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      background: radial-gradient(circle at center, rgba(255,255,255,0.15), rgba(24,30,40,0.72));
      color: #fffaf3;
      z-index: 10;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }

    #overlay.hidden {
      opacity: 0;
    }

    .panel {
      padding: 18px 24px;
      border-radius: 16px;
      text-align: center;
      background: rgba(55, 38, 28, 0.36);
      border: 1px solid rgba(255, 240, 220, 0.2);
      backdrop-filter: blur(8px);
      box-shadow: 0 16px 40px rgba(0,0,0,0.25);
    }

    .title {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .hint {
      font-size: 14px;
      line-height: 1.7;
      opacity: 0.95;
    }
  </style>
</head>
<body>
  <div id="overlay">
    <div class="panel">
      <div class="title">点击进入小洋楼参观模式</div>
      <div class="hint">W A S D 行走，鼠标转向，Shift 加速，Esc 退出</div>
    </div>
  </div>

      <script type="importmap">
{
 "imports":{
    "three":"//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js",
    "three/addons/":"//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/"
 }
}
</script>

<script type="module">

    import * as THREE from 'three';

    import { PointerLockControls } from "three/addons/controls/PointerLockControls.js";
    const overlay = document.getElementById("overlay");

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xc7dced);
    scene.fog = new THREE.Fog(0xc7dced, 55, 130);

    const camera = new THREE.PerspectiveCamera(72, window.innerWidth / window.innerHeight, 0.1, 200);
    camera.position.set(0, 1.72, 22);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.05;
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    document.body.appendChild(renderer.domElement);

    const controls = new PointerLockControls(camera, document.body);

    document.addEventListener("click", () => {
      if (!controls.isLocked) controls.lock();
    });

    controls.addEventListener("lock", () => overlay.classList.add("hidden"));
    controls.addEventListener("unlock", () => overlay.classList.remove("hidden"));

    const keys = {
      KeyW: false,
      KeyA: false,
      KeyS: false,
      KeyD: false,
      ShiftLeft: false,
      ShiftRight: false
    };

    document.addEventListener("keydown", (e) => {
      if (e.code in keys) keys[e.code] = true;
    });

    document.addEventListener("keyup", (e) => {
      if (e.code in keys) keys[e.code] = false;
    });

    window.addEventListener("blur", () => {
      for (const k in keys) keys[k] = false;
    });

    const HOUSE_W = 18;
    const HOUSE_D = 14;
    const WALL_T = 0.25;

    const FLOOR1_Y = 0.0;
    const FLOOR2_Y = 3.4;
    const SLAB_T = 0.18;
    const ROOF_T = 0.22;
    const ROOF_TOP_Y = 6.8;

    c.........完整代码请登录后点击上方下载按钮下载查看