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();
},
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0