Three.js 粒子上浮（浮升）动画

Three.js Particle Blown Up 演示THREE.FogExp2类的使用。

three, particle

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var camera, scene, renderer, particles, particle, material, particleCount, points, texture;
var xSpeed, ySpeed;
xSpeed = 0.0007;
ySpeed = 0.001;
var winWidth, winHeight;
winWidth = window.innerWidth;
winHeight = window.innerHeight;

init();
animate();

function init() {
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2('#333', 0.001);

camera = new THREE.PerspectiveCamera(75, winWidth / winHeight, 1, 1000);
    camera.position.z = 500;

// particle
    // transparent blending
    material = new THREE.PointsMaterial({
        color: 0xffffff,
        size: 3,
        transparent: true,
        blending: THREE.AdditiveBlending
    });

particleCount = 15000;
    particles = new THREE.Geometry();

for (var i = 0; i < particleCount; i++) {
        var px = Math.random() * 2000 - 500;
        var py = Math.random() * 2000 - 500;
        var pz = Math.random() * 2000 - 500;
        particle = new THREE.Vector3(px, py, pz);
        particle.velocity = new THREE.Vector3(0, Math.random(), 0);
        particles.vertices.push(particle);
    }

points = new THREE.Points(particles, material);
    points.sortParticles = true;
    scene.add(points);

renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(winWidth, winHeight);
    renderer.setClearColor('#333', 1);
    document.getElementById('canvas').appendChild(renderer.domElement);
}

function animate() {
    requestAnimationFrame(animate);

var i = particleCount;
    while (i--) {
        var particle = particles.vertices[i];
        // x
        if (particle.x > 1000) {
            particle.x = -1000;
            particle.velocity.x = Math.random();
        }
        particle.velocity.x += Math.random() * xSpeed;

// y
        if (particle.y > 1000) {
            particle.y = -1000;
            particle.velocity.y = Math.random();
        }
        particle.velocity.y += Math.random() * ySpeed;

particle.add(particle.velocity);
    }
    points.geometry.verticesNeedUpdate = true;

render();
}

function render() {
    camera.lookAt(scene.position);
    renderer.render(scene, camera);
}

编译

CSS

HTML

Three.js Particle Blown Up 演示THREE.FogExp2类的使用。

three, particle

编辑器支持Emmet

快捷键

Three.js Particle Blown Up 演示THREE.FogExp2类的使用。

three, particle

TweenMax.js+Three.js 超炫的雕塑粉末化（粒子化）消散动画

Three.js 粒子传输管道（可用来模拟流体粒子运动）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：