three实现文字粒子悬浮避让webgl交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：three实现文字粒子悬浮避让webgl交互效果代码

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

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

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  overflow: hidden;
  background-color: #150a25;
}

.webgl {
  position: fixed;
  top: 0;
  left: 0;
  outline: none;
}
</style>



</head>

<bod>
  <canvas class="webgl"></canvas>

  
      <script  type="module">
import * as THREE from "//repo.bfw.wiki/bfwrepo/js/module/three/build/three.module.js";

const vertexShader = `
uniform sampler2D uTexture;
uniform vec2 uTextureSize;
uniform float uTime;
uniform vec2 uMouse;
attribute vec2 offset;
attribute float angle;
attribute float pindex;
varying vec2 vUv;
varying vec2 vPUv;

vec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec2 mod289(vec2 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec3 permute(vec3 x) {
  return mod289(((x*34.0)+1.0)*x);
}

float snoise2(vec2 v)
  {
  const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
                      0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
                     -0.577350269189626,  // -1.0 + 2.0 * C.x
                      0.024390243902439); // 1.0 / 41.0
// First corner
  vec2 i  = floor(v + dot(v, C.yy) );
  vec2 x0 = v -   i + dot(i, C.xx);

// Other corners
  vec2 i1;
  //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
  //i1.y = 1.0 - i1.x;
  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
  // x0 = x0 - 0.0 + 0.0 * C.xx ;
  // x1 = x0 - i1 + 1.0 * C.xx ;
  // x2 = x0 - 1.0 + 2.0 * C.xx ;
  vec4 x12 = x0.xyxy + C.xxzz;
  x12.xy -= i1;

// Permutations
  i = mod289(i); // Avoid truncation effects in permutation
  vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
    + i.x + vec3(0.0, i1.x, 1.0 ));

  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
  m = m*m ;
  m = m*m ;

// Gradients: 41 points uniformly over a line, mapped onto a diamond.
// The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)

  vec3 x = 2.0 * fract(p * C.www) - 1.0;
  vec3 h = abs(x) - 0.5;
  vec3 ox = floor(x + 0.5);
  vec3 a0 = x - ox;

// Normalise gradients implicitly by scaling m
// Approximation of: m *= inversesqrt( a0*a0 + h*h );
  m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );

// Compute final noise value at P
  vec3 g;
  g.x  = a0.x  * x0.x  + h.x  * x0.y;
  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
  return 130.0 * dot(m, g);
}

#define M_PI 3.1415926535897932384626433832795

float polarPhi(vec2 xy, vec2 center) {
  // https://www.mathsisfun.com/polar-cartesian-coordinates.html
  float result = atan((xy.y - center.y) / (xy.x - center.x));
  if (xy.x - center.x < 0.) {
    return result + M_PI; // II, III
  }
  if (xy.y - center.y < 0.) {
    return result + 2. * M_PI; // IV
  }
  return result; // I
}

float random(float n) {
	return fract(sin(n) * 43758.5453123);
}

void main() {
  float uDepth = 0.0;
  float uSize = 0.8;
  float uRandom = .05;
  vUv = uv;

	// particle uv
	vec2 puv = offset.xy / uTextureSize;
	vPUv = puv;

	// pixel color
	vec4 colA = texture2D(uTexture, puv);
	float grey = colA.r * 0.21 + colA.g * 0.71 + colA.b * 0.07;

	// displacement
	vec3 displaced = vec3(offset.xy, 0.0) + 0.2*random(pindex)+2.0*vec3(1.0*grey, 1.0*grey, 0.2*grey);
	// randomise
	displaced.xy +=  10.* vec2(random(pindex) - 0.5, random(offset.x + pindex) - 0.5) * uRandom;
	float rndz = 1.*(random(pindex) + snoise2(vec2(pindex * 0.1, uTime * 0.1)));
	// center
	displaced.xy -=  uTextureSize * 0.5 ;
	// touch
	float t = pow(1.0 - distance(uMouse, puv), 16.0);
	displaced.x += -t*200.*(uMouse.x - puv.x) + cos(angle) * t * 10.0 * rndz;
	displaced.y += -t*200.*(uMouse.y - puv.y) + sin(angle) * t * 10.0 * rndz; 

	// particle size
	float psize = 3.*snoise2(vec2(pindex, angle)) + (snoise2(vec2(uTime, pindex) * 0.5) + 2.0);
	psize *= max(grey, 0.2);
	psize *= uSize;

	// final position
	vec4 mvPosition = modelViewMatrix * vec4(displaced.xy, 0.0,  1.0);
	mvPosition.xyz += position * psize;
	vec4 finalPosition = projectionMatrix * mvPosition;
	gl_Position = finalPosition;
}
`;

const fragmentShader = `
uniform sampler2D uTexture;
uniform vec2 uMouse;
varying vec2 vUv;
varying vec2 vPUv;

void main() {
  vec2 puv = vPUv;
  vec2 uv = vUv;
  vec4 colA = texture2D(uTexture, puv);
  float border = 0.1;
	float radius = 0.4;
  float dist = radius - distance(uv, vec2(0.5));
	float t = smoothstep(0.0, border, dist);
  gl_FragColor = vec4(mix(vec3(colA.rgb), vec3(1.0, 0.0, 1.0), pow(1.0 - length(uMouse - puv), 14.)), t);
}
`;

class World {
  constructor({ canvas }) {
    this.scene = new THREE.Scene();
    this.clock = new THREE.Clock();
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.aspectRatio = this.width / this.height;
    this.perspective = 10;
    const fov =
    2 * (
    180 / Math.PI) *
    Math.atan(0.5 * 256 / Math.min(1, this.aspectRatio) / this.perspective);
    this.camera = new THREE.PerspectiveCamera(fov, this.aspectRatio, 0.1, 1000);
    this.camera.position.set(0, 0, this.perspective);
    this.scene.add(this.camera);
    this.renderer = new THREE.WebGLRenderer({
      canvas,
      alpha: true,
      antialias: true });

    this.pixelRatio = Math.min(window.devicePixelRatio, 2);
   .........完整代码请登录后点击上方下载按钮下载查看