three实现三维粒子线条围绕核心动画交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：three实现三维粒子线条围绕核心动画交互效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="container"></div>
    <!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.92.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
    <script >
        (function() {
    
    window.launchApp = function() {
        
        /// ---------------------------
        //  INIT
        /// ---------------------------
        this.container = document.getElementById('container');
        this.width = window.innerWidth;
        this.height = window.innerHeight;
        this.centerX = this.width/2;
        this.centerY = this.height/2;
        this.geometrySize = 200;
        this.blockTime = 5000;
        this.TransactionsPerSecond = 2000;
        this.activeStep = 1;
        this.maxNodes = 25;
        this.minNodesDistance = 200;
        
        this.initApp = function() {            
            this.initRenderer();
            this.launchApp();
            this.initMouseEvents();
            this.animate();            
            
            // prevent animation bug when tab is inactive
            TweenLite.lagSmoothing(0);
        }
        
        this.initRenderer = function() {
            this.renderer = new THREE.WebGLRenderer({alpha: true});
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            this.renderer.setClearColor( 0x000000, 1);
            this.renderer.sortObjects = false
            this.container.appendChild(this.renderer.domElement);

            this.scene = new THREE.Scene();
            this.scene.fog = new THREE.Fog(0x000000, 1000, 4000);

            this.camera = new THREE.PerspectiveCamera(50, this.width / this.height, 1, 10000);
            this.camera.position.set(0, 0, 1000);
            
            this.scene.add(this.camera);
            
            var ambientLight = new THREE.AmbientLight(0x999999, 0.8);
            this.scene.add(ambientLight);
            
            var self = this;
            
            window.addEventListener('resize', this.onWindowResize.bind(this));
        }
        
        /// ---------------------------
        //  APP
        /// ---------------------------
        
        this.launchApp = function() {
            this.node = this.createNodeGroup();
            this.scene.add(this.node);
        }
        
        /// ---------------------------
        //  node UTILS
        /// ---------------------------
        
        this.createNodeGroup = function() {
            var nodeGroup = new THREE.Object3D();
            this.nodeRotationGroup = new THREE.Object3D();
            var nodeSegmentsGroup = new THREE.Object3D();
            
            var node = this.createnode();
            
            this.createNodeLight(this.nodeRotationGroup);
            this.createNodes(this.nodeRotationGroup);
            this.nodeRotationGroup.add(node);
            this.createSegments(nodeSegmentsGroup);
            nodeGroup.add(this.nodeRotationGroup)
            nodeGroup.add(nodeSegmentsGroup)
            
            
            return nodeGroup;
        }
        
        this.createnode = function() {
            var geometry = new THREE.SphereGeometry(this.geometrySize/1.5, 15, 15);
            // materials are rendered in two parts to prevent transparency bug
            var materialFront = new THREE.MeshPhongMaterial({ 
                color: 0x11111f, 
                side: THREE.BackSide,
                transparent: true,
                opacity: .5,
            });
            var materialBack = new THREE.MeshPhongMaterial({ 
                color: 0x11111f, 
                side: THREE.FrontSide,
                transparent: true,
                opacity: .5,
            });
            var nodeGroup = new THREE.Object3D();
            var node = new THREE.Mesh(geometry, materialFront);
            nodeGroup.add(node);
            var node = new THREE.Mesh(geometry, materialBack);
            nodeGroup.add(node);
            
            return nodeGroup;
        }
        
        this.createNodes = function(nodeRotationGroup) {
            
            this.nodes = [];
            var colors = [
              '54BE68',
              '2CB060',
              '1AA261',
              '0C8D64',
              '037868'
            ];

            for (var i = 0; i < this.maxNodes; i++) {
                var color = parseInt(colors[i % colors.length], 16);
                var node = new THREE.Object3D();
                var nodeSphere = new THREE.Mesh(
                    new THREE.SphereGeometry(4, 16, 8),
                    new THREE.MeshBasicMaterial({
                        color: color,
                        transparent: true,
                        opacity: 1
                    })
                );
                nodeSphere.position.x = -180;
                node.name = "nodeNodes";
                node.add(nodeSphere);
                node.rotation.x = Math.floor(Math.random() * Math.floor(100));
                node.rotation.z = Math.floor(Math.random() * Math.floor(100));
                node.rotation.y = Math.floor(Math.random() * Math.floor(100));
                nodeRotationGroup.add(node);
                this.nodes.push(node);               
            }            
        }
        
        this.createSegments = function(nodeSegmentsGroup) {
            var segments = this.maxNodes * this.maxNodes;
            
            this.positions = new Float32Array(segments * 3);
            this.colors = colors = new Float32Array(segments * 3);
            this.particlePositions = new Float32Array(this.maxNodes * 3);
            
            var geometry = new THREE.BufferGeometry();

            geometry.addAttribute('position', new THREE.BufferAttribute(this.positions, 3).setDynamic(true));
            geometry.addAttribute('color', new THREE.BufferAttribute(this.colors, 3).setDynamic(true));
            geometry.computeBoundingSphere();
            geometry.setDrawRange(0, 0);

            var material = new THREE.LineBasicMaterial({
                vertexColors: THREE.VertexColors,
                blending: THREE.AdditiveBlending,
                transparent: true
            });

            linesMesh = new THREE.LineSegments(geometry, material);
            nodeSegmentsGroup.add(linesMesh);
        }
        this.setNodesPosition = function() {
            for (var i = 0; i < this.maxNodes; i++) {
                
                var position = this.nodes[i].children[0].getWorldPositio.........完整代码请登录后点击上方下载按钮下载查看