three实现三维古代城池场景代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维古代城池场景代码

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ancient Chinese City</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #000; overflow: hidden; }
  canvas { display: block; }
  #info {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.6); color: #fff; padding: 10px 24px;
    border-radius: 20px; font-family: Arial, sans-serif; font-size: 14px;
    pointer-events: none; border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
  }
  #loading {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; display: flex; flex-direction: column;
    align-items: center; justify-content: center; z-index: 999;
    color: #c8a96e; font-family: 'STSong', 'SimSun', serif; font-size: 24px;
  }
  #loading-bar-wrap {
    width: 300px; height: 6px; background: #333; border-radius: 3px; margin-top: 20px;
  }
  #loading-bar { height: 100%; background: #c8a96e; border-radius: 3px; width: 0%; transition: width 0.3s; }
</style>
</head>
<body>
<div id="loading">
  <div>古城加载中...</div>
  <div id="loading-bar-wrap"><div id="loading-bar"></div></div>
</div>
<div id="info">🖱 左键拖拽旋转 | 右键平移 | 滚轮缩放</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
<script>
// ─────────────────────────────────────────────
// SCENE SETUP
// ─────────────────────────────────────────────
const W = window.innerWidth, H = window.innerHeight;
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB);
scene.fog = new THREE.FogExp2(0xc9dff0, 0.001);

const camera = new THREE.PerspectiveCamera(50, W/H, 0.1, 2000);
camera.position.set(0, 120, 220);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(W, H);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.1;
document.body.appendChild(renderer.domElement);

// ─────────────────────────────────────────────
// LIGHTING
// ─────────────────────────────────────────────
const ambientLight = new THREE.AmbientLight(0xffeedd, 0.6);
scene.add(ambientLight);

const sunLight = new THREE.DirectionalLight(0xfff4e0, 2.0);
sunLight.position.set(120, 180, 80);
sunLight.castShadow = true;
sunLight.shadow.mapSize.set(4096, 4096);
sunLight.shadow.camera.near = 1;
sunLight.shadow.camera.far = 800;
sunLight.shadow.camera.left = -250;
sunLight.shadow.camera.right = 250;
sunLight.shadow.camera.top = 250;
sunLight.shadow.camera.bottom = -250;
sunLight.shadow.bias = -0.0003;
scene.add(sunLight);

const fillLight = new THREE.DirectionalLight(0xaaccff, 0.4);
fillLight.position.set(-80, 60, -80);
scene.add(fillLight);

const hemi = new THREE.HemisphereLight(0x88bbff, 0x44662a, 0.5);
scene.add(hemi);

// ─────────────────────────────────────────────
// MATERIALS (shared)
// ─────────────────────────────────────────────
const MAT = {
  ground:     new THREE.MeshLambertMaterial({ color: 0x8B7355 }),
  grass:      new THREE.MeshLambertMaterial({ color: 0x5a8a3c }),
  grassDark:  new THREE.MeshLambertMaterial({ color: 0x3d6b28 }),
  wall:       new THREE.MeshLambertMaterial({ color: 0xC8A876 }),
  wallDark:   new THREE.MeshLambertMaterial({ color: 0xb08040 }),
  wallBrick:  new THREE.MeshLambertMaterial({ color: 0xd4aa66 }),
  roofRed:    new THREE.MeshLambertMaterial({ color: 0x8B1A1A }),
  roofDark:   new THREE.MeshLambertMaterial({ color: 0x5c1111 }),
  roofGray:   new THREE.MeshLambertMaterial({ color: 0x555566 }),
  roofGrayL:  new THREE.MeshLambertMaterial({ color: 0x777788 }),
  wood:       new THREE.MeshLambertMaterial({ color: 0x6B4226 }),
  woodLight:  new THREE.MeshLambertMaterial({ color: 0x8B5E3C }),
  stone:      new THREE.MeshLambertMaterial({ color: 0x888878 }),
  stoneDark:  new THREE.MeshLambertMaterial({ color: 0x666655 }),
  road:       new THREE.MeshLambertMaterial({ color: 0xa09070 }),
  roadDark:   new THREE.MeshLambertMaterial({ color: 0x887060 }),
  water:      new THREE.MeshLambertMaterial({ color: 0x4488aa, transparent: true, opacity: 0.8 }),
  mountain:   new THREE.MeshLambertMaterial({ color: 0x5a6b4a }),
  mountainDk: new THREE.MeshLambertMaterial({ color: 0x3a4a2a }),
  snow:       new THREE.MeshLambertMaterial({ color: 0xeeeeff }),
  treeTrunk:  new THREE.MeshLambertMaterial({ color: 0x5C3A1E }),
  treeLeaf:   new THREE.MeshLambertMaterial({ color: 0x2d6e1e }),
  treeLeaf2:  new THREE.MeshLambertMaterial({ color: 0x1d5e0e }),
  pillarRed:  new THREE.MeshLambertMaterial({ color: 0xcc2200 }),
  gold:       new THREE.MeshLambertMaterial({ color: 0xFFD700 }),
  lantern:    new THREE.MeshBasicMaterial({ color: 0xff6600 }),
  window:     new THREE.MeshLambertMaterial({ color: 0xf5deb3, transparent: true, opacity: 0.6 }),
  door:       new THREE.MeshLambertMaterial({ color: 0x3B1A0A }),
  bridge:     new THREE.MeshLambertMaterial({ color: 0x9B7D5C }),
  moat:       new THREE.MeshLambertMaterial({ color: 0x336688, transparent: true, opacity: 0.85 }),
  rock:       new THREE.MeshLambertMaterial({ color: 0x888880 }),
  darkRoof:   new THREE.MeshLambertMaterial({ color: 0x333344 }),
};

// ─────────────────────────────────────────────
// HELPERS
// ─────────────────────────────────────────────
function box(w,h,d,mat,x,y,z,rx,ry,rz){
  const m=new THREE.Mesh(new THREE.BoxGeometry(w,h,d),mat);
  m.position.set(x,y,z);
  if(rx) m.rotation.x=rx;
  if(ry) m.rotation.y=.........完整代码请登录后点击上方下载按钮下载查看