Three.js入门教程3 - 创建粒子系统

本例使用的Three.js为r40版本，注意版本差异。

three, particle, 教程

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// @see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function( /* function */ callback, /* DOMElement */ element) {
            window.setTimeout(callback, 1000 / 60);
        };
})();
// set the scene size
var WIDTH = 680,
    HEIGHT = 500;

// set some camera attributes
var VIEW_ANGLE = 45,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 0.1,
    FAR = 10000;

// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');

// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.Camera(VIEW_ANGLE,
    ASPECT,
    NEAR,
    FAR);
var scene = new THREE.Scene();

// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;

// start the renderer - set the clear colour
// to a full black
renderer.setClearColor(new THREE.Color(0, 1));
renderer.setSize(WIDTH, HEIGHT);

// attach the render-supplied DOM element
$container.append(renderer.domElement);

// create the particle variables
var particleCount = 1800,
    particles = new THREE.Geometry(),
    pMaterial = new THREE.ParticleBasicMaterial({
        color: 0xFFFFFF,
        size: 20,
        map: THREE.ImageUtils.loadTexture(
            "/uploads/160601/particle.png"
        ),
        blending: THREE.AdditiveBlending,
        transparent: true
    });

// now create the individual particles
for (var p = 0; p < particleCount; p++) {

// create a particle with random
    // position values, -250 -> 250
    var pX = Math.random() * 500 - 250,
        pY = Math.random() * 500 - 250,
        pZ = Math.random() * 500 - 250,
        particle = new THREE.Vertex(
            new THREE.Vector3(pX, pY, pZ)
        );
    // create a velocity vector
    particle.velocity = new THREE.Vector3(
        0, // x
        -Math.random(), // y
        0); // z

// add it to the geometry
    particles.vertices.push(particle);
}

// create the particle system
var particleSystem = new THREE.ParticleSystem(
    particles,
    pMaterial);

particleSystem.sortParticles = true;

// add it to the scene
scene.addChild(particleSystem);

// animation loop
function update() {

// add some rotation to the system
    particleSystem.rotation.y += 0.01;

var pCount = particleCount;
    while (pCount--) {
        // get the particle
        var particle = particles.vertices[pCount];

// check if we need to reset
        if (particle.position.y < -200) {
            particle.position.y = 200;
            particle.velocity.y = 0;
        }

// update the velocity
        particle.velocity.y -= Math.random() * .1;

// and the position
        particle.position.addSelf(
            particle.velocity);
    }

// flag to the particle system that we've
    // changed its vertices. This is the
    // dirty little secret.
    particleSystem.geometry.__dirtyVertices = true;

renderer.render(scene, camera);

// set up the next call
    requestAnimFrame(update);
}
requestAnimFrame(update);

编译

CSS

HTML

本例使用的Three.js为r40版本，注意版本差异。

three, particle, 教程

编辑器支持Emmet

快捷键

本例使用的Three.js为r40版本，注意版本差异。

three, particle, 教程

Three.js入门教程 - 坐标系、立方体和阴影

使用Three.js创建的一组3D空间粒子爆炸特效及其在线教程

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：