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, particl.........完整代码请登录后点击上方下载按钮下载查看