three实现粒子避开鼠标交互动画效果代码
代码语言:html
所属分类:粒子
代码描述:three实现粒子避开鼠标交互动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Three.js Interactive Particle Field</title> <style> body { margin: 0; overflow: hidden; background-color: #000; } canvas { display: block; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script> <script> // --- 着色器代码 (GLSL) --- // 顶点着色器:在这里计算每个粒子的位置 const vertexShader = ` // Uniforms: 由 JavaScript 传入的变量 uniform float u_time; uniform vec2 u_mouse; uniform float u_repulsionRadius; uniform float u_repulsionStrength; uniform float u_noiseSpeed; uniform float u_noiseStrength; // Attributes: 每个顶点独有的数据 attribute vec3 a_initialPosition; // 储存粒子的初始位置 // GLSL 柏林噪音函数 (来自 aiyuntan) // 稍作修改以适应我们的需求 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; } vec3 fade(vec3 t) { return t*t*t*(t*(t*6.0-15.0)+10.0); } 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));.........完整代码请登录后点击上方下载按钮下载查看
网友评论0