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

网友评论0