Stats实现窗帘布料鼠标悬浮摆动重力交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：Stats实现窗帘布料鼠标悬浮摆动重力交互效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
/*
global
*/
*, *::before, *::after {
    margin: 0;
    padding:  0;
    border:  0;
    box-sizing:  border-box;
}

*:focus {
    outline: none;
}

body {
    height: 100vh;
    overflow: hidden;
    background-color: rgb(35, 0, 0);
}

canvas {
    touch-action: none;
}

/*
stats
*/
#stats {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1 !important;
}

#stats #fps {
    background-color: #000 !important;
}

#stats #fps #fpsText {
    color: #eee !important;
}

#stats #fps #fpsGraph {
    background-color: #2FA1D6 !important;
}

#stats #fps #fpsGraph span {
    background-color: #303030 !important;
}

/*
dat gui
*/
div.dg {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10px;
}

.dg.main {
    margin-right: 0;
}

.dg li.folder {
    background: #000;
}

.dg .cr,
.dg .c .slider,
.dg .c input[type=text] {
    transition: background 0.33s ease;
}

.dg .cr:hover {
    background: #111;
}
</style>

  
</head>

<body translate="no">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script >
'use strict';

let gui = null;
let stats = null;
let statsShow = false;

let w = 0;
let h = 0;

let animationFrame = null;
let isTouchDevice = false;

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d', { willReadFrequently: false, alpha: false });

let imageData = null;
let data = null;
let imageDataWidth = 0;
let imageDataBufferUint32 = null;

const center = { x: w * 0.5, y: h * 0.5 };

let borderTop = 0;
let borderBottom = 0;
let borderLeft = 0;
let borderRight = 0;

let pointerPos = { x: center.x, y: center.y };
let pointerPosFollow = { x: center.x, y: center.y };
let pointerPosFollowSpeed = 5;
let pointerDownButton = -1;
let pointerActive = false;
let pointerMoveTimeout;

const pointerMoveTimeoutTime = 2500;

//---

let clearColor32 = 0;

let colorBackgroundR = 35;
let colorBackgroundG = 0;
let colorBackgroundB = 0;

//---

const WIRE_POINT_PINNED = 1;

let wireCount = 768;
let wireJoints = 32;
let wireIterations = 8;
let wireGravity = 0.65;
let wireFriction = 0.97; // 0.938

let wirePointFollowSpeed = 32;

const wirePointMouseDistanceSensitivitySpeed = 2.5;
let wirePointMouseDistanceSensitivityMax = 512;
let wirePointMouseDistanceSensitivityMin = 256;
let wirePointMouseDistanceSensitivity = wirePointMouseDistanceSensitivityMin;

//---

let wirePointsX = null;
let wirePointsY = null;
let wirePointsOldX = null;
let wirePointsOldY = null;
let wirePointsFlag = null;
let wirePointsInitialX = null;
let wirePointsInitialY = null;

let wireJointsPointA = null;
let wireJointsPointB = null;
let wireJointsLength = null;

let wirePointStart = null;
let wirePointCount = null;
let wireJointStart = null;
let wireJointCount = null;

let wireZ = null;

let wireJointColorR = 210;
let wireJointColorG = 85;
let wireJointColorB = 0;
let wirePointColorR = 255;
let wirePointColorG = 125;
let wirePointColorB = 0;

//---

let curtainTrianglesPointA = null;
let curtainTrianglesPointB = null;
let curtainTrianglesPointC = null;

let curtainStripShade = null;

let curtainColorR = 210;
let curtainColorG = 0;
let curtainColorB = 0;

let curtainLightWavePrimaryFrequency = 0.45;
let curtainLightWavePrimaryAmplitude = 18;
let curtainLightWaveSecondaryFrequency = 1.1;
let curtainLightWaveSecondaryAmplitude = 4;

// let curtainColorCount = 0;
let curtainTrianglesPerWireStrip = 0;

//---

let lightX = 0.4;
let lightY = 0.0;
let lightZ = 1.0;

let lightAmbient = 0.35;
let lightDiffuse = 0.65;

//---

let renderDebugJoints = false;
let renderDebugPoints = false;
let renderDebugCircles = false;
let renderDebugTriangles = false;
let renderDebugDiagonalJoints = false;
let renderDebugQuads = false;

let renderShadedJoints = true;
let renderShadedTriangles = false;
let renderShadedCheckerboard = false;

//---

let introPath = [];
let introInterval = null;
let introIndex = 0;
let introPathCoordinatesCount = 512;
let introSpeedBasis = 10;
let introSpeed = introSpeedBasis;
let introEnabled = true;

//---

function init() {

  isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;

  //---

  canvas.oncontextmenu = event => {

    event.preventDefault();

  };

  if (isTouchDevice === true) {

    canvas.addEventListener('touchmove', cursorMoveHand.........完整代码请登录后点击上方下载按钮下载查看