Создание хвоста у частицы!

219
14 июня 2018, 00:40

Подскажите, как создать хвост для частиц длинной от 4 до 10 (скорее всего предыдущих состояний, но можно и просто хвост)?

Использую three.proton.js для создания частиц, но нужен хвостик, а как его создать не понимаю... пробовал через изменение основного скрипта протон, но ничего не вышло. Сама программка простая, частицы притягиваются к цилиндру используя аттрактор (видно на изображении), но надо чтобы был след от частиц 

 <!DOCTYPE HTML>
 <html>
 <head>
<title>three.proton - helloworld</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
body {
    font-family: Monospace;
    background-color: #000;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.tips {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #fff;
    font-size: 14px;
    text-align: right;
}
</style>


<div id="container"></div>
<script src="../example/lib/stats.min1.js"></script>
<script src="../example/lib/three.js"></script>
<script src="../build/three.proton.js"></script>
<script>
var proton, emitter1, R;
var camera, scene, renderer, stats;
init();
function init() {
    initScene();//камера
    initLights();//свет
    addStats();
    addProton();
    initPlane();
    animate();
}
function initScene() {
   camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 1, 1000);
   camera.position.z = 500;
   scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    window.addEventListener('resize', onWindowResize, false);
}
function initLights() {
    var ambientLight = new THREE.AmbientLight(0x101010);
    scene.add(ambientLight);
    var pointLight = new THREE.PointLight(0xffffff, 2, 1000, 1);
    pointLight.position.set(0, 200, 200);
    scene.add(pointLight);
}
function addStats() {
    stats = new Stats();
    stats.showPanel(0);
    stats.dom.style.position = 'absolute';
    stats.dom.style.left = '0px';
    stats.dom.style.top = '0px';
    container.appendChild(stats.dom);
}
function initPlane() {
var textureLoader = new THREE.TextureLoader();
var map = textureLoader.load("https://threejs.org/examples/textures/colors.png" );
map.minFilter = map.magFilter = THREE.LinearFilter;
map.anisotropy = 4;          
    var groundGeo = new THREE.CylinderGeometry(30, 30, 60, 6);
    var groundMat = new THREE.MeshStandardMaterial({
        map: map
    });
    var ground = new THREE.Mesh(groundGeo, groundMat);
    ground.rotation.x = Math.PI/4 ;
    ground.position.x = 700;
    ground.position.y = 100;
    scene.add(ground);
}

function addProton() {
    proton = new Proton();
    R = -400;
    emitter1 = createEmitter(R, 0);
    proton.addEmitter(emitter1);
    proton.addRender(new Proton.SpriteRender(scene));
    Proton.Debug.drawEmitter(proton, scene, emitter1);
}
function createEmitter(x, y) {
    var emitter = new Proton.Emitter();
    emitter.rate = new Proton.Rate(new Proton.Span(10, 50), new Proton.Span(.1, .25));
    emitter.addInitialize(new Proton.Mass(1));
    emitter.addInitialize(new Proton.Life(2,7));//смерть частиц
    emitter.addInitialize(new Proton.Body(createSprite()));
    emitter.addInitialize(new Proton.Radius(1, 10));
    var geometry = new THREE.SphereGeometry(50, 10, 10);
    emitter.addInitialize(new Proton.Position(new Proton.MeshZone(geometry)));
    emitter.addInitialize(new Proton.Velocity(300, new Proton.Vector3D(0, 0, 1), 360));
    emitter.addBehaviour(new Proton.Alpha(3,0)); //текстура
    emitter.addBehaviour(new Proton.Color("random", "random"));
    emitter.addBehaviour(new Proton.Scale(1, 3));
    emitter.addBehaviour( new Proton.Attraction(new Proton.Vector3D(700, 100, 0), 20, 700));
    emitter.addBehaviour(new Proton.CrossZone(new Proton.ScreenZone(camera, renderer), 'dead'));
    emitter.p.x = x;
    emitter.p.y = y;
    emitter.emit();
    return emitter;
}
function createSprite() {
    var map = new THREE.TextureLoader().load("https://raw.githubusercontent.com/teawector/three.js/master/star.png");
    var material = new THREE.SpriteMaterial({
        map: map,
        blending: THREE.AdditiveBlending         
    });
    return new THREE.Sprite(material);
}
function animate() {
    stats.begin();
    requestAnimationFrame(animate);
    render();
    stats.end();
}
 var ctha = 0
function render() {
   proton.update();
   renderer.onProtonUpdate = function() {
                context.fillStyle = "rgba(0, 0, 0, 0.1)";
            //  context.fillRect(0, 0, canvas.width, canvas.height);
            };
    renderer.render(scene, camera);
    camera.lookAt(scene.position);
    // ctha += .002;
    // camera.position.x = Math.sin(ctha) * 500;
    // camera.position.z = Math.cos(ctha) * 500;
    // camera.position.y = Math.sin(ctha) * 500;
    Proton.Debug.renderInfo(proton, 3);
}
function onWindowResize() {
}
</script>

READ ALSO
Как перенести каждый элемент массива на новою строчку?
javascript

Как перенести каждый элемент массива на новою строчку?

Вообще это плохая идея добовлять \n к элементам массиваЛучше уж делать это при выводе

 217
Функция форматирования даты
javascript

Функция форматирования даты

Изучаю js и передо мной возникла задача создать функцию форматирования даты

 202
Контекст в JS (this)
javascript

Контекст в JS (this)

Правильно ли я понимаю, что в этом коде в 1-м варианте так как у стрелочных функций нету this она берет this у "родителя" , а во 2-м варианте this вообще...

 197
Vue router необязательный фрагмент
javascript

Vue router необязательный фрагмент

Имеется вот такой роут:

 204