zdog实现一个三维线框礼物盒旋转交互效果代码
代码语言:html
所属分类:三维
代码描述:zdog实现一个三维线框礼物盒旋转交互效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { height: 100%; } body { padding: 0; margin: 0; height: 100vh; width: 100%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; background: #005200; } .illo { display: block; cursor: move; } </style> </head> <body > <div class="container"> <svg class="illo" width="320" height="320"></svg> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script> <script > // ----- variables ----- // let isSpinning = true; let giftString = 1; let stringColor = '#FFFFFF'; // ----- model ----- // var illo = new Zdog.Illustration({ element: '.illo', zoom: 4, rotate: { x: -Zdog.TAU / 4, y: -Zdog.TAU / 3 }, dragRotate: true, onDragStart: function () { isSpinning = false; } }); let box = new Zdog.RoundedRect({ addTo: illo, width: 48, height: 32, cornerRadius: 1, stroke: giftString, color: stringColor }); box.copy({ height: 48, rotate: { x: -Zdog.TAU / 4 } }); box.copy({ rotate: { y: -Zdog.TAU / 4 } }); let anchor = new Zdog.Anchor({ addTo: illo, translate: { x: 0, y: -16, z: 0 }, rotate: { y: Zdog.TAU / 5 } }); new Zdog.Ellipse({ addTo: anchor, diameter: 3, stroke: giftString, color: stringColor, translate: { x: 1, y: -1, z: -1 }, rotate: { x: Zdog.TAU / 4 } }); let loop = new Zdog.Shape({ addTo: anchor, path: [ { x: 0, y: 0 }, // start { bezier: [ { x: 30, y: -20, z: -30 }, // s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0