three+quicksettings实现可配参数旋涡飓风动画效果代码
代码语言:html
所属分类:动画
代码描述:three+quicksettings实现可配参数旋涡飓风动画效果代码
代码标签: three quicksettings 参数 旋涡 飓风 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/quicksettings_minimal.css"> <style> body { background:#202020; } #logo-anim { width:100%; height: 500px; } </style> </head> <body> <div id="logo-anim"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/quicksettings.min.js"></script> <script> $(function () { "use strict"; var weatherPressure = 0; var weatherSpeed = 0; var settings = null; // should have weather data or defaults in place // assuming jquery loaded var container = $("#logo-anim"); var containerW = container.width(); var containerH = container.height(); var scene; var camera; var renderer; var uisettings = { AtmosPressure: weatherPressure, WindSpeed: weatherSpeed }; $(document).ready(function () { // ui initUI(); // start anim initAnim(); }); function initUI() { settings = QuickSettings.create(); settings.setGlobalChangeHandler(uiChange); settings.bindRange("AtmosPressure", 0, 1, weatherPressure, 0.01, uisettings); settings.bindRange("WindSpeed", 0, 1, weatherSpeed, 0.01, uisettings); settings.addButton("APPLY WEATHER.........完整代码请登录后点击上方下载按钮下载查看
网友评论0