three做个三维清明上河图场景体验交互代码-html代码-BFW代码库

three做个三维清明上河图场景体验交互代码

代码语言：html

所属分类：其他

代码由deepseek-4.1 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维清明上河图

下面为部分代码预览，完整代码请点击下载或在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>三维清明上河图 · 沙盘</title>
<style>
  html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #0b0e12; }
  canvas { display: block; }
  #title {
    position: fixed; left: 26px; top: 22px; z-index: 10; pointer-events: none;
    font-family: "Songti SC", "STSong", "SimSun", serif; color: #f2e9d6;
    text-shadow: 0 2px 14px rgba(0,0,0,.85);
  }
  #title h1 { margin: 0; font-size: 28px; letter-spacing: 10px; font-weight: 500; }
  #title p  { margin: 8px 0 0; font-size: 12px; letter-spacing: 5px; opacity: .6; }
  #hint {
    position: fixed; left: 26px; bottom: 20px; z-index: 10; pointer-events: none;
    font-family: sans-serif; font-size: 12px; letter-spacing: 2px;
    color: #ded4c0; opacity: .55;
  }
  #loading {
    position: fixed; inset: 0; z-index: 99; display: flex;
    align-items: center; justify-content: center;
    background: #0b0e12; color: #c9b896;
    font-family: "Songti SC", serif; letter-spacing: 12px; font-size: 15px;
    transition: opacity 1.1s ease;
  }
</style>
</head>
<body>

<div id="title">
  <h1>清明上河图</h1>
  <p>三 维 沙 盘 · 汴 河 虹 桥</p>
</div>
<div id="hint">左键拖拽旋转　·　滚轮缩放　·　右键平移</div>
<div id="loading">正 在 营 造</div>

<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';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

/* =========================================================
   1. 渲染器 / 场景 / 相机
   ========================================================= */
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.05;
renderer.outputColorSpace = THREE.SRGBColor.........完整代码请登录后点击上方下载按钮下载查看