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