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

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

代码语言：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:.........完整代码请登录后点击上方下载按钮下载查看