无穷无尽特效-html代码-BFW代码库

无穷无尽特效

代码语言：html

所属分类：三维

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
    <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
    <title>CodePen - Infinity</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            font-family: 'Ropa Sans', sans-serif;
            background-color: #9f8cfc;
            color: #1b4594;
            box-sizing: border-box;
            overflow: hidden;
            cursor: -webkit-grab;
            cursor: -moz-grab;
        }

        canvas {
            width: 100%;
            height: 100%;
        }

        h1 {
            font-size: 16pt;
            padding: 0;
            margin: 0;
            color: inherit;
        }

        a {
            color: inherit;
            text-decoration: none;
            padding: 10px;
            transition: background-color .3s, color .3s;
        }

        a:hover {
            color: #fff;
            background-color: #1b4594;
        }

        .dg.ac {
            z-index: 3 !important;
        }

        .credits {
            margin: 20px;
            position: absolute;
            z-index: 1;
            bottom: 10px;
            width: 100%;
        }
        .credits h1 {
            width: 60%;
            line-height: 1.4;
        }

@media screen and (min-width: 768px) {
            .credits {
                margin-left: 20px;
                margin-top: 20px;
                position: absolute;
                z-index: 1;
                bottom: inherit;
                width: 100%;
            }
            .credits h1 {
                font-size: 20pt;
                width: auto;
                line-height: 1.4;
            }
        }

    </style>
    <script>
        window.console = window.console || function(t) {};
    </script>
    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
        }
    </script>
</head>
<body translate="no">
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Infinity</title>
        <link href="https://fonts.googleapis.com/css?family=Ropa+Sans&display=swap" rel="stylesheet">
        <script src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>
        <script src="http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js"></script>
        <script src="http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
        <script src="http://repo.bfw.wiki/bfwrepo/js/dat.gui.js"></script>
    </head>
    <body>
        <main class="credits">

        </main>
    </body>
</html>

<script>
    const hexToRgbTreeJs = hex => {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

        return result ? {
            r: parseInt(result[1], 16) / 255,
            g: parseInt(result[2], 16) / 255,
            b: parseInt(result[3], 16) / 255
        }:
        null;
    };

    const radians = degrees => {
        return degrees * Math.PI / 180;
    };

    class App {
        constructor() {
            this.groundColor = '#9f8cfc';
            this.coneColor = '#7f79f0';
            this.spotLightColor = '#ffffff';
            this.ambientLightColor = '#ffffff';
            this.innerTubeColor = '#293b8e';
            this.ground = {};
            this.groupC.........完整代码请登录后点击上方下载按钮下载查看