HTML5 Three.js粒子群吸引力模拟动画

Particles Attraction Animation，移动鼠标，粒子被吸引向鼠标所在位置。

webgl, particle

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4129
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var ww = window.innerWidth,
    wh = window.innerHeight;

var renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector("canvas")
});
renderer.setClearColor(0x000000);
renderer.setSize(ww, wh);

var scene = new THREE.Scene();

var camera = new THREE.OrthographicCamera(ww / -2, ww / 2, wh / 2, wh / -2, 1, 1000);
camera.position.set(0, 0, 1);

// ===============
//WRAP WITH PARTICLES
// ===============
var wrapMatShader = new THREE.ShaderMaterial({
    uniforms: {
        mouse: {
            type: "vec2",
            value: new THREE.Vector2(0, 0)
        },
        mouse2: {
            type: "vec2",
            value: new THREE.Vector2(0, 0)
        },
        ww: {
            type: "float",
            value: ww
        },
        wh: {
            type: "float",
            value: wh
        },
        uTime: {
            type: "float",
            value: 0
        },
    },
    vertexShader: document.getElementById("wrapVertexShader").textContent,
    fragmentShader: document.getElementById("wrapFragmentShader").textContent,
    transparent: true
});

var options = {
    particlesQuantity: 500000
};
var bufferWrapGeom = new THREE.BufferGeometry();
var wrapGeom, positions;

function wrapSceneWithParticles() {
    wrapGeom = new THREE.Geometry();
    positions = new Float32Array(options.particlesQuantity * 3);
    for (var i = 0; i < options.particlesQuantity; i++) {
        var vector = new THREE.Vector3(0, 0, 0);
        vector.applyMatrix4(new THREE.Matrix4().makeTranslation((Math.random() - 0.5) * (ww * 1.2), (Math.random() - 0.5) * (wh * 1.2), Math.random() * -800));
        vector.vx = (Math.random() - 0.5) * 20;
        vector.vy = (Math.random() - 0.5) * 20;
        wrapGeom.vertices.push(vector);
        //Add to attributes
        vector.toArray(positions, i * 3);
        var speed = new THREE.Vector2(Math.random(), Math.random());
    }
    bufferWrapGeom.addAttribute('position', new THREE.BufferAttribute(positions, 3));
    wrap = new THREE.Points(bufferWrapGeom, wrapMatShader);
    scene.add(wrap);
}

wrapMatShader.uniforms.ww.value = ww;
    wrapMatShader.uniforms.wh.value = wh;
});

// ========  
//RENDER
// ========  
function render(a) {
    requestAnimationFrame(render);

wrapMatShader.uniforms.uTime.value = a;

renderer.render(scene, camera);
}

//Create the particles wrap
wrapSceneWithParticles();
requestAnimationFrame(render);

编译

CSS

HTML

<canvas></canvas>
<script type="x-shader/x-vertex" id="wrapVertexShader">
  uniform float uTime;
  uniform vec2 mouse;
  uniform vec2 mouse2;
  varying vec3 vPosition;
  varying float dist;
uniform float ww;
uniform float wh;
  void main() {
  	vPosition = position;
    vec3 position = position;
    position.z += cos(uTime * 0.001 + cos(position.x/ww * 0.5) + sin(position.y/wh * 0.5)) * 200.0;
    float dist1 = distance(vec3(mouse, 1.0), position);
    float dist2 = distance(vec3(mouse2, 1.0), position);
    vec2 endMouse = mouse;
    if(mouse2.x != 0.0 && mouse2.y != 0.0 && dist2 < dist1){
    	dist = dist2;
    	endMouse = mouse2;
    }
    else{
    	dist = dist1;
    }
    position.x += (endMouse.x - position.x) * (1.0-dist/700.0);
    position.y += (endMouse.y - position.y) * (1.0-dist/700.0);
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_PointSize = 1.0;
    gl_Position = projectionMatrix * mvPosition;
  }
</script>
<script type="x-shader/x-fragment" id="wrapFragmentShader">
varying vec3 vPosition;
varying float dist;
uniform float ww;
uniform float wh;
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 = hue2rgb(f1, f2, hsl.x);
        rgb.b = hue2rgb(f1, f2, hsl.x - (1.0/3.0));
    }   
    return rgb;
}
vec3 hsl2rgb(float h, float s, float l) {
    return hsl2rgb(vec3(h, s, l));
}
void main(){
		float index = (abs(vPosition.x * 0.5) + abs(vPosition.y * 0.5) + abs(vPosition.z * 0.5)) / ((ww+wh+800.0) * 0.25);
    vec4 color = vec4(hsl2rgb(index, 0.5, 0.5), 1.0);
    gl_FragColor = color;
  }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>

Particles Attraction Animation，移动鼠标，粒子被吸引向鼠标所在位置。

webgl, particle

编辑器支持Emmet

快捷键

Particles Attraction Animation，移动鼠标，粒子被吸引向鼠标所在位置。

webgl, particle

HTML5 Three.js引力场（3D空间漩涡）动画

HTML5 Three.js柔性卷曲引力（重力）波动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：