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
















网友评论0