SVGやCanvasで実装した平らな要素を3Dモデルでレンダリングできる超軽量JavaScriptライブラリ -Zdog

サイト構築 -JavaScript

Post on:2019年6月7日

Zdogの特徴

Zdogは<canvas>とSVG用の3D JavaScriptエンジンです。 Zdogを使用すると、3DモデルをWeb上でデザインしてレンダリングすることができます。

軽量ライブラリ

Zdogは、28KbのJavaScriptです。
滑らかなレンダリング

丸みをおびた美しい形でレンダリングされます、ジャギーはありません。
簡単

モデリングは単純明快な宣言型APIで行われます。

Zdogのデモ

Zdogにはたくさんのデモが用意されています。その中の一部を掲載します。
アニメーションで動くデモ、クリックやドラッグで操作できるデモがあります。

See the Pen
Zdog - model tutorial complete by Dave DeSandro (@desandro)
on CodePen.

See the Pen
Solid shifter by Dave DeSandro (@desandro)
on CodePen.

See the Pen
Happy town round 3D by Dave DeSandro (@desandro)
on CodePen.

See the Pen
Kirby round 3D by Dave DeSandro (@desandro)
on CodePen.

Zdogの使い方

Zdogの使い方は、ドキュメントが用意されています。

Getting started -Zdog

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>

1	<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>

Step 2: HTML

<canvas>または<svg>要素に幅と高さを定義し、classを与えます。

<canvas class="zdog-canvas" width="240" height="240"></canvas>

1	<canvas class="zdog-canvas" width="240" height="240"></canvas>

Step 3: JavaScript

上記のサークルの基本的なアニメーションのないデモの実装例です。

// zdog-demo.js

// 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();