three实现炫酷彩色粒子线旋涡动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：three实现炫酷彩色粒子线旋涡动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
* {
	margin:0;
	padding:0
}
html {
	height:100%
}
body {
	height:100%;
	overflow:hidden;
	background-color:#111
}
canvas {
	position:absolute
}
.summary {
	position:absolute;
	top:1em;
	right:1em;
	left:1em;
	z-index:100000;
	color:#fff;
	font-family:'source code pro'
}
h1 {
	font-size:1.5em;
	font-weight:100
}

</style>
</head>

<body>


    <div class="summary">
        <h1>炫酷粒子旋涡网页特效</h1>
    </div>
    <div id="canvas"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
    <script >
        (function e(g, b, d) {
       function f(k, m) {
           if (!b[k]) {
               if (!g[k]) {
                   var h = typeof require == "function" && require;
                   if (!m && h) {
                       return h(k, !0)
                   }
                   if (a) {
                       return a(k, !0)
                   }
                   var i = new Error("Cannot find module '" + k + "'");
                   throw i.code = "MODULE_NOT_FOUND", i
               }
               var j = b[k] = {
                   exports: {}
               };
               g[k][0].call(j.exports, function(l) {
                   var o = g[k][1][l];
                   return f(o ? o : l)
               }, j, j.exports, e, g, b, d)
           }
           return b[k].exports
       }
       var a = typeof require == "function" && require;
       for (var c = 0; c < d.length; c++) {
           f(d[c])
       }
       return f
   })({
       1: [function(f, d, a) {
           var c = f("./get");
           var b = new c();
           var a = function() {
               var g = function() {
                   this.width = 0;
                   this.height = 0;
                   this.rad1 = 0;
                   this.rad2 = 0;
                   this.x = 0;
                   this.y = 0;
                   this.z = 0;
                   this.r = 0;
                   this.obj
               };
               g.prototype.init = function(i, j, k, h) {
                   this.width = k;
                   this.height = h;
                   this.r = 5000;
                   this.rad1 = i;
                   this.rad2 = j;
                   this.obj = new THREE.PerspectiveCamera(35, this.width / this.height, 1, 10000);
                   this.setPosition(this.rad1, this.rad2, this.r)
               };
               g.prototype.setPosition = function(i, j) {
                   var h = b.pointSphere(i, j, this.r);
                   this.obj.position.set(h[0], h[1], h[2]);
                   this.obj.up.set(0, 1, 0);
                   this.obj.lookAt({
                       x: 0,
                       y: 0,
                       z: 0
                   })
               };
               return g
           };
           d.exports = a()
       }, {
           "./get": 3
       }],
       2: [function(c, b, a) {
           b.exports = function(g, f, d) {
               var h;
               g.addEventListener(f, function(i) {
                   clearTimeout(h);
                   h = setTimeout(function() {
                       d(i)
                   }, 500)
               }, false)
           }
       }, {}],
       3: [function(c, b, a) {
           var a = function() {
               var d = function() {};
               d.prototype.randomInt = function(g, f) {
                   return Math.floor(Math.random() * (f - g)) + g
               };
               d.prototype.degree = function(f) {
                   return f / Math.PI * 180
               };
               d.prototype.radian = function(f) {
                   return f * Math.PI / 180
               };
               d.prototype.pointSphere = function(g, h, f) {
                   var i = Math.cos(g) * Math.cos(h) * f;
                   var k = Math.cos(g) * Math.sin(h) * f;
                   var j = Math.sin(g) * f;
                   return [i, j, k]
               };
               return d
           };
           b.exports = a()
       }, {}],
       4: [function(f, d, a) {
           var c = f("./get");
           var b = new c();
           var a = function() {
               var g = function() {
                   this.rad1 = 0;
                   this.rad2 = 0;
                   this.x = 0;
                   this.y = 0;
                   this.z = 0;
                   this.r = 0;
                   this.obj
               };
               g.prototype.init = function(n, l, m, k, h, i, j) {
                   this.r = k;
                   this.obj = new THREE.HemisphereLight(h, i, j);
                   this.setPosition(l, m);
                   n.add(this.obj)
               };
               g.prototype.setPosition = function(i, j) {
                   var h = b.pointSphere(i, j, this.r);
                   this.obj.position.set(h[0], h[1], h[2])
               };
               return g
           };
           d.exports = a()
       }, {
           "./get": 3
       }],
       5: [function(I, A, q) {
           var t = I("./get");
           var s = new t();
           var p = I("./debounce");
           var n = I("./camera");
           var D = I("./pointLight");
           var u = I("./hemiLight");
           var C = I("./mover");
           var b = document.body.clientWidth;
           var a = document.body.clientHeight;
           var r = 60;
           var y = +new Date();
           var E = new THREE.Raycaster();
           var B = new THREE.Vector2(-2, -2);
           var x;
           var o;
           var G;
           var K;
           var m;
           var z;
           var j = new THREE.BufferGeometry();
           var k = new THREE.MeshBasicMaterial({
               color: 16777215,
               vertexColors: THREE.VertexColors
           });
           var l;
           var f = new THREE.BoxGeometry(16, 16, 16);
           var f = new THREE.CylinderGeometry(0, 6, 300, 3);
           var g = new THREE.Mesh(f);
           var c = [];
           var h = 8000;
           var i = g.geometry.vertices;
           var d = g.geometry.faces;
           var w = function() {
               o = document.getElementById("canvas");
               G = new THREE.WebGLRenderer({
                   antialias: true
               });
               if (!G) {
                   alert("Three.jsの初期化に失敗しました。")
               }
               K = new THREE.Scene();
               K.fog = new THREE.Fog(1118481, 7000, 10000);
               o.appendChild(G.domElement);
               G.setSize(b, a);
               G.setClearColor(1118481, 1)
    .........完整代码请登录后点击上方下载按钮下载查看