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, maximum-scale=1" />
<title>蓝花楹街角 · Jacaranda Corner</title>
<style>
  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    background: #f2efe9;
    font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  #app { position: fixed; inset: 0; }
  #app canvas { display: block; }

  .hud {
    position: fixed;
    pointer-events: none;
    user-select: none;
    z-index: 10;
  }

  .title {
    top: 34px; left: 40px;
    color: #4a4358;
    letter-spacing: 0.02em;
  }
  .title h1 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.82;
  }
  .title p {
    margin: 7px 0 0;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    opacity: 0.48;
    font-weight: 400;
  }

  .hint {
    left: 40px; bottom: 34px;
    font-size: 11px;
    letter-spacing: 0.13em;
    color: #4a4358;
    opacity: 0.4;
  }

  .switcher {
    right: 40px; bottom: 30px;
    pointer-events: auto;
    display: flex;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 6px 26px rgba(70, 60, 90, 0.13), inset 0 0 0 1px rgba(255,255,255,0.6);
  }
  .switcher button {
    appearance: none;
    border: 0;
    background: transparent;
    color: #5b5470;
    font-family: inherit;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    padding: 9px 19px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  }
  .switcher button:hover { background: rgba(255,255,255,0.55); }
  .switcher button.active {
    background: #6d5aa8;
    color: #fff;
    box-shadow: 0 4px 14px rgba(109, 90, 168, 0.38);
  }

  .vignette {
    position: fixed; inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 52%, rgba(90, 80, 110, 0.07) 100%);
    z-index: 5;
  }

  @media (max-width: 720px) {
    .title { top: 22px; left: 22px; }
    .hint { left: 22px; bottom: 100px; font-size: 10px; }
    .switcher { right: 50%; transform: translateX(50%); bottom: 22px; }
    .switcher button { padding: 8px 15px; font-size: 11.5px; }
  }
</style>
</head>
<body>

<div id="app"></div>
<div class="vignette"></div>

<div class="hud title">
  <h1>Jacaranda Corner</h1>
  <p>蓝花楹街角 · 悉尼</p>
</div>

<div class="hud hint">拖拽旋转 · 滚轮缩放</div>

<div class="hud switcher">
  <button data-time="day" class="active">白昼</button>
  <button data-time="dusk">黄昏</button>
  <button data-time="night">夜晚</button>
</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';
import { R.........完整代码请登录后点击上方下载按钮下载查看