javascript - .points three.js 内的不透明度/大小

Question

我回来回答关于 .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 左右像素然后淡入。但我不完全确定如何更改不透明度，因为 particle.opacity += 0.1 不起作用.

编辑:我也不确定大小，因为我想用它做类似的事情，但从 20 到 40，我可能可以根据它的 Y 坐标来确定它。反正;我也不确定如何逐渐改变它。

很抱歉，如果这是一个明显的答案、重复的问题以及我得到的任何帮助。我所看到的任何替代方法都在我不理解的替代结构中，或者在我不知道如何放入我想要的内容的数组中。

(提前致谢)

Answer 1

问题是不透明度和大小是 THREE.PointsMaterial 的属性.如果品脱应该有不同的大小，那么在一个 THREE.Points 中列出不同的顶点是不够的.必须有一个包含不同 HREE.PointsMaterial 的不同 THREE.Points 的列表。

创建一个包含不同 Material 的 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>