three+webgl实现鼠标跟随光子流动画效果代码-html代码-BFW代码库

three+webgl实现鼠标跟随光子流动画效果代码

代码语言：html

所属分类：其他

代码描述：three+webgl实现鼠标跟随光子流动画效果代码

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

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

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

  
<style>
body {
  margin: 0;
  background: black;
}

.root {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  z-index: 2;
}
</style>

  
</head>

<body translate="no">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.2.js"></script>
<script type="importmap">
  {
    "imports": {      
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/150/three.module.js",
      "addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/150/jsm/"
    }
  }
</script>

<div class="root" id="root"></div>
  
      <script  type="module">
import * as THREE from 'three';

let scene;
let camera;
let renderer;

const root = document.querySelector('#root');

const init = () => {
  scene = new THREE.Scene();
  const width = window.innerWidth;
  const height = window.innerHeight;
  camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000);
  camera.position.z = 2;

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x000000, 1);
  root.appendChild(renderer.domElement);
};
init();

let bufferScene;
let textureA;
let textureB;
let bufferMaterial;
let plane;
let bufferObject;
let finalMaterial;
let quad;

const bufferTexture = () => {
  bufferScene = new THREE.Scene();
  textureA = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, samples: 8 });
  textureB = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, samples: 8 });
  bufferMaterial = new THREE.ShaderMaterial({
    uniforms: {
      uTexture: { value: textureA },
      uRes: { value: { x: window.innerWidth, y: window.innerHeight } },
      uMouse: { value: { x: window.innerWidth * .5, y: window.innerHeight * .5 } },
      uTime: { value: 0 },
      uCol: { value: 0 },
      uSpeed: { value: 0 } },

    fragmentShader: /* glsl */`
      float hue2rgb(float f1, float f2, float hue) {
        if (hue < 0.0)
          hue += 1.0;
        else if (hue > 1.0)
          hue -= 1.0;
        float res;
        if ((6.0 * hue) < 1.0)
          res = f1 + (f2 - f1) * 6.0 * hue;
        else if ((2.0 * hue) < 1.0)
          res = f2;
        else if ((3.0 * hue) < 2.0)
          res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
        else
          res = f1;
        return res;
      }

      vec3 hsl2rgb(vec3 hsl) {
        vec3 rgb;

        if (hsl.y == 0.0) {
          rgb = vec3(hsl.z); // Luminance
        } else {
          float f2;

          if (hsl.z < 0.5)
            f2 = hsl.z * (1.0 + hsl.y);
          else
            f2 = hsl.z + hsl.y - hsl.y * hsl.z;

          float f1 = 2.0 * hsl.z - f2;

          rgb.r = hue2rgb(f1, f2, hsl.x + (1.0/3.0));
          rgb.g =.........完整代码请登录后点击上方下载按钮下载查看