js实现三维甜甜圈无限穿越动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现三维甜甜圈无限穿越动画效果代码，按住鼠标左键会向相反方向。

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
       
        <style>

          *, *::before, *::after {
                margin: 0;
                padding: 0;
                border: 0;
                box-sizing: border-box;
            }

            *:focus {
                outline: none;
            }

            body {
                height: 100vh;
                overflow: hidden;
            }

            canvas {
                touch-action: none;
            }

            #stats {
                position: absolute;
                bottom: 8px;
                left: 8px;
                border-radius: 5px;
                opacity: 1 !important;
                outline: 1px solid #000;
            }

            #stats::after {
                top: -85px;
                left: -25px;
                position: absolute;
                content: '';
                display: block;
                width: 120px;
                aspect-ratio: 1066.6667 / 754.66669;
             
            }

            #stats #fps, #stats #ms {
                background-color: #fefefe !important;
            }

            #stats #fps #fpsText, #stats #ms #msText {
                color: #000 !important;
            }

            #stats #fps #fpsGraph, #stats #ms #msGraph {
                border-radius: 5px;
                overflow: hidden;
            }

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

            #stats #ms #msGraph {
                background-color: #78d5fd !important;
            }

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

            #stats #ms #msGraph span {
                background-color: #5cb1d0 !important;
            }

            header {
                position: absolute;
                top: 8px;
                left: 8px;
                font-family: 'Homer Simpson Revised', sans-serif;
                font-size: 36px;
                color: #e83032;
                text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
            }
        </style>
      
    </head>
    <body translate="no">
        <header>Flying Donuts V2</header>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
        <script >
            'use strict';

            //---

            console.clear();

            //---

            const DEBUG = false;

            const MATH_PI = Math.PI;
            const MATH_PI180 = MATH_PI / 180;
            const MATH_PI2 = MATH_PI * 2;

            let stats = null;

            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;

            let depthBuffer = null;
            let depthWidth = 0;
            let depthHeight = 0;

            const center = {
                x: w * 0.5,
                y: h * 0.5
            };
            const border = {
                left: 1,
                top: 1,
                right: w,
                bottom: h
            };

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

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

            //---

            const rotationSpeed = -1.00;
            const rotationSpeedFactor = {
                x: rotationSpeed / center.x,
                y: rotationSpeed / center.y
            };

            const fov = 500;

            let torusSceneObjectsHolder = [];
            let torusSpeed = 10;
            const torusSpeedMin = torusSpeed;
            const torusSpeedMax = 120;
            let torusRotation = 0;
            let torusRotationSpeed = 0.25;
            const torusRotationSpeedMin = torusRotationSpeed;
            const torusRotationSpeedMax = torusRotationSpeed * 4;

            const torusCount = 512;
            const torusDiameter = 104;
            const torusMaxZ = -fov + torusDiameter;
            const torusDistance = 8000;

            const torusGlazeColors = [{
                r: 255,
                g: 143,
                b: 188
            }, {
                r: 254,
                g: 223,
                b: 9
            }, {
                r: 126,
                g: 55,
                b: 73
            }, {
                r: 254,
                g: 254,
                b: 254
            }, {
                r: 0,
                g: 194,
                b: 215
            }, {
                r: 103,
                g: 194,
                b: 46
            }, {
                r: 247,
                g: 0,
                b: 45
            }];
            const torusDoughColors = [{
                r: 251,
                g: 171,
                b: 24
            }/*, { r: 204, g: 144, b: 108 }*/
            ];
            const torusMaxRadialSegments = 12;
            const torusMaxTubularSegments = 20;
            const torusQualityReductionFactor = 1.3;
            const torusQualityLevels = 5;
            const torusModelMappings = [
            {
                percent: 0.00,
                index: 0
            }, {
                percent: 0.34,
                index: 1
            }, {
                percent: 0.54,
                index: 2
            }, {
                percent: 0.74,
                index: 3
            }, {
                percent: 0.84,
                index: 4
            }];

            const torusModelIndexGet = distancePercent => {

                for (let i = torusModelMappings.length - 1; i >= 0; i--) {

                    if (distancePercent >= torusModelMappings[i].percent) {

                        return torusModelMappings[i].index;

                    }

                }

                return 0;

            }
            ;

            const lightRotationSpeed = -2.00;
            const lightRotationSpeedFactor = {
                x: 0,
                y: 0
            };
        .........完整代码请登录后点击上方下载按钮下载查看