Question

我正在尝试阅读i-remember-fr如何在页面上用粒子制作圈子。我所有的尝试都没有成果，我真的想知道它们是如何产生效果的！

任何人都可以帮助弄清楚他们正在使用哪些库，或者帮助获得接近其效果的动画？

这是我到目前为止所拥有的......

我尝试用THREE.js来做，但这是我第一次用THREE.js制作东西，所以很难。但我需要它进行优化 - 即使我的版本甚至没有很好地优化......

任何人都可以帮助我更接近他们的效果，并在那里获得更多的FPS吗？

这是我目前的代码：

Javascript引擎

var AMOUNTX = 2000;
var container;
var camera, scene, renderer;
var particles, particle, count = 0;
var mouseX = 0,
    mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();

function init() {
    container = document.createElement('div');
    container.setAttribute("id", "apparatus");
    document.body.appendChild(container);
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 350;
    camera.position.x = windowHalfX;
    camera.position.y = windowHalfY;
    scene = new THREE.Scene();
    particles = new Array();
    var PI2 = Math.PI * 2;
    var material = new THREE.SpriteCanvasMaterial({
        color: 0xffffff,
        program: function(context) {
            context.beginPath();
            context.arc(0, 0, 0.08, 0, PI2, true);
            context.fill()
        }
    });
    var i = 0;
    for (var ix = 0; ix < AMOUNTX; ix++) {
            particle = particles[i++] = new THREE.Sprite(material);

        particle.velocity = Math.floor((Math.random() * 3200) + 2500);

    particle.angle = (Math.PI * 2 / 0.2) * Math.floor((Math.random() * (windowHalfX * 2)*4) + 10);


    particle.distance = (Math.random() * 8 + 10) + (Math.random() * 8 + 10)+ (Math.random() * 8 + 10)+ (Math.random() * 8 + 10)+ (Math.random() * 10 + 12);

    particle.increase = Math.PI * 2 / 0.5;
    particle.position.z = particle.distance;
    particle.bx = Math.random() * 20 + 1;
    particle.by = Math.random() * 20 + 1;
          scene.add( particle );

    }
    renderer = new THREE.CanvasRenderer({ alpha: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
    window.addEventListener('resize', onWindowResize, false)
}

function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight)
}


function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    var i = 0;
    for (var ix = 0; ix < AMOUNTX; ix++) {
            particle = particles[i++];
            particle.position.x = particle.bx + particle.distance * Math.cos(particle.angle / particle.velocity) + windowHalfX;
        particle.position.y = particle.by + particle.distance * Math.sin(particle.angle / particle.velocity) + windowHalfY;
          particle.angle += particle.increase;
    }
    renderer.render(scene, camera);
    count += 0.1;
}

Answer 1

在他们的代码中挖掘，你可以找到他们使用的后处理效果列表，我肯定会考虑淡入淡出。搜索amd/postprocessing/EffectComposer。

以下是所有这些：EffectComposer，SavePass，MaskPass，RenderPass，ShaderPass，CopyShader，BlendShader，HorizontalTiltShiftShader，RGBShiftShader，VerticalTiltShiftShader。

听起来好像下一次阅读将会出现在EffectComposer及其各种效果上。

例如，你可以使用多层粒子，并使用MaskPasses来掩盖它们的一部分。看起来他们至少做到了这一点。

用什么库制作这个动画？（外部动画源代码）

1 个答案:

用什么库制作这个动画？ （外部动画源代码）

1 个答案:

用什么库制作这个动画？（外部动画源代码）