three实现三维机器人马拉松跑步动画代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维机器人马拉松跑步动画代码

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

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style>
  :root {
    --cyan: #00f0ff;
    --violet: #a600ff;
    --magenta: #ff007c;
    --amber: #ff7c00;
    --text: rgba(226, 248, 255, 0.9);
    --panel: rgba(2, 6, 15, 0.7);
    --border: rgba(0, 240, 255, 0.25);
  }

  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #010206;
    color: white;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  }

  #container {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    cursor: grab;
    background:
      radial-gradient(circle at 50% 40%, rgba(10, 30, 60, 0.35), transparent 45%),
      radial-gradient(circle at 50% 110%, rgba(166, 0, 255, 0.15), transparent 50%),
      #010206;
  }

  #container:active { cursor: grabbing; }
  canvas { display: block; }

  #loading {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    background:
      radial-gradient(circle at 50% 50%, rgba(5, 15, 35, 0.95), #010206 70%),
      #010206;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), visibility 800ms;
    pointer-events: none;
  }

  #loading.hidden {
    opacity: 0;
    visibility: hidden;
  }

  .loader-card {
    min-width: 320px;
    padding: 30px 32px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(1, 4, 12, 0.85);
    box-shadow:
      0 0 50px rgba(0, 240, 255, 0.15),
      inset 0 1px 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(24px);
    text-align: center;
  }

  .loader-title {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.35em;
    color: #00f0ff;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
  }

  .loader-line {
    position: relative;
    overflow: hidden;
    height: 3px;
    border-radius: 999px;
    background: rgba(0, 240, 255, 0.08);
    margin-bottom: 16px;
  }

  .loader-line span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 15%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, #00f0ff, transparent);
    box-shadow: 0 0 12px #00f0ff;
    animation: loaderSweep 1.5s ease-in-out infinite;
  }

  #loading-progress {
    font-size: 11px;
    font-family: monospace;
    letter-spacing: 0.18em;
    color: rgba(0, 240, 255, 0.75);
  }

  .action-container {
    position: fixed;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: auto;
  }

  .cyber-btn {
    position: relative;
    background: rgba(1, 4, 15, 0.8);
    border: 1px solid rgba(0, 240, 255, 0.3);
    padding: 14px 32px;
    border-radius: 40px;
    color: #00f0ff;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: 0.25em;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(16px);
    transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 
      0 10px 30px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .cyber-btn:hover {
    background: rgba(0, 240, 255, 0.12);
    border-color: #00f0ff;
    color: #ffffff;
    box-shadow: 
      0 0 30px rgba(0, 240, 255, 0.25),
      inset 0 0 10px rgba(0, 240, 255, 0.2);
    transform: translateY(-2px);
  }

  .cyber-btn:active {
    transform: translateY(1px);
  }

  .status-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00f0ff;
    box-shadow: 0 0 10px #00f0ff;
    animation: modeIndicatorPulse 1s ease-in-out infinite alternate;
  }

  .status-pulse.standing {
    background: #ff007c;
    box-shadow: 0 0 10px #ff007c;
  }

  @keyframes loaderSweep {
    0% { transform: translateX(-100%); width: 10%; }
    50% { width: 60%; }
    100% { transform: translateX(300%); width: 10%; }
  }

  @keyframes modeIndicatorPulse {
    from { transform: scale(0.85); opacity: 0.6; }
    to { transform: scale(1.15); opacity: 1; }
  }
</style>

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.174.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.174.0/examples/jsm/"
    }
  }
</script>

<div id="container"></div>

<div id="loading">
  <div class="loader-card">
    <p class="loader-title">Link Established</p>
    <div class="loader-line"><span></span></div>
    <div id="loading-progress">INITIALIZING QUANTUM ENGINES...</div>
  </div>
</div>

<div class="action-container">
  <button id="toggle-animation-btn" class="cyber-btn">
    <span id="btn-indicator" class="status-pulse"></span>
    <span id="btn-label">MODE: RUN ACTIVE</span>
  </button>
</div>

<script type="module">
  import * as THREE from "three";
  import { OrbitControls } from "three/addons/controls/OrbitControls.js";
  import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
  import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.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";

  function fract(x) { return x - Math.floor(x); }
  function vec2(x, y) { return { x, y }; }
  function dot2(a, b) { return a.x * b.x + a.y * b.y; }
  function hashCoords(x, y) {
    return fract(Math.sin(dot2(vec2(x, y), vec2(12.9898, 78.233))) * 43758.5453);
  }

  const container = document.getElementById("container");
  const loadingScreen = document.getElementById("loading");
  const loadingProgress = document.getElementById("loading-progress");
  const toggleBtn = document.getElementById("toggle-animation-btn");
  const btnIndicator = document.getElementById("btn-indicator");
  const btnLabel = document.getElementById("btn-label");

  const PALETTE = {
    background: 0x010206,
    obsidian: 0x03050c,
    deepIndigo: 0x080a1c,
    cyan: 0x00f0ff,
    violet: 0xa600ff,
    magenta: 0xff007c,
    amber: 0xff7c00,
    silver: 0xd2e1ec
  };

  const DEFAULT_CAMERA = new THREE.Vector3(0, 3.5, 14.2);
  const DEFAULT_TARGET = new THREE.Vector3(0, 1.2, -0.2);

  let scene, camera, renderer, controls, composer, bloomPass, finishingPass, clock, mixer;
  let robot, runningAction, standingAction, activeAction;
  let platformGroup, chamberGroup;
  let tvCanvas, tvContext, tvTexture, tvScreen, tvLight, tvGlowFrame;
  
  let techNormalMap, techRoughnessMap;

  const holoPanels = .........完整代码请登录后点击上方下载按钮下载查看