带有连接线的 Threejs 粒子系统。编程逻辑？

Question

基于我最近发布的上一个问题： How to create lines between nearby particles in ThreeJS?

我能够创建连接附近粒子的单独线条。然而，由于粒子系统的逻辑，线条被绘制了两次。这是因为原始 2D 粒子系统的工作方式： https://awingit.github.io/particles/

这也会画线两次。对于连接一条线的每一对粒子，绘制一条线。

我认为这对于性能来说并不理想。我如何只为每个连接点画一条线？

附：这正是我想要达到的效果，但无法理解代码： http://freelance-html-developer.com/clock/

我想了解基本逻辑。

更新：

我已经创建了一个jsfiddle 来记录我的进度。

    var canvas, canvasDom, ctx, scene, renderer, camera, controls, geocoder, deviceOrientation = false;
    var width = 800,
        height = 600;
    var particleCount = 20;


    var pMaterial = new THREE.PointsMaterial({
        color: 0x000000,
        size: 0.5,
        blending: THREE.AdditiveBlending,
        //depthTest: false,
        //transparent: true
    });
    var particles = new THREE.Geometry;
    var particleSystem;
    var line;
    var lines = {};
    var lineGroup = new THREE.Group();
    var lineMaterial = new THREE.LineBasicMaterial({
        color: 0x000000,
        linewidth: 1
    });

    var clock = new THREE.Clock();
    var maxDistance = 15;

    function init() {
        canvasDom = document.getElementById('canvas');
        setupStage();
        setupRenderer();
        setupCamera();
        setupControls();
        setupLights();
        clock.start();
        window.addEventListener('resize', onWindowResized, false);
        onWindowResized(null);
        createParticles();
        scene.add(lineGroup);
        animate();
    }

    function setupStage() {
        scene = new THREE.Scene();
    }

    function setupRenderer() {
        renderer = new THREE.WebGLRenderer({
            canvas: canvasDom,
            logarithmicDepthBuffer: true
        });
        renderer.setSize(width, height);
        renderer.setClearColor(0xfff6e6);
    }

    function setupCamera() {
        camera = new THREE.PerspectiveCamera(70, width / height, 1, 10000);
        camera.position.set(0, 0, -60);
    }

    function setupControls() {
        if (deviceOrientation) {
            controls = new THREE.DeviceOrientationControls(camera);
            controls.connect();
        } else {
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.target = new THREE.Vector3(0, 0, 0);
        }
    }

    function setupLights() {
        var light1 = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
        var light2 = new THREE.PointLight(0xffffff, 1, 0);

        light2.position.set(100, 200, 100);

        scene.add(light1);
        scene.add(light2);
    }

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        animateParticles();
        updateLines();
        render();
    }

    function render() {
        renderer.render(scene, camera);
    }

    function onWindowResized(event) {
        width = window.innerWidth;
        height = window.innerHeight;
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
        renderer.setSize(width, height);
    }

    function createParticles() {
        for (var i = 0; i < particleCount; i++) {
            var pX = Math.random() * 50 - 25,
                pY = Math.random() * 50 - 25,
                pZ = Math.random() * 50 - 25,
                particle = new THREE.Vector3(pX, pY, pZ);
            particle.diff = Math.random() + 0.2;
            particle.default = new THREE.Vector3(pX, pY, pZ);
            particle.offset = new THREE.Vector3(0, 0, 0);
            particle.velocity = {};
            particle.velocity.y = particle.diff * 0.5;
            particle.nodes = [];
            particles.vertices.push(particle);
        }
        particleSystem = new THREE.Points(particles, pMaterial);
        particleSystem.position.y = 0;
        scene.add(particleSystem);
    }

    function animateParticles() {
        var pCount = particleCount;
        while (pCount--) {
            var particle = particles.vertices[pCount];
            var move = Math.sin(clock.getElapsedTime() * (1 * particle.diff)) / 4;

            particle.offset.y += move * particle.velocity.y;
            particle.y = particle.default.y + particle.offset.y;

            detectCloseByPoints(particle);
        }
        particles.verticesNeedUpdate = true;
        particleSystem.rotation.y += 0.01;
        lineGroup.rotation.y += 0.01;
    }

    function updateLines() {
        for (var _lineKey in lines) {
            if (!lines.hasOwnProperty(_lineKey)) {
                continue;
            }
            lines[_lineKey].geometry.verticesNeedUpdate = true;
        }
    }

    function detectCloseByPoints(p) {
        var _pCount = particleCount;
        while (_pCount--) {
            var _particle = particles.vertices[_pCount];
            if (p !== _particle) {

                var _distance = p.distanceTo(_particle);
                var _connection = checkConnection(p, _particle);

                if (_distance < maxDistance) {
                    if (!_connection) {
                        createLine(p, _particle);
                    }
                } else if (_connection) {
                    removeLine(_connection);
                }
            }
        }
    }

    function checkConnection(p1, p2) {
        var _childNode, _parentNode;
        _childNode = p1.nodes[particles.vertices.indexOf(p2)] || p2.nodes[particles.vertices.indexOf(p1)];
        if (_childNode && _childNode !== undefined) {
            _parentNode = (_childNode == p1) ? p2 : p1;
        }
        if (_parentNode && _parentNode !== undefined) {
            return {
                parent: _parentNode,
                child: _childNode,
                lineId: particles.vertices.indexOf(_parentNode) + '-' + particles.vertices.indexOf(_childNode)
            };
        } else {
            return false;
        }
    }

    function removeLine(_connection) {
        // Could animate line out
        var childIndex = particles.vertices.indexOf(_connection.child);
        _connection.parent.nodes.splice(childIndex, 1);
        deleteLine(_connection.lineId);
    }

    function deleteLine(_id) {
        lineGroup.remove(lines[_id]);
        delete lines[_id];
    }

    function addLine(points) {
        var points = points || [new THREE.Vector3(Math.random() * 10, Math.random() * 10, Math.random() * 10), new THREE.Vector3(0, 0, 0)];
        var _lineId = particles.vertices.indexOf(points[0]) + '-' + particles.vertices.indexOf(points[1]);
        var lineGeom = new THREE.Geometry();
        if (!lines[_lineId]) {
            lineGeom.dynamic = true;
            lineGeom.vertices.push(points[0]);
            lineGeom.vertices.push(points[1]);
            var curLine = new THREE.Line(lineGeom, lineMaterial);
            curLine.touched = false;
            lines[_lineId] = curLine;
            lineGroup.add(curLine);
            return curLine;
        } else {
            return false;
        }
    }

    function createLine(p1, p2) {
        p1.nodes[particles.vertices.indexOf(p2)] = p2;
        addLine([p1, p2]);
    }

    $(document).ready(function() {
        init();
    });

我真的很接近，但我不确定它是否已优化。似乎有闪烁的线条，有时线条会卡在原地。

所以这是我的想法。我点击了，我所要做的就是使线条的 Vector3 点等于相关粒子 Vector3 点。我只需要更新每一行geometry.verticesNeedUpdate = true;

另外，我管理线条的方式是使用 2 个点的索引创建一个唯一 ID，例如行['8-2'] = 行

Answer 1

您实际上要解决的问题是，在循环遍历点列表时，成功匹配的次数增加了一倍。

示例：

考虑一个点列表，[A, B, C, D]。您的循环测试每个点与所有其他点。对于此示例，A 和 C 是仅有的足够接近的点，可以考虑在附近。

在第一次迭代中，A vs. all，你发现A 和C 就在附近，所以你添加了一行。但是当您对C 进行迭代时，您还会发现A 就在附近。这会导致第二行，这是您要避免的。

修复它：

解决方案很简单：不要重新访问您已经检查过的节点。这是因为distance from A to C 的答案与distance from C to A 没有什么不同。

最好的方法是调整检查循环的索引：

// (Note: This is example code, and won't "just work.")
for(var check = 0, checkLength = nodes.length; check < checkLength; ++check){
    for(var against = check + 1, against < checkLength; ++against){
        if(nodes[check].distanceTo(nodes[against]) < delta){
            buildThatLine(nodes[check], nodes[against]);
        }
    }
}

在内部循环中，索引设置为：

1. 跳过当前节点
2. 跳过当前节点之前的所有节点。

这是通过将内部索引初始化为外部索引 + 1 来完成的。

警告：

此特定逻辑假定您丢弃每一帧的所有行。这不是实现效果的最有效方法，但我将把它作为一种练习留给你。