three. JS imitates the blockchain to realize the interconnection of multiple small balls

Realization principle

 utilize SphereGeometry First, randomly generate a large point like sphere , Take its vertex .
 According to the number of vertices , Number of generated balls , The position of each ball is positioned as vertex data , So far, all small balls have been generated .
 Two points and one line , Empathy , The positioning positions of the two balls are connected , It's a small ball connected . According to the specific design algorithm , Set the connection of small balls .
 Copy code 

Step one Generate small ball

   Generate a series of small balls according to the vertex data 
  addSingleSphereGeometry(position) {
        var geometry = new THREE.SphereBufferGeometry( 7, 32, 32 );
        var material = new THREE.MeshBasicMaterial( {color: '#949494'} );
        var sphere = new THREE.Mesh( geometry, material );
        sphere.name = position.name;
        sphere.isLine = position.isLine;
        sphere.position.set(position.x, position.y, position.z)
        this.scene.add( sphere );
    }
 Copy code 

Step two Two small balls are connected -- attachment

     According to the position of the two small balls , Two vertices are connected 
    addSingleLineGeometry(points) {
        let vectors = [];
        points.forEach(item => {
            vectors = vectors.concat([item.x, item.y, item.z])
        })
        const lineGeometry = new THREE.BufferGeometry();
        lineGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vectors, 3 ) );
        const lineMaterial = new THREE.LineBasicMaterial( { 
            color: 0xffffff,
            // lineWidth: 3  because OpenGL Core Profile And   On most platforms WebGL Limitations of the renderer , Set this value anyway , The line width is always 1.
        });
        let object = new THREE.Line( lineGeometry, lineMaterial );
        this.scene.add(object)
        // this.group.add(object);
    }
 Copy code 

Step three Design the data format of small ball vertex , The connection between the spheres

 Here are some data of the design ,
x,y,z-- Vertex information , It is the positioning position of the generated ball 
origin:  The starting position of the ball connection . Indicates that the data is the subscript in the vertex array .
end:  The terminal position of the ball connection , If there are more than one , It means that the small ball is connected with a plurality of small balls . Indicates that the data is the subscript in the vertex array of the terminal position .
isLine： true-- Indicates drawing lines , false-- Means no line 
name:  Vertex name , It can also represent other data , Used to record the characteristics of a small ball , Easy to do some operations .
vectors_data = [{x: -0, y: 120, z: 0, origin: 0, end: [1,2,3,4,5,6,7,8], isLine: true, name: '0-0'},
{x: -45.92201232910156, y: 110.86554718017578, z: 0,  origin: 1, end: [2, 9], isLine: true, name: '0-1'},
{x: -32.47176742553711, y: 110.86554718017578, z: 32.47176742553711,  origin: 2, end: [3, 10], isLine: true, name: '0-2'},
{x: -2.811912215659046e-15, y: 110.86554718017578, z: 45.92201232910156,  origin: 3, end: [4, 11], isLine: true, name: '0-3'},
{x: 32.47176742553711, y: 110.86554718017578, z: 32.47176742553711,  origin: 4, end: [5, 12], isLine: true, name: '0-4'},
{x: 45.92201232910156, y: 110.86554718017578, z: 5.623824431318092e-15,  origin: 5, end: [6, 13], isLine: true, name: '0-5'},
{x: 32.47176742553711, y: 110.86554718017578, z: -32.47176742553711, origin: 6, end: [7, 14], isLine: true, name: '0-6'},
{x: 8.435736646977138e-15, y: 110.86554718017578, z: -45.92201232910156, origin: 7, end: [8, 15], isLine: true, name: '0-7'},
{x: -32.47176742553711, y: 110.86554718017578, z: -32.47176742553711, origin: 8, end: [1, 16], isLine: true, name: '0-8'},

{x: -84.85281372070312, y: 84.85281372070312, z: 0, origin: 9, end: [10, 17], isLine: true, name: '0-9'},
{x: -60, y: 84.85281372070312, z: 60, origin: 10, end: [11, 18], isLine: true, name: '0-10'},
{x: -5.19573652087461e-15, y: 84.85281372070312, z: 84.85281372070312, origin: 11, end: [12, 19], isLine: true, name: '0-11'},
{x: 60, y: 84.85281372070312, z: 60, origin: 12, end: [13, 20], isLine: true, name: '0-12'},
{x: 84.85281372070312, y: 84.85281372070312, z: 1.039147304174922e-14, origin: 13, end: [14, 21], isLine: true, name: '0-13'},
{x: 60, y: 84.85281372070312, z: -60, origin: 14, end: [15, 22], isLine: true, name: '0-14'},
{x: 1.5587208715590883e-14, y: 84.85281372070312, z: -84.85281372070312, origin: 15, end: [16, 23], isLine: true, name: '0-15'},
{x: -60, y: 84.85281372070312, z: -60, origin: 16, end: [9, 24], isLine: true, name: '0-16'}]
        
    initSphereAndLine() {
        vectors_data.forEach(item => {
            this.addSingleSphereGeometry(item)
        })
        vectors_data.forEach(item => {
            if(item.isLine) {
                item.end.forEach(i => {
                    let tempArr = [];
                    tempArr.push(vectors_data[item.origin])
                    tempArr.push(vectors_data[i])
                    console.log(tempArr)
                    this.addSingleLineGeometry(tempArr)
                })
            }
        })
    }
        
 Copy code 

Step four Monitor click events , Clicked ball , Set to red

    document.addEventListener( 'click', this.mouseClick, false );
    
    mouseClick(event) {
        var mouse = new THREE.Vector2();
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
        this.raycaster.setFromCamera( mouse, this.camera );
        var intersects = this.raycaster.intersectObjects( this.scene.children, false );
        for ( var i = 0; i < intersects.length; i++ ) {
            if(intersects[i].face) {
                intersects[ i ].object.material.color.set( 0xff0000 );
            }
        }
    }
        
        
 Copy code 

remarks ： The basic interaction has been realized , Click to know the selected ball , Make corresponding operation . The code is incomplete , The overall idea is realized in this way .