Question

我已经能够为画布创建一个简单有效的粒子系统。

这是一个演示： https://awingit.github.io/particles/

现在我想做的是在Threejs中创建相同的东西。但是，我还没有找到任何可供参考的例子，而且我无法像3D中的2D画布粒子系统一样创建它。

任何人都可以就如何在Threejs中做到这一点给我一些指示？

我知道如何使用粒子，但我正在努力的是用线连接附近的点。

以下是我添加基本粒子以创建雪/雨效果的方法：

function createSnow() {
    for (var i = 0; i < particleCount; i++) {
        var pX = Math.random() * 800 - 400,
            pY = Math.random() * 700 - 250,
            pZ = Math.random() * 800 - 400,
            particle = new THREE.Vector3(pX, pY, pZ);
        particle.velocity = {};
        particle.velocity.y = -1;
        particles.vertices.push(particle);
    }
    particleSystem = new THREE.Points(particles, pMaterial);
    particleSystem.position.y = 0;
    scene.add(particleSystem);
}

// This goes in the update loop
function animateSnow() {
    var pCount = particleCount;
    while (pCount--) {
        var particle = particles.vertices[pCount];
        if (particle.y < -55) {
            particle.y = 500;
            particle.velocity.y = -1.2;
        }
        particle.velocity.y -= Math.random() * .02;
        particle.y += particle.velocity.y;
    }
    particles.verticesNeedUpdate = true;
}

那么如何连接附近点之间的线路呢？

非常感谢任何反馈或指导。

更新：这张照片看起来与我希望实现的相似......

忽略立方体形状，主要是关于粒子如何在相邻粒子之间连接线条。

更新：所以我取得了一些进展。我可以使用THREE.LineSegments创建各个线条的错觉。看起来好像每2个顶点画一条线。所以索引0和1画一条线，然后索引2和3画一条线。索引1和2之间没有画线。

function addLines(){
    var numLines = 10;
    var x = 0;
    for (nn=0; nn<numLines; nn++)
    {
        lineGeom.vertices.push(new THREE.Vector3(x, -5, 0));
        lineGeom.vertices.push(new THREE.Vector3(x, 5, 0));
        x += 5;
    }
    line = new THREE.LineSegments( lineGeom, lineMaterial );
    scene.add(line);
}

我离我更近了，但我现在遇到的问题是我不能应用独特的样式属性，因为我不能给每一行都有自己的样式，如宽度和颜色。我可能需要创建单独的线对象。将看到这一进展如何并将分享我的发现......

如何在ThreeJS中的附近粒子之间创建线条？

0 个答案: