three实现三维粒子流旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维粒子流旋转动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
</head>

<body translate="no">
  <div id="scene-container"></div>

<style>
  #scene-container {
    width: 100%;
    height: 100vh;
  }

  body {
    margin: 0;
    overflow: hidden;
    background-color: #000;
  }
</style>

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
      "three/addons/controls/OrbitControls": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/controls/OrbitControls.js",
      "three/addons/postprocessing/EffectComposer": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/postprocessing/EffectComposer.js",
      "three/addons/postprocessing/RenderPass": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/postprocessing/RenderPass.js",
      "three/addons/postprocessing/ShaderPass": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/postprocessing/ShaderPass.js",
      "three/addons/postprocessing/UnrealBloomPass": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/postprocessing/UnrealBloomPass.js",
      "three/addons/postprocessing/OutputPass": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/postprocessing/OutputPass.js"
    }
  }
</script>

<script type="module">
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons/controls/OrbitControls';
  import { EffectComposer } from 'three/addons/postprocessing/EffectComposer';
  import { RenderPass } from 'three/addons/postprocessing/RenderPass';
  import { ShaderPass } from 'three/addons/postprocessing/ShaderPass';
  import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass';
  import { OutputPass } from 'three/addons/postprocessing/OutputPass';

  let scene, camera, renderer, controls, clock, composer;
  let prismCore, energyVeins, crystalShards, particleField, pointLight, rayParticles;
  let mouse = new THREE.Vector2(0, 0);
  let targetRotation = new THREE.Vector2(0, 0);
  let rayParticleCount = 1000;
  let colorScheme = {
    primary: new THREE.Color(0x12A4D9),
    secondary: new THREE.Color(0xD9138A),
    accent: new THREE.Color(0xE2D810),
    dark: new THREE.Color(0x322E2F)
  };

  init();
  animate();

  function init() {
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x000000, 0.035);
    
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 1.8, 4.0);
    
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1.5;
    document.getElementById('scene-container').appendChild(renderer.domElement);
    
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.autoRotate = true;
    controls.autoRotateSpeed = 0.5;
    controls.minDistance = 1.8;
    controls.maxDistance = 6.5;
    controls.enablePan = false;
    
    clock = new THREE.Clock();
    
    scene.add(new THREE.AmbientLight(0x302050, 0.8));
    const hemisphereLight = new THREE.HemisphereLight(0x606090, 0x080820, 0.5);
    scene.add(hemisphereLight);
    pointLight = new THREE.PointLight(0xffa0e0, 2.5, 10);
    pointLight.position.set(1.5, 1.5, 1.5);
    scene.add(pointLight);
    const pointLight2 = new THREE.PointLight(0x80c0ff, 1.8, 8);
    pointLight2.position.set(-2, -1, 1);
    scene.add(pointLight2);
    
    const prismGeometry = new THREE.BoxGeometry(1, 3, 1, 8, 16, 8);
    const prismVertexShader = `
      varying vec2 vUv;
      varying vec3 vNormal;
      varying vec3 vPosition;
      uniform float time;
      uniform vec2 mouseInfluence;

      vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
      vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
      vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
      vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
      float snoise(vec3 v) {
        const vec2 C = vec2(1.0/6.0, 1.0/3.0);
        const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
        vec3 i  = floor(v + dot(v, C.yyy));
        vec3 x0 = v - i + dot(i, C.xxx);
        vec3 g = step(x0.yzx, x0.xyz);
        vec3 l = 1.0 - g;
        vec3 i1 = min(g.xyz, l.zxy);
        vec3 i2 = max(g.xyz, l.zxy);
        vec3 x1 = x0 - i1 + C.xxx;
        vec3 x2 = x0 - i2 + C.yyy;
    .........完整代码请登录后点击上方下载按钮下载查看