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); th.........完整代码请登录后点击上方下载按钮下载查看
网友评论0