three实现三维四合院建筑场景外景内饰代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维四合院建筑场景外景内饰代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>北京四合院 - 三维场景</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #000; font-family: 'Microsoft YaHei', sans-serif; }
  canvas { display: block; }
  #info {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    color: #fff; background: rgba(0,0,0,0.7); padding: 10px 24px;
    border-radius: 8px; font-size: 14px; z-index: 100; text-align: center;
    pointer-events: none;
  }
  #crosshair {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 20px; height: 20px; z-index: 99; pointer-events: none;
  }
  #crosshair::before, #crosshair::after {
    content: ''; position: absolute; background: rgba(255,255,255,0.7);
  }
  #crosshair::before { width: 2px; height: 20px; left: 9px; top: 0; }
  #crosshair::after { width: 20px; height: 2px; top: 9px; left: 0; }
  #startScreen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 200; display: flex;
    flex-direction: column; align-items: center; justify-content: center; color: #fff;
  }
  #startScreen h1 { font-size: 48px; margin-bottom: 20px; color: #d4a853; }
  #startScreen p { font-size: 16px; margin-bottom: 30px; color: #ccc; }
  #startScreen button {
    padding: 14px 40px; font-size: 18px; background: #8B0000; color: #fff;
    border: 2px solid #d4a853; border-radius: 8px; cursor: pointer;
  }
  #startScreen button:hover { background: #a52a2a; }
  #minimap {
    position: absolute; bottom: 10px; right: 10px; width: 180px; height: 180px;
    background: rgba(0,0,0,0.6); border: 2px solid #d4a853; border-radius: 4px;
    z-index: 100;
  }
</style>
</head>
<body>

<div id="startScreen">
  <h1>🏠 北京四合院</h1>
  <p>三室一厅 · 精装内饰 · 第一人称漫游</p>
  <p>WASD移动 | 鼠标环顾 | 空格上升 | Shift下降</p>
  <button onclick="startGame()">点击进入</button>
</div>

<div id="info">WASD 移动 · 鼠标环顾 · 空格上升 · ESC 释放鼠标</div>
<div id="crosshair"></div>
<canvas id="minimap"></canvas>

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

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

// ============ GLOBALS ============
let camera, scene, renderer;
let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
let moveUp = false, moveDown = false;
let yaw = 0, pitch = 0;
let isLocked = false;
const velocity = new THREE.Vector3();
const direction = new THREE.Vector3();
const clock = new THREE.Clock();

// Courtyard dimensions
const YARD_W = 28, YARD_D = 32;
const WALL_H = 4, WALL_T = 0.5;
const ROOM_H = 3.5;
const FLOOR_Y = 0.01;



function init() {
  // Renderer
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 1.0;
  document.body.appendChild(renderer.domElement);

  // Scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x87CEEB);
  scene.fog = new THREE.Fog(0x87CEEB, 80, 200);

  // Camera
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 500);
  camera.position.set(0, 1.7, YARD_D / 2 + 5);
  camera.rotation.order = 'YXZ';

  // Lights
  setupLights();

  // Sky
  createSky();

  // Build the siheyuan
  buildGround();
  buildCourtyard();
  buildGate();
  buildMainHall();    // 正房 (厅)
  buildEastRoom();    // 东厢房 (室1)
  buildWestRoom();    // 西厢房 (室2)
  buildSouthRoom();   // 南房 (室3)
  buildYardDecor();

  // Controls
  setupControls();

  window.addEventListener('resize', onResize);
}

// ============ LIGHTS ============
function setupLights() {
  const amb = new THREE.AmbientLight(0xfff5e6, 0.5);
  scene.add(amb);

  const sun = new THREE.DirectionalLight(0xfff8e7, 1.8);
  sun.position.set(15, 25, 10);
  sun.castShadow = true;
  sun.shadow.mapSize.set(2048, 2048);
  sun.shadow.camera.left = -30; sun.shadow.camera.right = 30;
  sun.shadow.camera.top = 30; sun.shad.........完整代码请登录后点击上方下载按钮下载查看