見出し画像

Javascript！-モデリング!

donguri

なんでもできてしまいますね〜。自分の環境でやってみます！

チュートリアルをやっていきます。

まず基本的な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();

と追加してみると、

簡単実装でいそうです。

さらにチュートリアルは続きますが、この辺で紹介を終わります。

この記事が気に入ったらサポートをしてみませんか？