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" />
<style>
    :root {
  --bg: #244775;
  --purple: #b665eb;
}

* {
  margin: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #e5e5c1;
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  background:
    radial-gradient(circle at 50% 38%, #4348CD 0%, var(--bg) 42%, #14185F 100%);
}
body {
  min-height: 100vh;
}
#scene {
  display: block;
  width: 100vw;
  height: 100vh;
  outline: none;
  touch-action: none;
}

.title {
  position: fixed;
  top: 20px;
  left: 20px;
  margin: 0;
  color: #ffffff88;
  z-index: 10;
}

.hud_bottom {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 20px;
  right: 20px;
  left: 20px;
  margin: 0;
  color: #ffffff88;
  z-index: 10;
  background-color: #44444488;
}
.hud_bottom {
  border: solid 1px #ffffff44;
  border-radius: 10px;
  padding: 10px;
}
.hud_bottom p {
  padding: 0;
  margin: 0;
  font-size: 14px;
}

button {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffffbb;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
button:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(93, 227, 209, 0.55);
}
button:active {
  transform: translateY(0) scale(0.98);
}
</style>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Electrolize&family=Orbitron:wght@400..900&display=swap" />
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.185.1/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.185.1/examples/jsm/"
        }
      }
    </script>
  </head>
  <body>
    <canvas id="scene"></canvas>
    <h1 class="title">3D Dancing Bugs</h1>
    <div class="hud_bottom">
      <div class="hud_bottom_left">
        <button id="rotateButton">Rotation: On</button>
      </div>
      <div class="hud_bottom_right">
        <p>Drag to rotate · wheel to zoom · right-drag to pan</p>
      </div>
    </div>
    <script type="module" >
        import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

(() => {
  "use strict";

  // Variables
  let autoRotate = true;
  
  // Setup
  const canvas = document.querySelector("#scene");
  const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true,
    alpha: true,
    powerPreference: "high-performance"
  });

  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.outputColorSpace = THREE.SRGBColorSpace;
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFShadowMap;

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