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.spee.........完整代码请登录后点击上方下载按钮下载查看