.points opacity / size within three.js

问题

I'm back for question two on .points. This time wondering how to change the opacity from 0, to 1 and then back within certain pixel distances from the emitter.

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;

My main confusion is that even though I've given it transparency I can't change the value within the update comp I've made for my emitter.

function update() {

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

(This is where a bunch of validation is for where the points are)

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

}

Render loop:

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

I want to make it fade out and not appear in the scene for 20 or so pixels and then fade in. But I'm not entirely sure on how to change the opacity as particle.opacity += 0.1 won't work.

Edit: I'm also uncertain about Size as I want to do a similar thing with it but from 20 to 40, I could probably base it depending on it's Y cordinate. Anyway; I'm also uncertain how to gradually change that too.

Sorry if this is a obvious answer, duplicate question and any help I get. Any alternate methods of what I've seen is in an alternate structure that I don't understand or in array in which I don't know how to put into what I want.

(Thanks in advance)

回答1:

The issue is that the opacity and the size is a property of the THREE.PointsMaterial. If the pints should have different sizes it is not sufficient to have a list of different vertices in one THREE.Points. There has to be a list of different THREE.Points with different HREE.PointsMaterials.

Create a list of THREE.Points with different materials:

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);
}

So in update the opacity and size can be changed individually:

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>

来源：https://stackoverflow.com/questions/53786863/points-opacity-size-within-three-js