.points непрозрачность / размер в течение трех.js - PullRequest
Новая
       32

.points непрозрачность / размер в течение трех.js

0 голосов
/ 15 декабря 2018

Я вернулся на второй вопрос по .points.На этот раз интересно, как изменить непрозрачность с 0 до 1, а затем обратно в пределах определенных пиксельных расстояний от излучателя.

var particleCount = 14,
particles = new THREE.Geometry(),
pMaterial = new THREE.PointsMaterial({
  map: new THREE.TextureLoader().load("x.png"),
  blending: THREE.multiplyBlending,
  flatShading: true,
  size: 40,
  transparent: true,
  depthTest: true,
  sizeAttenuation: true,
  opacity: 1
});
var particleSystem;

Мое основное недоразумение заключается в том, что, хотя я и дал ему прозрачность, я не могу изменить значение в обновлении, которое я сделал для своего эмиттера. 

function update() {

//particleSystem.rotation.y += 0.01;
 pCount = particleCount;
 while (pCount--) {
 particle = particles.vertices[pCount];

(Это где куча проверок для того, где находятся точки) 

 particleSystem.geometry.verticesNeedUpdate = true;
 particleSystem.rotation.y += (Math.random()*0.001)

}

Цикл рендеринга: 

renderer.setAnimationLoop(() => {
 update();
 composer.render(scene, camera);
});

Я хочу, чтобы он исчезал и не появлялся в сцене для20 или около того пикселей, а затем исчезают. Но я не совсем уверен, как изменить непрозрачность, так как не будет работать частиц.opacity + = 0.1.

Редактировать: я также не уверен в размере какЯ хочу сделать с ним то же самое, но с 20 до 40, я мог бы основывать это в зависимости от того, является ли он кординатом.Тем не мение;Я также не уверен, как постепенно это изменить.

Извините, если это очевидный ответ, дублирующий вопрос и любая помощь, которую я получу.Любые альтернативные методы того, что я видел, находятся в альтернативной структуре, которую я не понимаю, или в массиве, в котором я не знаю, как поместить в то, что я хочу.

(Заранее спасибо)

1 Ответ

0 голосов
/ 17 декабря 2018

Проблема в том, что непрозрачность и размер являются свойством THREE.PointsMaterial.Если пинты должны иметь разные размеры, недостаточно иметь список разных вершин в одной THREE.Points.Должен быть список разных THREE.Points с разными HREE.PointsMaterial с.

Создайте список из THREE.Points с разными материалами: 

var texture = new THREE.TextureLoader().load( "..." );

var particleSystemCount = 14;
var particleSystems = [];
for (var i = 0; i < particleSystemCount; ++ i) {
    var geometry = new THREE.Geometry();
    var pMaterial = new THREE.PointsMaterial({
        size: 20,
        map: texture,
        blending: THREE.AdditiveBlending,
        transparent: true,
        depthTest: false,
        sizeAttenuation: true,
        opacity: 0
    });

    // ...        

    var points = new THREE.Points(geometry, pMaterial);
    scene.add(points);   
    particleSystems.push(points);
}

Так что в updateНепрозрачность и размер могут быть изменены индивидуально: 

function update() {

    for (var i = 0; i < particleSystems.length; ++ i) {
        var points   = particleSystems[i];

        var material = points.material;
        var particle = points.geometry.vertices[0];

        // ....

        if ( material.size < 40 )
            material.size += 0.5;
        if ( material.opacity < 1 )
            material.opacity += 0.01;

        // ....
    }
}


var canvas_w = window.innerWidth, canvas_h = window.innerHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, canvas_w/canvas_h, 1, 1000);
camera.position.set(0, 0, 400);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(canvas_w, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.onresize = function() { 
    canvas_w = window.innerWidth, canvas_h = window.innerHeight;
    renderer.setSize(canvas_w, canvas_h);
    camera.aspect = canvas_w/canvas_h;
    camera.updateProjectionMatrix();
}

var texture = new THREE.TextureLoader().load("https://threejs.org/examples/textures/sprites/circle.png");

var particleSystemCount = 14;
var particleSystems = [];
for (var i = 0; i < particleSystemCount; ++ i) {
    var geometry = new THREE.Geometry();
    var pMaterial = new THREE.PointsMaterial({
        size: 20,
        map: texture,
        blending: THREE.AdditiveBlending,
        transparent: true,
        depthTest: false,
        sizeAttenuation: true,
        opacity: 0
    });
    var px = (Math.random() - 0.5) * 100;
    var py = (Math.random() - 0.5) * 100 + 200;
    var pz = (Math.random() - 0.5) * 100;
    var particle = new THREE.Vector3(px, py, pz);
    particle.velocity = new THREE.Vector3(0, 0, 0);
    geometry.vertices.push(particle);
    var points = new THREE.Points(geometry, pMaterial);
    scene.add(points);   
    particleSystems.push(points);
}

function update() {

    for (var i = 0; i < particleSystems.length; ++ i) {
        var points   = particleSystems[i];
        
        var material = points.material;
        var particle = points.geometry.vertices[0];

        if (particle.y < -200) {
              particle.x = (Math.random() - 0.5) * 100;
              particle.y = (Math.random() - 0.5) * 100 + 200;
              particle.z = (Math.random() - 0.5) * 100;
              particle.velocity.y = 0;
              material.size = 20;
              material.opacity = 0;
        }
        
        particle.velocity.y -= Math.random() * .1;
        particle.add(particle.velocity);

        
        if ( material.size < 40 )
            material.size += 0.25;
        if ( material.opacity < 1 )
            material.opacity += 0.01;

        points.geometry.verticesNeedUpdate = true;
        points.rotation.y += (Math.random()*0.001)
    }
}

renderer.setAnimationLoop(() => {
    update();
    renderer.render(scene, camera);
});
body { overflow: hidden; margin: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
...