![見出し画像](https://assets.st-note.com/production/uploads/images/12182469/rectangle_large_type_2_0d42d13841a5974171eb84b7a1cd38c3.png?width=1200)
Javascript!-モデリング!
なんでもできてしまいますね〜。自分の環境でやってみます!
チュートリアルをやっていきます。
まず基本的なHTMLを作っていきます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
そして、
<header></header>にはCDN URLを記述します。
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<body></body>には
<canvas class="zdog-canvas" width="240" height="240"></canvas>
と
<script></script>
を書きます。チュートリアルでは別ファイルでJavascriptを来ていますが、簡単、手軽にするために、同じファイルに書いていきます。
そしてDemoの通りに<script></script>に書いて
// create illo
let illo = new Zdog.Illustration({
// set canvas with selector
element: '.zdog-canvas',
});
// add circle
new Zdog.Ellipse({
addTo: illo,
diameter: 80,
stroke: 20,
color: '#636',
});
// update & render
illo.updateRenderGraph();
ブラウザでみてみると
出ました。そして、
function animate() {
// rotate illo each frame
illo.rotate.y += 0.03;
illo.updateRenderGraph();
// animate next frame
requestAnimationFrame( animate );
}
// start animation
animate();
と追加してみると、
簡単実装でいそうです。
さらにチュートリアルは続きますが、この辺で紹介を終わります。
この記事が気に入ったらサポートをしてみませんか?