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

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

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