three+tween实现三维彩色透明玻璃方块叠加旋转动画效果代码-html代码-BFW代码库

three+tween实现三维彩色透明玻璃方块叠加旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：three+tween实现三维彩色透明玻璃方块叠加旋转动画效果代码

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

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

<head>
  <meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tween.umd.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    body {
      margin: 0;
      overflow: hidden;
      background: #000;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    #collection-btn {
      position: fixed;
      bottom: 20px;
      left: 20px;
      padding: 15px 25px;
      font-family: 'Press Start 2P', cursive;
      font-size: clamp(10px, 2vw, 14px);
      color: #fff;
      background: linear-gradient(45deg, #ff00ff, #00ffff);
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transform-style: preserve-3d;
      transform: perspective(1000px) rotateX(10deg);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(255, 0, 255, 0.5),
        0 0 25px rgba(0, 255, 255, 0.5);
      transition: all 0.3s ease-in-out;
      text-decoration: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    #collection-btn:hover {
      transform: perspective(1000px) rotateX(5deg) translateY(-2px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 0, 255, 0.7),
        0 0 35px rgba(0, 255, 255, 0.7);
    }

    #credits {
      position: fixed;
      bottom: 20px;
      right: 20px;
      font-family: 'Press Start 2P', cursive;
      font-size: clamp(10px, 2vw, 14px);
      color: #fff;
      text-shadow: 0 0 10px #ff00ff,
        0 0 20px #00ffff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    #title {
      position: fixed;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Press Start 2P', cursive;
      font-size: 64px;
      color: #fff;
      text-shadow: 0 0 20px #ff00ff,
        0 0 40px #00ffff,
        0 0 60px #ffff00;
      z-index: 1000;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    @media (max-width: 768px) {
      #collection-btn {
        padding: 10px 15px;
      }

      #title {
        font-size: 32px;
      }
    }
  </style>
</head>

<body>
  <div id="title">TWISTING</div>

  <div id="credits">CODE by HL</div>
  <script>
    let scene, camera, renderer, corridor;
    const colors = [0xff00ff, 0x00ffff, 0xffff00, 0xff0066];

    function init() {
      scene = new THREE.Scene();
      scene.fog = new THREE.FogExp2(0x000000, 0.02);
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      renderer = new THREE.WebGLRenderer({
        antialias: true,
        powerPreference: "high-performance",
        precision: "highp"
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
      corridor = new THREE.Group();
      for (let i = 0; i < 30; i++) {
        const geometry = new THREE.BoxGeometry(10, 10, 1);
        const solidMaterial = new THREE.MeshPhongMaterial({
          color: colors[i % colors.length],
          transparent: true,
          opacity: 0.3,
          side: THRE.........完整代码请登录后点击上方下载按钮下载查看