无穷无尽特效-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.groupCones = new THREE.Object3D();
            this.tiles = [];
            this.radius = .5;
            this.angle = 0;
            this.gridSize = 12;
            this.cols = this.gridSize;
            this.rows = this.gridSize;
            this.gui = new dat.GUI();

            this.amplitude = 0;
            this.frequency = 2;
            this.wavelength = 0;
            this.speed = 6000;
            this.position = 10;

            this.init();

            const wave = this.gui.addFolder('Wave');
            wave.add(this, 'amplitude', -4, 4).onChange(amplitude => {
                this.amplitude = amplitude;
            });

            wave.add(this, 'wavelength', -200, 200).onChange(wavelength => {
                this.wavelength = wavelength;
            });

            wave.add(this, 'frequency', 0, 20).onChange(frequency => {
                this.frequency = frequency;
            });

            window.addEventListener('resize', this.onResize.bind(this), {
                passive: true
            });
        }

        drawWave() {
            for (let i = 0; i < this.cols; i++) {
                for (let j = 0; j < this.rows; j++) {
                    const distance = this.distance(j, i, -this.rows, -this.cols);
                    const offset = this.map(distance, -this.wavelength, 200, -140, this.wavelength);
                    const angle = this.angle + offset;
                    const y = this.map(Math.sin(angle), -1, 1, -4, this.amplitude);

                    this.tiles[i][j].position.y = y;
                }
            }


            this.angle -= this.frequency / 50;
        }

        addPointLight(params) {
            const pointLight = new THREE.PointLight(params.color, params.intensity);
            pointLight.position.set(params.position.x, params.position.y, params.position.z);

            this.scene.add(pointLight);
        }

        init() {
            this.createScene();
            this.createCamera();
            this.addAmbientLight(this.ambientLightColor);
            this.addSpotLi.........完整代码请登录后点击上方下载按钮下载查看