第5回 HTML5minutes! LT 「ねこでもできるWebGL」

HTML
5minutes!
~
triton-‐js
~

翠星のガルガンティア
～キミと届けるメッセージ～

でも難しいんでしょう？

jThree
・GOMLという独自のタグを使って定義・描画する
・スクリプトはほぼjQueryと同じ記法で書ける

立方体をつくる
<goml>
<head>
<rdr
frame=".glview"
camera="camera:first"
param="anCalias:
true;
clearColor:
#fff;"/>
<geo
id="geo"
type=”Cube"
param="2.5"
/>
<mtl
id="mtl"
type="MeshPhong"
param="color:
#0f0;"
/>
</head>
<body>
<scene>
<mesh
geo="#geo"
mtl="#mtl"
/>
<!-‐-‐
カメラとかライトとか（略）
-‐-‐>
</scene>
</body>
</goml>

立方体をつくる
<goml>
<head>
<rdr
frame=".glview"
param="anCalias:
true;
clearColor:
#fff;"/>
<geo
id="geo"
type=”Cube"
param="2.5"
/>
<mtl
id="mtl"
type="MeshPhong"
param="color:
#f00;"
/>
</head>
<body>
<scene>
<mesh
geo="#geo"
mtl="#mtl"
/>
<!-‐-‐
-‐-‐>
</scene>
</body>
</goml>

3Dモデルを表示する
<head>
<rdr
frame=".glview"
param="anCalias:
true;
clearColor:
#fff;"/>
</head>
<body>
<scene>
<mmd
id=""
model="model/miku/index.pmx"
moCon="moCon/
world.vmd"
style=""></mmd>
<obj
id=""
model="stage/gekido/index.x"
style="scale:
10;
posiCon:
0
-‐46.5
0;
rotateY:
1.57;"></obj>
<!-‐-‐
-‐-‐>
</scene>
</body>

ここまでJavaScript
（ほとんど）
書いていません

jThree.MMD.play();
（MMD
moConを再生するメソッドだけ書いてます）

テクスチャを貼る
<head>
<rdr
frame=".glview"
param="anCalias:
true;
clearColor:
#fff;"/>
<txr
id="txrImage"
src="img/sky.png"
param=""
onLoad=""/>
<mtl
id="mtlImage"
type="MeshPhong"
param="map:
#txrImage;"
/>
</head>
<body>
<scene>
<mesh
geo="#geo"
mtl="#mtl"
/>
<!-‐-‐
-‐-‐>
</scene>
</body>

動画を貼る
<head>
<rdr
frame=".glview"
param="anCalias:
true;
clearColor:
#fff;"/>
<import>
<style>div
{color:
#f00;
height:
50px;
posiRon:
absolute;
top:
0;}</style>
<video
autoplay>
<source
src="video/nhk1.mp4"
/>
<source
src="video/nhk1.ogg"
/>
</video>
<canvas></canvas>
</import>
<mtl
id="mtlImage"
type="MeshPhong"
param="map:
#txrImage;"
/>
</head>

テクスチャを貼る
<head>
<rdr
frame=".glview"
param="anCalias:
true;
clearColor:
#fff;"/>
<import>
<style>div
{color:
#f00;
height:
50px;
posiRon:
absolute;
top:
0;}</style>
<div>Hello
World!</div>
<canvas></canvas>
</import>
<mtl
id="mtlImage"
type="MeshPhong"
param="map:
#txrImage;"
/>
</head>

クリックイベント
GOML
<mesh
id=“cube”
geo="#geo"
mtl="#mtl"
/>
script.js
j3("#cube").click(funcCon()
{
j3(this).animate({posiConY:
"+=1"},
500);
});

append / removeもできる
GOML
<geo
id="geo"
type=”Cube"
param="2.5"
/>
<mtl
id="mtl"
type="MeshPhong"
param="color:
#0f0;"
/>
script.js
j3("scene").append(‘<mesh
id=“cube”
geo="#geo"
mtl=“#mtl”
/>');
j3(“#cube”).remove();

よくないところ
• 遅い
– three.js、jQueryに依存
• 公式ドキュメントがない

Documents and Samples
• jThree公式
h]p://jthree.jp
• 有志によるjThree
wiki
h]p://seesaawiki.jp/j3wiki/
• ハンズオン内容のサンプルまとめ
次ページのEditorにそのままコピペで動くように作ってあります
h]ps://github.com/moshisora/jThreeSamples

jThree editor
• jThree
editor
ローカル環境を整えなくてもWebブラウザでjThreeを実行できるよ
うに、Editorを作ってくださっています。
保存・公開機能付きなのでつくったものをどんどんシェアしてみて
ください！
URL
:
h]p://editor.jthree.jp

第5回 HTML5minutes! LT 「ねこでもできるWebGL」

More Related Content

Viewers also liked (7)

Similar to 第5回 HTML5minutes! LT 「ねこでもできるWebGL」 (20)

Recently uploaded (17)

第5回 HTML5minutes! LT 「ねこでもできるWebGL」