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

Post on:2019年6月7日

sponsorsr

面白そうなJavaScriptがリリースされました！
SVGやCanvasで実装した平らな要素をブラウザ上に3Dモデルでレンダリングすることができる超軽量JavaScriptライブラリを紹介します。レンダリングされた形状は3D空間に存在するかのようにクリックやドラッグなどで操作ができます。

Zdog
Zdog -GitHub

Zdogの特徴
Zdogのデモ
Zdogの使い方

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