Three.js 粒子彩虹桥

彩虹粒子旋转而构成的雨后彩虹图案。

three, bridge

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var renderer, scene, camera;

var ww = window.innerWidth,
    wh = window.innerHeight,
    particles = new THREE.Object3D(),
    amountParticles = 0,
    maxParticles = 1000;

var createParticle = function() {
    var randomPosition = Math.random();
    var geometry = new THREE.Geometry();
    var material = new THREE.PointsMaterial({
        size: 2,
        color: new THREE.Color("hsl(" + (1 - randomPosition) + ", 50%, 50%)"),
        sizeAttenuation: true
    });
    var vertex = new THREE.Vector3();
    vertex.x = 0;
    vertex.y = 0;
    vertex.z = Math.random() * 5;

vertex.speed = Math.random() / 100 + 0.01;

geometry.vertices.push(vertex);
    var particle = new THREE.Points(geometry, material);
    particle.applyMatrix(new THREE.Matrix4().makeTranslation(-30 - randomPosition * 50, 0, 0));

particles.add(particle);
    amountParticles++;
};

var init = function() {
    THREE.ImageUtils.crossOrigin = '';
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    document.body.appendChild(renderer.domElement);
    renderer.setSize(ww, wh);
    renderer.setClearColor(0x00010D);

scene = new THREE.Scene();
    scene.add(particles);

camera = new THREE.PerspectiveCamera(45, ww / wh, 1, 1000);
    camera.position.set(0, 50, 200);
    scene.add(camera);

requestAnimationFrame(render);

window.addEventListener('resize', onResize, false);
};
var onResize = function() {
    ww = window.innerWidth;
    wh = window.innerHeight;
    renderer.setSize(ww, wh);
    camera.aspect = ww / wh;
    camera.updateProjectionMatrix();
};

var render = function(a) {

requestAnimationFrame(render);

for (var i = 0; i < 4; i++) {
        createParticle();
    }

for (var i = 0; i < amountParticles; i++) {
        var particle = particles.children[i];
        if (particle.rotation.z < 0.001) {
            particle.applyMatrix(new THREE.Matrix4().makeRotationZ(-0.011));
        } else {
            particles.remove(particle);
            i--;
            amountParticles--;
        }
    }

renderer.render(scene, camera);
};

init();

编译

CSS

HTML

彩虹粒子旋转而构成的雨后彩虹图案。

three, bridge

编辑器支持Emmet

快捷键

彩虹粒子旋转而构成的雨后彩虹图案。

three, bridge

Three.js 彩虹粒子环

Three.js WebGL 彩虹粒子组成的球体

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：