zdog实现水晶球内房屋下雪动画旋转效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：zdog实现水晶球内房屋下雪动画旋转效果代码

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

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

<head>

    <meta charset="UTF-8">





    <style>
        /*responsive canvas css from https://codepen.io/desandro/pen/aqYXoa*/
        
        html { height: 100%; }
        
        body {
          min-height: 100%;
          margin: 0;
        }
        
        canvas {
          display: block;
          width: 100%;
          height: 100%;
          /*background:#001b47;*/
          background:radial-gradient(circle,white 5%,#001b47 40%);
        }
    </style>


</head>

<body>
    <canvas class="zdog-canvas"></canvas>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
    <script>
        var sceneSize = 80;
        var particles = [];
        var diameter = 24;
        
        // create illo
        const illo = new Zdog.Illustration({
          // set canvas with selector
          element: '.zdog-canvas',
          zoom: 4,
          resize: 'fullscreen',
          rotate: { x: -Zdog.TAU / 3 },
          onResize: function (width, height) {
            this.zoom = Math.floor(Math.min(width, height) / sceneSize);
          } });
        
        
        let hillGroup = new Zdog.Group({
          addTo: illo });
        
        
        
        let domeSnow = new Zdog.Hemisphere({
          addTo: hillGroup,
          diameter: 50,
          stroke: false,
          color: '#e3f1f6',
          backface: '#fff' });
        
        
        let dome = new Zdog.Hemisphere({
          addTo: hillGroup,
          diameter: 50,
          // fill enabled by default
          // disable stroke for crisp edge
          stroke: false,
          color: 'rgba(227,241,246,0.5)',
          backface: 'rgba(227,241,246,0.5)',
          rotate: { y: Zdog.TAU / 2 },
          backface: false });
        
        
        
        let snowflake = new Zdog.Shape({
          addTo: hillGroup,
          // no path set, default to single point
          stroke: 1,
          color: 'white',
          translate: { z: -24 } });
        
        
        //tree
        let tree = new Zdog.Group({
          addTo: hillGroup,
          rotate: { y: Zdog.TAU / 2 },
          translate: { x: 15 },
          backface: 'false' });
        
        
        
        let firstCone = new Zdog.Cone({
          addTo: tree,
          diameter: 5,
          length: 5,
          stroke: false,
          color: '#072702',
          translate: { y: 0, z: 0, x: 0 } });
        
        
        let secondCone = new Zdog.Cone({
          addTo: tree,
          diameter: 5,
          length: 5,
          stroke: false,
          color: '#073600',
          translate: { x: 0, y: 0, z: 2 } });
        
        
        
        tree.copyGraph({
          translate: { x: -10, y: -15 } });
        
        
        tree.copyGraph({
          translate: { x: -17, y: 10 } });
        
        
        tree.copyGraph({
          translate: { x: 8, y: 15 } });
        
        
        
        //tree end
        
        var housewidth = 13;
        var househeight = 15;
        var housedepth = 10;
        
        let houseGroup = new Zdog.Group({
          addTo: hillGroup,
          translate: { z: -5 },
          rotate: { y: Zdog.TAU / 2 /*z:-Zdog.TAU/6*/ },
          backface: false });
        
        
        let house = new Zdog.Box({
          addTo: houseGroup,
          width: housewidth,
          height: househeight,
          depth: housedepth,
          stroke: false,
          backface: '#6a5745',
          color: '#6a5745' });
        
        
        let curvedPathGroup = new Zdog.Group({
          addTo: houseGroup,
          translate: { z: -5 }
          //rotate: { y: Zdog.TAU/2},
        });
        
        let curvedPath = new Zdog.Ellipse({
          addTo: curvedPathGroup,
          diameter: 5,
          height: 4,
          quarters: 2, // semi-circle
          translate: { x: -1, y: -10 },
          // rotate semi-circle to point up
          fill: true,
          color: '#c2dfe0',
          stroke: false });
        
        
        curvedPath.copyGraph({
          translate: { x: 0, y: -13 },
          height: 7,
          rotate: { y: Zdog.TAU / 2 } });
        
        
        curvedPath.copyGraph({
          translate: { x: 0, y: -16.5 },
          height: 7 });
        
        
        
        let rock = new Zdog.Hemisphere({
          addTo: houseGroup,
          diameter: 2,
          stroke: false,
          color: 'dimgrey',
          backface: 'black',
          //rotate: { y: Zdog.TAU/2 },
          translate: { x: -2, y: -15, z: -5 } });
        
        
        rock.copyGraph({
          translate: { x: 2, y: -16, z: -5 } });
        
        
        rock.copyGraph({
          diameter: 1,
          translate: { x: 0, y: -20, z: -5 } });
        
        
        rock.copyGraph({
          diameter: 1,
          translate: { x: 1.5, y: -10, z: -5 } });
        
        
        rock.copyGraph({
          diameter: 1,
          translate: { x: 0.5, y: -13, z: -5 } });
        
        
        rock.copyGraph({
          diameter: 1,
          translate: { x: -1, y: -10, z: -5 } });
        
        
        
        
        let doorBlock = new Zdog.Box({
          addTo: houseGroup,
          width: housewidth / 9,
          height: househeight / 2.5,
          depth: housedepth / 1.5,
          stroke: false,
          backface: '#554231',
          color: '#554231',
          rotate: { z: Zdog.TAU / 4 },
          translate: { x: 0, y: -(househeight / 2) - 0.5, z: -2 } });
        
        
        let door = new Zdog.Box({
          addTo: doorBlock,
          width: 0.5,
          height: househeight / 4,
          depth: housedepth / 2,
          stroke: false,
          color: '#c7905a',
          translate: { x: -1, z: -1 } });
        
        
        let doorTriangles = new Zdog.Shape({
          addTo: houseGroup,
          path: [
          //triangle
          { move: { x: housewidth / 4, y: -househeight / 1.5, z: 0 } },
          { x: 0, y: -househeight / 1.5, z: housedepth / 3 },
          { x: -housewidth / 4, y: -househeight / 1.5, z: 0 },
          { x: housewidth / 4, y: -househeight / 1.5, z: 0 }
          //second triangle
          ],
          fill: true,
          // closed by default
          stroke: 0,
          color: 'brown' });
        
        
        let doorRectangles = new Zdog.Shape({
          addTo: doorTriangles,
          path: [
          //roof border
          { move: { x: 0, y: -househeight / 2.5, z: housedepth / 3.3 } },
          { x: 0, y: -househeight / 1.43, z: housedepth / 3.3 },
          { x: housewidth / 3.3, y: -househeight / 1.43, z: 0 },
          { x: housewidth / 3.3, y: -househeight / 2.5, z: 0 },
          //right roof border
          { move: { x: 0, y: -househeight / 2.5, z: housedepth / 3.3 } },
          { x: 0, y: -househeight / 1.43, z: housedepth / 3.3 },
          { x: -housewidth / 3.3, y: -househeight / 1.43, z: 0 },
          { x: -housewidth / 3.3, y: -househeight / 2.5, z: 0 }
          //vertical rectangle divide
          /*{ move: { x: 0, y: 6, z:  housedepth } },
          { x:  0, y:  -2 , z:  housedepth},  
          { x:  -2, y:  -2 , z:  housedepth/3},  
          { x:  -2, y:  2 , z:  housedepth/3},*/],
        
          fill: true,
          // closed by default
          stroke: 0.5,
          color: 'maroon' });
        
        
        let doorKnob = new Zdog.Hemisphere({
          addTo: door,
          diameter: 1,
          stroke: false,
          color: 'gold',
          backface: 'gold',
          backface: false });
        
        
        
        let houseWall = new Zdog.Rect({
          addTo: houseGroup,
          width: housewidth / 1.01,
          height: housedepth - 1,
          color: "#6a5745",
          fill: true,
          stroke: false,
          rotate: { x: -Zdog.TAU / 4 },
          backface: false,
          translate: { x: 0, y: -househeight / 2, z: -1 } });
        
        
        let bottomChimney = new Zdog.Box({
          addTo: houseGroup,
          width: 5,
          hei.........完整代码请登录后点击上方下载按钮下载查看