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>古代城池 - Three.js</title>
  <style>
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #dbe7f0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    canvas {
      display: block;
      position: fixed;
      inset: 0;
      cursor: grab;
    }
    canvas:active { cursor: grabbing; }

    #tip {
      position: fixed;
      left: 14px;
      top: 12px;
      z-index: 10;
      pointer-events: none;
      color: rgba(255,255,255,0.95);
      background: rgba(15, 18, 24, 0.42);
      border: 1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(10px);
      padding: 10px 14px;
      border-radius: 14px;
      font-size: 14px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    }

    #tip b {
      color: #fff7d8;
    }
  </style>
</head>
<body>
  <div id="tip">鼠标拖拽旋转，滚轮缩放 • <b>Three.js 古代城池</b></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 { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    // -------------------------------------------------
    // 基础场景
    // -------------------------------------------------
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xdbe7f0);
    scene.fog = new THREE.Fog(0xdbe7f0, 90, 245);

    const camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      600
    );
    camera.position.set(84, 62, 84);

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

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.target.set(0, 4, 0);
    controls.enableDamping = true;
    controls.dampingFactor = 0.06;
    controls.enablePan = false;
    controls.minDistance = 28;
    controls.maxDistance = 260;
    controls.minPolarAngle = 0.22;
    controls.maxPolarAngle = Math.PI * 0.49;
    controls.update();

    // -------------------------------------------------
    // 工具函数
    // -------------------------------------------------
    const rand = (a, b) => a + Math.random() * (b - a);
    const randInt = (a, b) => Math.floor(rand(a, b + 1));
    const choose = (arr) => arr[(Math.random() * arr.length) | 0];
    const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
    const smoothstep = (e0, e1, x) => {
      const t = clamp((x - e0) / (e1 - e0), 0, 1);
      return t * t * (3 - 2 * t);
    };
    const lerp = (a, b, t) => a + (b - a) * t;
    const fract = (x) => x - Ma.........完整代码请登录后点击上方下载按钮下载查看