three+quicksettings实现可配参数旋涡飓风动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：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", uiApply);
            //console.log("initUI", weatherPressure, weatherSpeed);
          }
        
          function uiChange() {
            weatherPressure = uisettings.AtmosPressure;
            weatherSpeed = uisettings.WindSpeed;
            //console.log("uiChange", weatherPressure, weatherSpeed)
          }
        
          function uiApply() {
            //console.log(weatherPressure, weatherSpeed);
            resetAnim();
            initAnim();
          }
        
        
        
        
        
        
          // ----------------------------------------------------------
          // THREEJS Animation 
          // ----------------------------------------------------------
        
          function resetAnim() {
            scene = null;
            camera = null;
            renderer = null;
            $('canvas').remove();
          }
        
        
          function initAnim() {
        
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, containerW / containerH, 1, 1000);
            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            renderer.setSize(containerW, containerH);
            container.append(renderer.domElement);
        
            doWebGL();
        
        
        
            function doWebGL() {
        
        
        
              var TWO_PI = Math.PI * 2;
              var HALF_PI = Math.PI / 2;
              var QUARTER_PI = Math.PI / 4;
        
              var maxVLayers = 24;
              var minVLayers = 8;
              var vLayers = Math.round((maxVLayers - minVLayers) * weatherPressure + minVLayers);
        
              var tailResolution = 90; // segments in tail for full circumference
              var maxTailLength = 0.5; //complex: 0.25 /  small: 0.5 // Norm: 0.33
              var tailSegments = Math.round(tailResolution * maxTailLength);
              var vMaxRadius = containerH / 1.4;
              var vHeight = containerH * 1.4;
              var yOffset = -vHeight / 2 - 100; // half height and push toward bottom of canvas
        
              var camInit = 0.7; //HALF_PI;
              var camTarget = 0.5;
        
              var maxPlotRadius = 25; // size of dot
              var minPlotRadius = 7;
              var plotRadius = maxPlotRadius - Math.round((maxPlotRadius - minPlotRadius) * weatherPressure);
        
              var maxTailWeight = plotRadius; // half plot diameter 
        
              var minRotationIncrement = TWO_PI / 600;
              var maxRotationIncrement = TWO_PI / 150;
              var linearRotationPerFrame = (maxRotationIncrement - minRotationIncrement) * weatherSpeed + minRotationIncrement;
        
              var maxAnimationLength = 5; //20; // seconds
              var animationProgress = 0;
        
              var plotColor = 0xe1e1e1;
              var plotOpacity = 1;
        
              var tailColor = 0xe1e1e1;
              var tailOpacity = 0.33;
        
              //console.log("pressure: ", weatherPressure, vLayers, plotRadius);
              //console.log("speed: ", weatherSpeed, linearRotationPerFrame, ("{" + minRotationIncrement + " to " + maxRotationIncrement + "}" ));
        
        
              var vSpheregeometry = new THREE.SphereGeometry(plotRadius, 20, 20);
              var vSphereMaterial = new THREE.MeshBasicMaterial({ color: plotColor });
              var vTailMaterial = new THREE.MeshBasicMaterial({ color: tailColor, side: THREE.DoubleSide, wireframe: false, transparent: true, opacity: tailOpacity });
        
              var targetFrameRate = 30;
        
              var vSpheres = [];
              var vTails = [];
              var initRotations = [];
              var targetRotations = [];
        
              init();
        
        
              function init() {
                createVSpheres();
                createVTails();
              }
        
              function createVSpheres() {
                for (var i = 0; i < vLayers; i++) {
                  var sphereMesh = new THREE.Mesh(vSpheregeometry, vSphereMaterial);
                  scene.add(sphereMesh);
                  vSpheres[i] = sphereMesh;
                  initRotations[i] = getRandom(0, 1);
                  targetRotations[i] = getRandom(0, 1);
                }
              }
        
              function createVTails() {
                for (var i = 0; i < vLayers; i++) {
                  var vTailGeome.........完整代码请登录后点击上方下载按钮下载查看