代码语言：html

所属分类：其他

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

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

代码标签： three 三维 女孩 雨夜 马路 打伞 散步 场景 代码

下面为部分代码预览，完整代码请点击下载或在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>雨夜 · 撑伞行走的 VRM 女孩</title>
<style>
  html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #05070d; }
  canvas { display: block; }
  #hud {
    position: fixed; left: 18px; bottom: 16px; z-index: 5;
    color: #93aac8; font: 13px/1.7 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: 1.5px; opacity: .72; pointer-events: none;
    text-shadow: 0 0 10px #000, 0 0 20px #000;
  }
  #hud b { color: #b9d6ff; font-weight: 600; }
  #loading {
    position: fixed; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
    background: radial-gradient(circle at 50% 45%, #0d1626 0%, #05070d 70%);
    color: #8fa8c8; font: 14px/1.8 -apple-system, "PingFang SC", sans-serif;
    letter-spacing: 3px; transition: opacity .9s ease;
  }
  #loading.hide { opacity: 0; pointer-events: none; }
  .bar { width: 180px; height: 2px; background: #16202f; overflow: hidden; border-radius: 2px; }
  .bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #4a7ec8, #9fd0ff); transition: width .3s; }
</style>
</head>
<body>

<div id="loading">
  <div>LOADING · 雨夜街区</div>
  <div class="bar"><i id="progressBar"></i></div>
</div>

<div id="hud">
  ☂ 雨夜 · 城市街道<br>
  <b>左键拖拽</b> 旋转视角 &nbsp;·&nbsp; <b>滚轮 / 双指</b> 缩放
</div>

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

<script type="module">
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { Reflector } from 'three/addons/objects/Reflector.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm�.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论