three实现三维粒子穿越时光隧道canvas动画效果代码
代码语言:html
所属分类:粒子
代码描述:three实现三维粒子穿越时光隧道canvas动画效果代码
代码标签: 粒子 穿越 时光 隧道 canvas 动画 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
}
canvas {
position: absolute;
}
</style>
</head>
<body>
<div id="canvas"></div>
<script type="text/javascript" src="//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;
th.........完整代码请登录后点击上方下载按钮下载查看
网友评论0