zdog绘制一个三维奔跑中男女卡通效果代码
代码语言:html
所属分类:三维
代码描述:zdog绘制一个三维奔跑中男女卡通效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { height: 100%; } body { min-height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; background: #09D; font-family: sans-serif; text-align: center; } canvas { display: block; margin: 0px auto 20px; cursor: move; } a { color: white; } a:hover { color: #606; } button { background: #848; color: white; font-size: 14px; font-family: inherit; border: none; border-radius: 3px; padding: 8px 10px; } button:hover { background: #606; cursor: pointer; } </style> </head> <body > <div class="container"> <canvas class="illo"></canvas> <p><a >Original illustration by Robin Davey</a></p> <p><button class="reset-button">Reset</button></p> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script> <script > // Made with Zdog var illoElem = document.querySelector('.illo'); var illoSize = 128; var minWindowSize = Math.min(window.innerWidth - 20, window.innerHeight - 60); var zoom = Math.floor(minWindowSize / illoSize); illoElem.setAttribute('width', illoSize * zoom); illoElem.setAttribute('height', illoSize * zoom); var isSpinning = true; var TAU = Zdog.TAU; var sceneStartRotation = { y: -TAU / 8 }; var illo = new Zdog.Illustration({ element: illoElem, zoom: zoom, rotate: sceneStartRotation, dragRotate: true, onDragStart: function () { isSpinning = false; } }); var quarterTurn = Math.sin(TAU / 8); // ----- colors ----- // var beigeDark = '#F96'; var beigeLight = '#FC9'; var skinDark = '#F66'; var skinMedium = '#F88'; var skinLight = '#FAA'; var navy = '#036'; var midnight = '#003'; var auburn = '#903'; var red = '#C33'; var sky = '#09D'; var offWhite = '#FFD'; var white = 'white'; var blueDark = '#66C'; var bluePale = '#CCF'; // -- models --- // var ground = new Zdog.Anchor({ addTo: illo, translate: { y: 56 } }); // ----- dude ----- // (function () { var dude = new Zdog.Anchor({ addTo: ground, translate: { x: -24, z: -12 } }); var hipX = 8 / quarterTurn / 2; var hips = new Zdog.Shape({ path: [ { x: -hipX }, { x: hipX }], addTo: dude, translate: { y: -49 }, rotate: { x: TAU / 16 }, stroke: 8, color: beigeLight }); // right thigh var rightThigh = new Zdog.Shape({ path: [ { y: 0 }, { y: 18 }], addTo: hips, translate: { x: -hipX }, stroke: 8, color: beigeLight }); // right tight line var rightThighLine = rightThigh.copy({ addTo: rightThigh, translate: { x: -4 }, color: white, stroke: 0.5 }); var shinEnd = { y: 22 }; var rightShin = rightThigh.copy({ path: [ { y: 0 }, shinEnd], addTo: rightThigh, translate: { y: 18 } }); // right shin line rightThighLine.copy({ path: [ { y: -2 }, shinEnd], addTo: rightShin }); var rightAnkle = new Zdog.Shape({ path: [ { y: 3 }, { y: 4 }], addTo: rightShin, translate: shinEnd, color: skinMedium, stroke: 6 }); var leftThigh = rightThigh.copy({ translate: { x: hipX }, color: beigeDark }); // left thigh line rightThighLine.copy({ addTo: leftThigh, translate: { x: 4 }, color: beigeLight }); var leftShin = rightShin.copy({ addTo: leftThigh, rotate: { x: -TAU / 4 - hips.rotate.x }, color: beigeDark }); // left shin line leftShin.copy({ addTo: leftShin, translate: { x: 4 }, rotate: {}, color: beigeLight, stroke: rightThighLine.stroke }); var leftAnkle = rightAnkle.copy({ addTo: leftShin, color: skinDark }); // shoes [true, false].forEach(function (isRight) { var shoeAngleX = isRight ? -TAU / 16 : -hips.rotate.x; var shoe = new Zdog.RoundedRect({ width: 2, height: 10, cornerRadius: 2, addTo: isRight ? rightAnkle : leftAnkle, translate: { y: 6, z: 4 }, rotate: { x: -TAU / 4 - shoeAngleX }, color: isRight ? white : offWhite, fill: true, stroke: 6 }); // laces var lacesGroup = new Zdog.Group({ addTo: shoe, translate: { z: -3 } }); var shoeLace = new Zdog.Shape({ path: [{ x: -1 }, { x: 1 }], scale: { x: 2 }, addTo: lacesGroup, translate: { y: -2 }, color: blueDark, stroke: 1 }); shoeLace.copy({ translate: { y: -4 } }); // HACK, add invisible shape so laces better render on top new Zdog.Shape({ visible: false, addTo: lacesGroup, translate: { y: 4 } }); // soles new Zdog.RoundedRect({ width: 6, height: 13, cornerRadius: 3, addTo: shoe, translate: { z: 3.5 }, // rotate: { x: -TAU/4 }, stroke: 1, fill: true, color: blueDark }); }); var torsoX = 6 / quarterTurn; var torso = new Zdog.Shape({ path: [ { x: -torsoX }, { x: torsoX }], addTo: dude, translate: { y: -59, z: -6 }, color: navy, stroke: 16 }); var shoulderX = torsoX + 1.5; var rightShoulder = new Zdog.Shape({ path: [ { y: 0 }, { y: 14 }], addTo: torso, translate: { x: -shoulderX, y: -3 }, rotate: { x: -TAU / 16, z: TAU / 8 }, stroke: 10, color: navy }); var leftShoulder = rightShoulder.copy({ translate: { x: shoulderX, y: -3 }, rotate: { x: TAU * 3 / 16, z: -TAU / 32 }, color: midnight }); var rightArm = new Zdog.Shape({ path: [ { y: 0 }, { y: 14 }], addTo: rightShoulder, translate: { y: 16 }, rotate: { x: 2.12, z: -0 }, stroke: 8, color: skinMedium }); var leftArm = rightArm.copy({ addTo: leftShoulder, color: skinDark, rotate: { x: TAU / 4, z: TAU / 8 } }); var rightHand = new Zdog.Shape({ addTo: rightArm, translate: { x: -0.5, y: 14, z: 1 }, stroke: 10, color: skinMedium }); // left hand rightHand.copy({ addTo: leftArm, color: skinDark }); // jacketZip new Zdog.Ellipse({ addTo: torso, diameter: torso.stroke, quarters: 1, rotate: { y: TAU / 4, x: -TAU / 32 }, color: sky, stroke: 0.5 }); var neckY = -torso.stroke / 2; var neck = new Zdog.Shape({ path: [{ y: neckY }, { y: neckY - 4 }], addTo: torso, // translate: { y: } rotate: { x: TAU / 16, y: TAU * 3 / 16 }, stroke: 6, color: skinMedium }); // chin var chin = new Zdog.Shape({ addTo: neck, translate: { y: neckY - 5, z: 2 }, stroke: 8, color: skinMedium }); // forehead var forehead = new Zdog.Ellipse({ diameter: 2, addTo: chin, translate: { y: -4 }, stroke: 4, color: skinMedium }); // hair big new Zdog.Shape({ path: [ { y: -1 }, { y: -7 }], addTo: chin, translate: { x: -2, y: -2, z: -3 }, stroke: 4, color: auburn }); // hair small new Zdog.Shape({ path: [ { y: 0 }, { y: -6 }], addTo: chin, translate: { x: 1.25, y: -2, z: -3 }, stroke: 2.5, color: red }); // hair back new Zdog.Ellipse({ diameter: 3, addTo: chin, translate: { y: -4, z: -4 }, stroke: 4, color: auburn }); // smile new Zdog.Ellipse({ addTo: chin, quarters: 2, translate: { y: -1.5, z: 3 }, rotate: { z: TAU / 4 }, scale: 3, fill: true, stroke: 0.5, color: white, closed: true }); // eyes var eye = new Zdog.Ellipse({ addTo: forehead, quarters: 2, scale: 1, translate: { x: -1, y: 0.5, z: 2 }, rotate: { z: -TAU / 4 }, closed: false, color: midnight, stroke: 0.38, fill: false }); eye.copy({ translate: { x: 1, y: 0.5, z: 2 } }); var ear = new Zdog.Ellipse({ diameter: 1.5, addTo: forehead, translate: { x: 3.5, y: 1, z: -1 }, rotate: { y: -TAU / 8 }, stroke: 1, color: skinMedium, fill: true }); ear.copy({ translate: { x: -3.5, y: 1, z: -1 }, rotate: { y: TAU / 8 } }); })(); // lady (function () { var lady = new Zdog.Anchor({ addTo: ground, translate: { x: 24, z: 12 } }); var hips = new Zdog.Shape({ addTo: lady, translate: { y: -38 }, stroke: 15, color: navy }); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0