zdog实现三维可旋转可爱小鸡效果代码-html代码-BFW代码库

zdog实现三维可旋转可爱小鸡效果代码

代码语言：html

所属分类：三维

代码描述：zdog实现三维可旋转可爱小鸡效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
        html, body {
            height: 100%;
            overflow-x: hidden;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background: #FDB;
        }

        .canvas {
            display: block;
            cursor: move;
            background-color: #FDB;
        }

        .instructions {
            position: absolute;
            top: 1rem;
            left: 1rem;
            display: block;
            margin: 0;
            color: #a14a4a;
        }
    </style>



</head>

<body translate="no">
    <p class="instructions">
        (drag to rotate)
    </p>
    <canvas class="canvas" width="360" height="360" role="img" aria-label="Zdog Rowlet, an owl pokemon with a green bow tie spinning slowly"></canvas>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>

    <script>
        let brown = "#E4B883";
        let cream = "#ffe7c2";
        let creamShadow = "#f7dbae";
        let orange = '#E3945B';
        let green = '#668476';
        let black = '#333';
        let TAU = Zdog.TAU;

        let isSpinning = true;

        let illo = new Zdog.Illustration({
            element: ".canvas",
            rotate: {
                x: -Zdog.TAU / 16
            },
            dragRotate: true,
            onDragStart: function () {
                isSpinning = false;
            }
        });


        let tail = new Zdog.Ellipse({
            addTo: illo,
            width: 60,
            height: 120,
            stroke: 10,
            fill: true,
            color: green,
            translate: {
                y: 40, z: -80
            },
            rotate: {
                x: -TAU / 25
            }
        });


        let body = new Zdog.Shape({
            addTo: illo,
            stroke: 200,
            color: brown
        });


        let bodyGroup = new Zdog.Group({
            addTo: body
        });


        let legAnchor = new Zdog.Anchor({
            addTo: bodyGroup,
            translate: {
                x: -30, y: 50, z: 0
            }
        });


        let leg = new Zdog.Hemisphere({
            addTo: legAnchor,
            diameter: 125,
            color: cream,
            backface: false,
            rotate: {
                x: -TAU / 4
            }
        });


        leg.copy({
            translate: {
                x: 60
            }
        });


        let toe = new Zdog.Cone({
            addTo: legAnchor,
            diameter: 5,
            length: 20,
            stroke: 10,
            color: orange,
            translate: {
                y: 65
            },
            rotate: {
                x: -TAU / 32, y: TAU / 8
            }
        });


        toe.copy({
            translate: {
                x: 5, y: 65
            },
            rotate: {
                x: -TAU / 32, y: -TAU / 32
            }
        });


        toe.copy({
            translate: {
                x: 70, y: 65
            },
            rotate: {
                x: -TAU / 16, y: -TAU / 8
            }
        });


        toe.copy({
            translate: {
                x: 65, y: 65
            },
            rotate: {
                x: -TAU / 32, y: TAU / 32
            }
        });


        let wingAnchor = new Zdog.Anchor({
            addTo: bodyGroup,
            translate: {
                x: 0, y: 30, z: 100
            }
        });


        let feather = new Zdog.Ellipse({
            addTo: wingAnchor,
            width: 20,
            height: 80,
            stroke: 10,
            fill: true,
            color: brown,
            backface: false,
            translate: {
                x: -50, z: -40
            },
            rotate: {
                x: -TAU / 16
            }
        });


        feather.copy({
          .........完整代码请登录后点击上方下载按钮下载查看