three+gsap实现圈圈三维扭转动画加载效果代码-html代码-BFW代码库

three+gsap实现圈圈三维扭转动画加载效果代码

代码语言：html

代码描述：three+gsap实现圈圈三维扭转动画加载效果代码

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

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

<head>

    <meta charset="UTF-8">


    <style>
        body {
            min-height: 100vh;
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
            position: relative;
            background: #F5F9FC;
        }
    </style>




</head>

<body>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.122.js"></script>
    <script>
        const {
            timeline,
            to
        } = gsap;

        const width = 440;
        const height = 440;

        let renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: true
        });


        renderer.setSize(width, height);
        renderer.setPixelRatio(window.devicePixelRatio || 1);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;

        document.querySelector('body').appendChild(renderer.domElement);

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

        camera.position.z = 700;

        let rectangle = function roundedRect(ctx, x, y, width, height, radius) {
            ctx.moveTo(x, y + radius);
            ctx.lineTo(x, y + height - radius);
            ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
            ctx.lineTo(x + width - radius, y + height);
            ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
            ctx.lineTo(x + width, y + radius);
            ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
            ctx.lineTo(x + radius, y);
            ctx.quadraticCurveTo(x, y, x, y + radius);
        };

        let rectangleReverse = function roundedRect(ctx, x, y, width, height, radius) {
            ctx.moveTo(x, y + height - radius);
            ctx.lineTo(x, y + radius);
            ctx.quadraticCurveTo(x, y, x + radius, y);
            ctx.lineTo(x + width - radius, y);
            ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
            ctx.lineTo(x + width, y + height - radius);
            ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
            ctx.lineTo(x + radius, y + height);
            ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        };

        let rect = new THREE.Shape();
        rectangle(rect, -72, -72, 144, 144, 66);
        var rectSmall = new THREE.Path();
        rectangleReverse(rectSmall, -60, -60, 120, 120, 52);
        rect.holes.push(rectSmall);

        let shape = new THREE.ExtrudeBufferGeometry(rect, {
            curveSegments: 24,
            depth: 8,
            bevelEnabled: true,
            bevelSegments: 10,
            steps: 10,
            bevelSize: 6,
            bevelThickness: 6
        });


        const geometry = new THREE.Geometry();
        geometry.fromBufferGeometry(shape);
        geometry.mergeVertices();
    .........完整代码请登录后点击上方下载按钮下载查看