three实现三维量子空间虚空共振交互动画代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维量子空间虚空共振交互动画代码，按不同的键切换不同的弦，鼠标移动可交互。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#000308;overflow:hidden;font-family:'Georgia','Times New Roman',serif}
canvas{display:block;position:fixed;inset:0;cursor:crosshair;touch-action:none}
/* Vignette spatiale — teinte bleue profonde */
#vignette{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at center,
    transparent 38%,
    rgba(0,1,6,.30) 62%,
    rgba(0,1,6,.72) 82%,
    rgba(0,1,6,.92) 100%);
}

/* ── Intro modal ───────────────────────────────────────────── */
#start{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,1,4,.95);
  transition:opacity 1.2s ease;
}
#start.hide{opacity:0;pointer-events:none}
.si{text-align:center;color:#c8e8ff;max-width:520px;padding:24px}
.si-kanji{font-size:clamp(52px,10vw,96px);letter-spacing:.06em;line-height:1;margin-bottom:.3em;opacity:.85}
.si-title{font-size:clamp(18px,3vw,28px);letter-spacing:.35em;text-transform:uppercase;margin-bottom:.6em}
.si-hr{width:60px;height:1px;background:rgba(200,232,255,.30);margin:0 auto .8em}
.si-sub{font-size:clamp(10px,1.4vw,13px);letter-spacing:.22em;text-transform:uppercase;opacity:.48;line-height:1.9}
.si-btn{
  margin-top:2em;background:transparent;
  border:1px solid rgba(200,232,255,.28);color:#c8e8ff;
  font-family:inherit;font-size:clamp(10px,1.4vw,13px);
  letter-spacing:.30em;text-transform:uppercase;
  padding:13px 38px;cursor:pointer;
  transition:all .35s;
}
.si-btn:hover{background:rgba(200,232,255,.07);border-color:rgba(200,232,255,.68);color:#fff}

/* ── Chord keys overlay — 2 rangées de 6 ──────────────────── */
#keys{
  position:fixed;bottom:1.6em;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:.40em;z-index:20;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease .4s;
}
#keys.show{opacity:1}
.keys-row{ display:flex; gap:.45em; }
.key{
  width:40px;height:52px;
  border:1px solid rgba(0,220,255,.22);
  border-radius:4px;
  background:rgba(0,8,20,.42);
  backdrop-filter:blur(6px);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:3px;
}
.key-letter{
  font-family:'Georgia',serif;
  font-size:12px;color:rgba(150,220,255,.80);
  letter-spacing:.05em;
}
.key-chord{
  font-size:8px;color:rgba(150,220,255,.38);
  letter-spacing:.08em;text-transform:uppercase;
}
.key.active{
  background:rgba(0,180,255,.18);
  border-color:rgba(0,220,255,.55);
}
.key.active .key-letter{color:#fff}
</style>


  
</head>

<body translate="no">
  <canvas id="c"></canvas>


<div id="vignette"></div>
<div id="start">
  <div class="si">
    <div class="si-kanji">&#34394;</div>
    <div class="si-title">ÉTHER</div>
    <div class="si-hr"></div>
    <p class="si-sub">
    量子虚空中的共振 移动鼠标以激发细丝<br>
      Q &nbsp;W &nbsp;E &nbsp;R &nbsp;T &nbsp;Y &nbsp;/ &nbsp;A &nbsp;S &nbsp;D &nbsp;F &nbsp;G &nbsp;H &nbsp;for chords
    </p>
    <button class="si-btn" id="startBtn">Enter</button>
  </div>
</div>

<!-- Chord keys overlay -->
<div id="keys"></div>

<script src="https://cdn.chiptune-synth.8binami.com/3.1.0/chiptune-synth.min.js"></script>
<script src="https://cdn.chiptune-synth.8binami.com/3.1.0/chiptune-sound-font.min.js"></script>

<script type="importmap">
{
  "imports": {
    "three":         "https://unpkg.com/three@0.183.0/build/three.webgpu.js",
    "three/webgpu":  "https://unpkg.com/three@0.183.0/build/three.webgpu.js",
    "three/tsl":     "https://unpkg.com/three@0.183.0/build/three.tsl.js",
    "three/addons/": "https://unpkg.com/three@0.183.0/examples/jsm/"
  }
}
</script>
  <script src='https://cdn.chiptune-synth.8binami.com/3.1.0/chiptune-synth.min.js'></script>
<script src='https://cdn.chiptune-synth.8binami.com/3.1.0/chiptune-sound-font.min.js'></script>
    <script  type="module">
import * as THREE from "https://esm.sh/three/webgpu";
import {
  Fn, uniform, storage, instanceIndex,
  vec3, vec4, cos, sin, min, max, select,
  float, floor, positionLocal,
  pass, output, Loop, exp, pow, sqrt
} from "https://esm.sh/three/tsl";
import { bloom } from &qu.........完整代码请登录后点击上方下载按钮下载查看