three做个three三维女孩雨夜马路打伞散步场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由minimax-m3.1-flash ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：three三维女孩雨夜马路打伞散步

下面为部分代码预览，完整代码请点击下载或在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, user-scalable=no" />
<title>雨夜 · 伞下 — Three.js × VRM</title>
<style>
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#04060a;
    color:#e6f0f8;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    -webkit-font-smoothing:antialiased;}
  #app{position:fixed;inset:0}
  canvas{display:block}
  .badge{position:fixed;top:15px;left:19px;z-index:12;font-size:10.5px;letter-spacing:.22em;
    opacity:.42;pointer-events:none;text-transform:uppercase}
  .hud{position:fixed;left:19px;bottom:17px;z-index:12;pointer-events:none;
    text-shadow:0 2px 10px rgba(0,0,0,.85)}
  .hud h1{margin:0 0 6px;font-size:15px;font-weight:600;letter-spacing:.2em;
    background:linear-gradient(90deg,#dff1ff,#8fd0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
  .hud p{margin:0;font-size:11.5px;line-height:1.85;opacity:.55}
  .hud b{opacity:.95;font-weight:500}
  .kbd{display:inline-block;min-width:16px;padding:1px 5px;border:1px solid rgba(255,255,255,.2);
    border-radius:4px;font-size:10px;margin:0 3px;opacity:.9;letter-spacing:.04em}
  #loader{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:20px;background:radial-gradient(ellipse at 50% 62%,#0a1120 0%,#04060a 72%);
    transition:opacity .9s ease}
  #loader.hide{opacity:0;pointer-events:none}
  .lbar{width:min(300px,62vw);height:2px;background:rgba(255,255,255,.09);overflow:hidden;border-radius:2px}
  .lbar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#2f8fd8,#a9e7ff);
    box-shadow:0 0 14px #4fc3ff;transition:width .3s ease}
  .ltext{font-size:11.5px;letter-spacing:.16em;opacity:.62;font-variant-numeric:tabular-nums}
  #err{display:none;color:#ff9a9a;font-size:12px;max-width:min(620px,86vw);text-align:center;line-height:1.9}
  #err code{color:#bfe6ff;background:rgba(120,200,255,.1);padding:1px 5px;border-radius:3px}
  .lil-gui{--background-color:rgba(9,13,19,.86);--widget-color:rgba(120,170,210,.16);
    --text-color:#cfe2f2;--title-background-color:rgba(16,24,34,.92);--title-text-color:#9fd2f5;
    --font-size:11px;backdrop-filter:blur(8px)}
  .lil-gui .title{letter-spacing:.08em}
</style>
</head>
<body>
<div id="app"></div>
<div class="badge">three.js · vrm · realtime rain</div>
<div class="hud">
  <h1>雨夜 · 伞下</h1>
  <p>
    拖入 <b>.vrm</b> 文件即可换成你自己的角色<br>
    <span class="kbd">W A S D</span>行走 <span class="kbd">拖拽</span>转视角 <span class="kbd">滚轮</span>缩放<br>
    <span class="kbd">C</span>镜头预设 <span class="kbd">F</span>转身 <span class="kbd">R</span>复位 <span class="kbd">H</span>隐藏界面
  </p>
</div>

<div id="loader">
  <div class="ltext" id="lt">正在初始化渲染器…</div>
  <div class="lbar"><i id="lb"></i></div>
  <div id="err"></div>
</div>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/",
    "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3.5.5/lib/three-vrm.module.js"
  }
}
</script>

<script type="module">
import * as THREE from 'three';
import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { Reflector } from 'three/addons/objects/Reflector.js';
import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import GUI from 'three/addons/libs/lil-gui.module.min.js';

/* ==========================================================================
   0. 全局配置
   ========================================================================== */
const P = {
  rain:        1.00,
  wind:        0.55,
  reflect:     1.00,
  puddle:      0.62,
  bloom:       0.72,
  lensRain:    0.40,
  grain:       0.55,
  speed:       1.15,
  exposure:    1.06,
  camMode:     0,
  flip:        0,
};

const ROAD_LEN = 460;
const ROAD_W   = 9.0;
const PERIOD   = 32;
const GIRL_Z   = -1.35;
const LANE_Z   =  1.9;
const STRAFE_MAX = 4.5;   // 角色左右横移的 z 范围 ±

/* ==========================================================================
   1. 加载 UI
   ========================================================================== */
const lb = document.getElementById('lb');
const lt = document.getElementById('lt');
const loaderEl = document.getElementById('loader');
const errEl = document.getElementById('err');
const setProg = (p, t) => { lb.style.width = (p * 100).toFixed(1) + '%'; if (t) lt.textContent = t; };
const hideLoader = () => loaderEl.classList.add('hide');
function fatal(html) {
  errEl.style.display = 'block';
  errEl.innerHTML = html;
  lt.textContent = '⚠ 加载失败';
}
window.addEventListener('error', e => {
  if (!loaderEl.classList.contains('hide') && errEl.style.display !== 'block') {
    fatal('运行错误：<code>' + (e.message || e) + '</code><br>通常是网络无法访问 jsdelivr，请检查代理或换用本地 VRM。');
  }
});

/* ==========================================================================
   2. 渲染器 / 场景 / 相机
   =======================================================================.........完整代码请登录后点击上方下载按钮下载查看