3Dグラフィックスを実装「jqx3dom」
当ページのリンクには広告が含まれています。
スポンサーリンク
サイトに3Dグラフィックスを実装するプラグイン「jqx3dom」を紹介します。
jQueryプラグイン「jqx3dom」
このプラグインを使えば、X3DOMフレームワークの3Dグラフィックスを実装することができます。
X3DOMとは、3DコンテンツをWeb上で実装するためのオープンソースのフレームワークです。詳細はこちらを参考にしてください。さまざまなおもしろい作品も閲覧することができますよ。
» http://www.x3dom.org/
スポンサーリンク
デモの3Dグラフィックスをマウスを使って、動かしてみてください。
ソース（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>
スポンサーリンク