threejs打造3d粒子穿梭效果

代码语言:html

所属分类:粒子

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>  three.js Points anti-gravity is applied ver3</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
            overflow: hidden;
        }
        canvas {
            position: absolute;
        }
    </style>

</head>
<body translate="no">
    <div id="canvas"></div>

    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
    <script>
        (function e(t, n, r) {
            function s(o, u) {
                if (!n[o]) {
                    if (!t[o]) {
                        var a = typeof require == "function" && require; if (!u && a) return a(o, !0); if (i) return i(o, !0); var f = new Error("Cannot find module '" + o + "'"); throw f.code = "MODULE_NOT_FOUND",
                        f;
                    }var l = n[o] = {
                        exports: {}
                    }; t[o][0].call(l.exports, function (e) {
                            var n = t[o][1][e]; return s(n ? n: e);
                        }, l, l.exports, e, t, n, r);
                }return n[o].exports;
            }var i = typeof require == "function" && require; for (var o = 0; o < r.length; o++) s(r[o]); return s;
        })({
            1: [function (require, module, exports) {
                var exports = {
                    getRandomInt: function (min, max) {
                        return Math.floor(Math.random() * (max - min)) + min;
                    },
                    getDegree: function (radian) {
                        return radian / Math.PI * 180;
                    },
                    getRadian: function (degrees) {
                        return degrees * Math.PI / 180;
                    },
                    getSpherical: function (rad1, rad2, r) {
                        var x = Math.cos(rad1) * Math.cos(rad2) * r;
                        var z = Math.cos(rad1) * Math.sin(rad2) * r;
                        var y = Math.sin(rad1) * r;
                        return [x,
                            y,
                            z];
                    }
                };


                module.exports = exports;

            },
                {}],
            2: [function (require, module, exports) {
                var Util = require('./util');

                var exports = function () {
                    var Camera = function () {
                        this.rad1 = Util.getRadian(90);
                        this.rad2 = Util.getRadian(0);
                        this.range = 1000;
                        this.obj;
                    };

                    Camera.prototype = {
                        init: function (width, height) {
                            this.obj = new THREE.PerspectiveCamera(35, width / height, 1, 10000);
                            this.obj.up.set(0, 1, 0);
                            this.setPosition();
                            this.lookAtCenter();
                        },
                        reset: function () {
                            this.setPosition();
                            this.lookAtCenter();
                        },
                        resize: function (width, height) {
                            this.obj.aspect = width / height;
                            this.obj.updateProjectionMatrix();
                        },
                        setPosition: function () {
                            var points = Util.getSpherical(this.rad1, this.rad2, this.range);
                            this.obj.position.set(points[0], points[1], points[2]);
                        },
                        lookAtCenter: function () {
                            this.obj.lookAt({
                                x: 0,
                                y: 0,
                                z: 0
                            });

                        }
                    };


                    return Camera;
                };

                module.exports = exports();

            },
                {
                    "./util": 8
                }],
            3: [function (require, module, exports) {
                module.exports = function (object, eventType, callback) {
                    var timer;

                    object.addEventListener(eventType, function (event) {
                        clearTimeout(timer);
                        timer = setTimeout(function () {
                            callback(event);
                        }, 500);
                    }, false);
                };

            },
                {}],
            4: [function (require, module, exports) {
                var exports = {
                    friction: function (acceleration, mu, normal, mass) {
                        var force = acceleration.clone();
                        if (!normal) normal = 1;
                        if (!mass) mass = 1;
                        force.multiplyScalar(-1);
                        force.normalize();
                        force.multiplyScalar(mu);
                        return force;
                    },
                    drag: function (acceleration, value) {
                        var force = acceleration.clone();
                        force.multiplyScalar(-1);
                        force.normalize();
                        force.multiplyScalar(acceleration.length() * value);
                        return force;
                    },
                    hook: function (velocity, anchor, rest_length, k) {
                        var force = velocity.clone().sub(anchor);
                        var distance = force.length() - rest_length;
                        force.normalize();
                        force.multiplyScalar(-1 * k * distance);
                        return force;
                    }
                };


                module.exports = exports;

            },
                {}],
            5: [function (require, module, exports) {
                var Util = require('./util');

                var exports = function () {
                    var HemiLight = function () {
                        this.rad1 = Util.getRadian(60);
                        this.rad2 = Util.getRadian(30);
                        this.range = 1000;
                        this.hex1 = 0xffffff;
                        this.hex2 = 0x333333;
                        this.intensity = 1;
                        this.obj;
                    };

                    HemiLight.prototype = {
                        init: function (hex1, hex2) {
                            if (hex1) this.hex1 = hex1;
                            if (hex2) this.hex2 = hex2;
                            this.obj = new THREE.HemisphereLight(this.hex1, this.hex2, this.intensity);
                            this.setPosition();
                        },
                        setPosition: function () {
                            var points = Util.getSpherical(this.rad1, this.rad2, this.range);
                            this.obj.position.set(points[0], points[1], points[2]);
                        }
                    };


                    return HemiLight;
                };

                module.exports = exports();

            },
                {
                    "./util": 8
                }],
            6: [function (require, module, exports) {
                var Util = require('./Util');
                var debounce = require('./debounce');
                var Camera = require('./camera');
                var HemiLight = require('./hemiLight');
                var Mover = require('./mover');

                var body_width = document.body.clientWidth;
                var body_height = document.body.clientHeight;
                var last_time_activate = Date.now();

                var canvas = null;
                var renderer = null;
                var scene = null;
                var camera = null;
                var light = null;

                var movers_num = 10000;
                var movers = [];
                var points_geometry = null;
                var points_material = null;
                var points = null;

                var textplate_geometry = null;
                var textplate_material = null;
                var textplate = null;

                var antigravity = new THREE.Vector3(0, 30, 0);

                var initThree = function () {
                    canvas = document.getElementById('canvas');
                    renderer = new THREE.WebGLRenderer({
                        antialias: true,
                        alpha: true
                    });

                    if (!renderer) {
                        alert('Three.js failed to load');
                    }
                    renderer.setSize(body_width, body_height);
                    canvas.appendChild(renderer.domElement);
                    renderer.setClearColor(0x111111, 1.0);

                    scene = new THREE.Scene();
                    scene.fog = new THREE.Fog(0x000000, 800, 1600);

                    camera = new Camera();
                    camera.init(body_width, body_height);

                    light = new HemiLight();
                    light.init(0xffff99, 0x99ffcc);
                    scene.add(light.obj);
                };

                var init = function () {
                    initThree();
                    buildPoints();
                    renderloop();
                    debounce(window, 'resize', function (event) {
                        resizeRenderer();
                    });
                };

                var activateMover = funct.........完整代码请登录后点击上方下载按钮下载查看

网友评论0