three实现三维客厅场景代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维客厅场景代码

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Three.js Living Room TV Cartoon</title>
  <style>
    html, body {
      margin: 0;
      height: 100%;
      overflow: hidden;
      background: #120f0d;
      font-family: system-ui, sans-serif;
    }

    #overlay {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      text-align: center;
      color: #fff5e9;
      background:
        radial-gradient(circle at center, rgba(32, 22, 18, 0.35), rgba(17, 12, 10, 0.75));
      z-index: 10;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }

    #overlay.hidden {
      opacity: 0;
    }

    .panel {
      padding: 18px 24px;
      border-radius: 16px;
      background: rgba(42, 30, 24, 0.45);
      border: 1px solid rgba(255, 236, 214, 0.18);
      backdrop-filter: blur(8px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    }

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

    .hint {
      font-size: 14px;
      opacity: 0.9;
    }
  </style>
</head>
<body>
  <div id="overlay">
    <div class="panel">
      <div class="title">Click to enter the living room</div>
      <div class="hint">W A S D to move · Mouse to look around · Esc to unlock</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(0x231a16);
    scene.fog = new THREE.Fog(0x231a16, 12, 28);

    const camera = new THREE.PerspectiveCamera(72, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(0, 1.65, 6.8);
    scene.add(camera);

    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.08;
    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 move = {
      forward: false,
      back: false,
      left: false,
      right: false
    };

    document.addEventListener("keydown", (event) => {
      switch (event.code) {
        case "KeyW": move.forward = true; break;
        case "KeyS": move.back = true; break;
        case "KeyA": move.left = true; break;
        case "KeyD": move.right = true; break;
      }
    });

    document.addEventListener("keyup", (event) => {
      switch (event.code) {
        case "KeyW": move.forward = false; break;
        case "KeyS": move.back = false; break;
        case "KeyA": move.left = false; break;
        case "KeyD": move.right = false; break;
      }
    });

    window.addEventListener("blur", () => {
      move.forward = move.back = move.left = move.right = false;
    });

    const obstacles = [];
    function addObstacle(minX, minY, minZ, maxX, maxY, maxZ) {
      obstacles.push(new THREE.Box3(
        new THREE.Vector3(minX, minY, minZ),
        new THREE.Vector3(maxX, maxY, maxZ)
      ));
    }

    function mesh(geometry, material) {
      const m = new THREE.Mesh(geometry, material);
      m.castShadow = true;
      m.receiveShadow = true;
      return m;
    }

    function box(w, h, d, color, roughness = 0.........完整代码请登录后点击上方下载按钮下载查看