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

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

サイトのキャプチャサイトのキャプチャ

Zdog
Zdog -GitHub


Zdogの特徴

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

Zdogの特徴
  • 軽量ライブラリ
    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: 外部ファイル

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

Step 2: HTML

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

Step 3: JavaScript

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

モデリングやシェイプ、その他アニメーションなどは、下記ページをご覧ください。

サイトのキャプチャ

Modeling -Zdog

サイトのキャプチャ

Shapes -Zdog

サイトのキャプチャ

Extras -Zdog

sponsors

top of page

©2024 coliss