时间戳

首页 > 解决方案 > .points 不透明度/大小在三个.js 中

javascript - .points 不透明度/大小在三个.js 中

问题描述

我回来回答关于.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 坐标来确定它。反正; 我也不确定如何逐渐改变它。

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

（提前致谢）

标签： javascriptthree.jsopacitypointparticles

解决方案

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

创建一个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>

推荐阅读