three实现立体三维玻璃透明机械钟楼代码-html代码-BFW代码库

three实现立体三维玻璃透明机械钟楼代码

代码语言：html

所属分类：三维

代码描述：three实现立体三维玻璃透明机械钟楼代码

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Transparent Gothic Clocktower - Three.js</title>
  <style>
    html, body {
      margin: 0;
      height: 100%;
      overflow: hidden;
      background: radial-gradient(circle at 50% 30%, #1f2535 0%, #0d1018 60%, #05070c 100%);
      font-family: system-ui, sans-serif;
    }
    canvas { display: block; }
    .ui {
      position: fixed;
      top: 12px;
      left: 12px;
      color: #d8e0ff;
      background: rgba(10, 14, 24, 0.48);
      border: 1px solid rgba(180, 200, 255, 0.18);
      border-radius: 12px;
      padding: 10px 12px;
      backdrop-filter: blur(10px);
      font-size: 13px;
      line-height: 1.4;
      box-shadow: 0 8px 30px rgba(0,0,0,.35);
      user-select: none;
    }
    .ui b { color: #ffffff; }
    .ui .hint { opacity: .8; }
    .credits {
      position: fixed;
      right: 12px;
      bottom: 10px;
      color: rgba(220,230,255,.75);
      font-size: 12px;
      background: rgba(10, 14, 24, 0.35);
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(180,200,255,.14);
      backdrop-filter: blur(8px);
    }
  </style>
</head>
<body>
  <div class="ui">
    <div><b>Transparent Gothic Clocktower</b></div>
    <div class="hint">Drag to orbit · Wheel to zoom</div>
    <div class="hint">Live clock hands + animated internal gears</div>
  </div>
  <div class="credits">Single-file Three.js demo</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 .........完整代码请登录后点击上方下载按钮下载查看