vue+three打造一个粒子树生长旋转立体效果代码-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：vue+three打造一个粒子树生长旋转立体效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>

    <script id="bfwone" data="dep=vue.2.2.min|three.121&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {

            new Vue({
                el: '#app',

                data: {
                  
                        renderer: null,
                        scene: null,
                        camera: null,
                        clouds: 100,
                        angle: 0,
                        cube: null,
                        testx: 0, testy: 0, testz: 0,
                        preSelectedSparks: [],
                        sparks: [],
                        cubes: [],
                        particles: null,
                        floor: null,
                        light: null,
                   
                },
                methods: {
                    fuckYea() {
                        this.floor.position.x = this.testx
                        this.floor.position.y = this.testy
                        this.floor.position.z = this.testz
                    },
                    createCloudStyle() {
                        let dot = Math.random();
                        let size;
                        let gradientbackground;
                        if (dot < 0.5) {
                            size = Math.random() * 3 + 1;
                            gradientbackground = "background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%);"
                        } else {
                            size = Math.random() * 305 + 150;
                            gradientbackground = "background: radial-gradient(circle, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0) 70%);"
                        }
                        let yplace = ((Math.random() * window.innerWidth / 3) + (Math.random() * window.innerWidth / 3) + (Math.random() * window.innerWidth / 3)) - size/2
                        let xplace = ((Math.random() * window.innerHeight / 3) + (Math.random() * window.innerHeight / 3) + (Math.random() * window.innerHeight / 3)) - size/2
                        return "position:absolute;width:" + size + "px;height:" + size + "px;top: " + xplace + "px;left: " + yplace + "px;" + gradientbackground;
                    },
                    setup() {
                        //console.log("yep?");

                        this.renderer = new THREE.WebGLRenderer( {
                            alpha: true
                        });
                        //this.renderer.setClearColor("#1e272e", 1.0);
                        this.renderer.setSize(window.innerWidth, window.innerHeight);
                        document.getElementById("three").appendChild(this.renderer.domElement);
                        this.camera = new THREE.PerspectiveCamera(
                            45,
                            window.innerWidth / window.innerHeight,
                            1,
                            500
                        );
                        this.camera.position.set(120, 35, 0);

                        this.scene = new THREE.Scene();

                        this.light = new THREE.PointLight(0xff0000, 1, 300);
                        this.light.position.set(30, -5, 0);
                        this.light.castShadow = true;
                        this.scene.add(this.light);


                        let comet = new THREE.ConeBufferGeometry(12, 10, 8)
                        var material = new THREE.MeshPhongMaterial({
                            shininess: 100,
                            wireframe: false,
                            specular: 0x636e72,
                            flatShading: true,
                            color: 'rgb(30,30,30)'
                        });
                        this.floor = new THREE.Mesh(comet, material);
                        this.floor.castShadow = true;
                        this.floor.rotation.z = Math.PI;
                        this.floor.position.x = 0;
                        this.floor.position.y = 0;
                        this.floor.position.z = 0;
                        //this.scene.add( this.floor );
                        // var size = 100;
                        //var divisions = 100;

                        //var gridHelper = new THREE.GridHelper(size, divisions);
                        // this.scene.add(gridHelper);

                        //var axesHelper = new THREE.AxesHelper(5);
                        //this.scene.add(axesHelper);
                        this.renderer.render(this.scene, this.camera);

                        let particleCount = 5000;
                        let positions = [];
                        let colors = [];
                        let sizes = [];
                        this.particles = new THREE.BufferGeometry();
                        let pMaterial = new THREE.ShaderMaterial({
                            blending: THREE.AdditiveBlending,
                            depthTest: false,
                            //transparent: true,
                            vertexColors: true,
                            vertexShader: `
                            attribute float size;
                            varying vec3 vColor;
                            void main() {
                            vColor = color;
                            vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
                            gl_PointSize = size * ( 300.0 / -mvPosition.z );
                            gl_Position = projectionMatrix * mvPosition;
                            }`,
                            fragmentShader: `
                            uniform sampler2D pointTexture;
                            varying vec3 vColor;
                            void main() {
                            vec3 whiteColor = vec3(1,1,1);
                            vec2 xy = gl_PointCoord.xy - vec2(0.5);
                            float ll = 0.5 - length(xy)/0.5;
                            vec3 mixColor = mix(vColor, whiteColor,ll);
                            //gl_FragColor = vec4(vColor, smoothstep(0.0,1.0,ll));
                            gl_FragColor = vec4(mixColor, smoothstep(0.0, 1.0,ll));
                            }
                            `
                        });

                        for (let x = 0; x < 50; x++) {
                            this.createSpark();
                        }

                        for (let y = 0; y < particleCount; y++) {
                            //console.log("AM I EVEN GETTING HERE?")
                            let size = 5;
                            let newSpark = {
                                ...this.preSelectedSparks[
                                    Math.floor(Math.random() * this.preSelectedSparks.length)
                                ]
                            };
                            //y === 0 || y === 1 ? console.log(newSpark) : null;
                            newSpark.speed = 0.05;
                            newSpark.death = false;
                            y === 0 ?  newSpark.startTick = 0: newSpark.startTick = Math.floor(Math.random() * 2500);
                            newSpark.startTickCounter = 0;
                            newSpark.size = size;
                            this.sparks.push(newSpark);
                            //let color = new THREE.Color(0xffffff * Math.random());
                            //color.setHSL(y / particleCount, 1.0, 0.5);
                            //Math.floor(Math.random() * 50 + 100)
                            let color = new THREE.Color("rgb(" + Math.floor(Math.random() * 50 + 100) + "," + Math.floor(Math.random() * 50 + 100) + "," + 255 + ")");
                            /*let color = {
          r:Math.floor(Math.random() * 50 + 100),
          g:Math.floor(Math.random() * 50 + 100),
          b:255
        }*/
                            colors.push(color.r, color.g, color.b);
                            sizes.push(0);
                            positions.push(newSpark.sPos.x);
                            positions.push(newSpark.sPos.y);
                            positions.push(newSpark.sPos.z);
                        }
                        //console.log(positions,sizes, colors,"here are positions")
                        this.particles.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
                        this.particles.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
                        this.particles.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
                        //console.log("here we are", this.particles);
                        var particleSystem = new THREE.Points(this.particles, pMaterial);
                        this.scene.add(particleSystem);
                        particleSystem.sortParticles = true;
                    },
                    onResize() {
                        //console.log("we resizing!", this)
                        this.renderer.setSize(window.innerWidth, window.innerHeight);
                        this.renderer.setPixelRatio(window.devicePixelRatio);
                        document.getElementById("platform").style.bottom = "25px";
                    },
                    createSpark() {
                        let chance = Math.random();
                        let distance = 6;
                        let angle = Math.floor(Math.random() * 360);
                        let sPos = {
                            x: distance * Math.cos(angle),
                            y: 0,
                            z: distance * Math.sin(angle),
                        }
                        let startPoint = new THREE.Object3D;
                        startPoint.position.set(sPos.x, sPos.y, sPos.z);
                        startPoint.lookAt(0, 0, 0);
                        sPos.angle = startPoint.getWorldDirection(sPos.angle);
                        let start = {
                            ...sPos.angle
                        };
                        let first = new THREE.Vector3(-0.05, 1, 0.05);
                        let second = new THREE.Vector3(0.05, 1, -0.05)
                        let third = chance > 0.3 ? new THREE.Vector3(-0.05, 1, 0.05): new THREE.Vector3(0.5 - Math.random(), 0.3, 0.5 - Math.random());
                        let fourth = chance > 0.3 ? new THREE.Vector3(-0.05, 1, -0.05): new THREE.Vector3(0.5 - Math.random(), 0.3, 0.5 - Math.random());
                        //console..........完整代码请登录后点击上方下载按钮下载查看