今日の人気記事

  1. 画像ポップアップ・スライドショー「colorbox」
  2. 色紙の角を折ったような背景を実装「jCorner」
  3. select要素の複数選択フォームを実装「Multiple Select」
  4. メールアドレスのドメイン部分を入力補完「Email Autocomplete」
  5. 複数のポップアップを重ねて表示「dialog」

3Dグラフィックスを実装「jqx3dom」

スポンサーリンク

サイトに3Dグラフィックスを実装するプラグイン「jqx3dom」を紹介します。

jQueryプラグイン「jqx3dom」

このプラグインを使えば、X3DOMフレームワークの3Dグラフィックスを実装することができます。

X3DOMとは、3DコンテンツをWeb上で実装するためのオープンソースのフレームワークです。詳細はこちらを参考にしてください。さまざまなおもしろい作品も閲覧することができますよ。
» http://www.x3dom.org/

スポンサーリンク

デモの3Dグラフィックスをマウスを使って、動かしてみてください。

「jqx3dom」のデモ

ソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="jqx3domのデモでーす。">
<title>jqx3dom - jQueryプラグイン</title>
<script src="x3dom.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jqx3dom.jquery.js"></script>
<script>
$(function() {
  var myCanvas = $('#3dcanvas').jqx3dom({
    width:"600px",
    height:"400px",
    background: "#eeeeee"
  });
  myCanvas.addBox ({x:-1,y:2,z:2});
  myCanvas.addSphere ({x:1,y:0,z:0,radius:1,color:'#ff00ff'}); 
});
</script>	 
</head>
<body>
<h1>jqx3domのデモでーす。</h1>
<p>マウスの左クリックで3Dオブジェクトを動かしてみてください。</p>
<div id="3dcanvas"></div>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)