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

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

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