three实现炫酷三维粒子变形交互效果代码-html代码-BFW代码库

three实现炫酷三维粒子变形交互效果代码

代码语言：html

所属分类：粒子

代码描述：three实现炫酷三维粒子变形交互效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  position: fixed;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      #00050a 0%,
      #000a14 50%,
      #001020 100%
    );
  overflow: hidden;
}

.glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
      rgba(0, 100, 180, 0.02) 0%,
      rgba(30, 0, 100, 0.03) 50%,
      transparent 75%
    );
  mix-blend-mode: screen;
  opacity: 0.5;
}


#patternName {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-family: sans-serif;
  font-size: 16px;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.5s ease;
  text-align: center;
  background-color: rgba(0,0,0,0.4);
  padding: 8px 18px;
  border-radius: 25px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

#instructions {
  position: fixed;
  bottom: 15px;
  left: 15px;
  color: rgba(255, 255, 255, 0.7);
  font-family: sans-serif;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 5px 10px;
  border-radius: 3px;
  z-index: 100;
  pointer-events: none;
  line-height: 1.4;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div id="container"></div>
<div class="glow"></div>
<div id="patternName">Sphere</div>
<div id="instructions">Hover to interact<br>Click/Tap to change pattern</div>
<!-- partial -->
  <script type="module" >
      import * as THREE from "https://esm.sh/three";
import { EffectComposer } from "https://esm.sh/three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "https://esm.sh/three/examples/jsm/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "https://esm.sh/three/examples/jsm/postprocessing/UnrealBloomPass.js";
import { OutputPass } from "https://esm.sh/three/examples/jsm/postprocessing/OutputPass.js";

let scene, camera, renderer, particles, stars;
let composer;
let time = 0;
let currentPattern = 0;
let transitionProgress = 0;
let isTransitioning = false;
const screenMouse = new THREE.Vector2(10000, 10000);
const worldMouse = new THREE.Vector3();
const lastWorldMouse = new THREE.Vector3();

const particleCount = 25000;
const starCount = 6000;
const transitionSpeed = 0.015;
const patternNames = ["Cosmic Sphere", "Spiral Nebula", "Quantum Helix", "Stardust Grid", "Celestial Torus"];

function createSphere(i, count) { const t = i / count; const phi = Math.acos(2 * t - 1); const theta = 2 * Math.PI * (i / count) * Math.sqrt(count); return new THREE.Vector3( Math.sin(phi) * Math.cos(theta) * 30, Math.sin(phi) * Math.sin(theta) * 30, Math.cos(phi) * 30 ); }
function createSpiral(i, count) { const t = i / count; const numArms = 3; const armIndex = i % numArms; const angleOffset = (2 * Math.PI / numArms) * armIndex; const angle = Math.pow(t, 0.7) * 15 + angleOffset; const radius = t * 40; const height = Math.sin(t * Math.PI * 2) * 5; return new THREE.Vector3( Math.cos(angle) * radius, Math.sin(angle) * radius, height ); }
function createGrid(i, count) { const sideLength = Math.ceil(Math.cbrt(count)); const spacing = 60 / sideLength; const halfGrid = (sideLength - 1) * spacing / 2; const iz = Math.floor(i / (sideLength * sideLength)); const iy = Math.floor((i % (sideLength * sideLength)) / sideLength); const ix = i % sideLength; if (ix === Math.floor(sideLength/2) && iy === Math.floor(si.........完整代码请登录后点击上方下载按钮下载查看