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