【jQuery初心者超歓迎！秋のWebGL+API祭り】Microsoft Azure x jThree Class Tokyo #2
ハッシュタグ #j3_class
に行ってきた。その内容をメモメモ
(ごめん、本当にめも。書ききれない部分もあったので、間違っているかも
詳しい内容は、別エントリで書く予定）
＜＜午前の部＞＞
■JThree説明
●はじめに
http://seesaawiki.jp/j3wiki/
を見ながらやっていきます
（内容は、そこに書いてあります）
GOML
camera
light
scene
Javascript
を使って作っていきます。
http://seesaawiki.jp/j3wiki/d/%280%29%b2%bc%bd%e0%c8%f7
の下のほうにあるURL
http://editor.jthree.jp/?id=UdbmUw
を使ってやります
（上の方のURLは、立方体が出てくるもの）
●みく
http://editor.jthree.jp/?id=UdbmUw
に行ったら、左下の
１．GOMLタグをクリック
MMDモデル：
初音ミク
sceneタグ内に「挿入」
２．プラグインタグをクリック
モデルローダー:
MMDをチェック
エディタ（左上）HTMLタブにして
プラグインはここから～ここまでの間に挿入
３．エディタで「Javascript」タブにして
ローディング終わったあと（$( "#loading" ).remove();のあと）
どこかに jThree.MMD.play(); をいれて保存
→ミクが動く
４．物理エンジンをプラグインに入れる
プラグイン
モデルローダー
MMD物理エンジン
エディタ（左上）HTMLタブにして
２でいれたMMDより前に「挿入」して「保存」
→髪の毛も動く
５．「GOMLタグ」
「ステージ」の「ゲキド街」を選ぶ
GOML(左上）のscene内に挿入
６．Xfile
「プラグイン」
「Xファイル」を選択
エディタの「HTML」 プラグインはここから～ここまでの間に「挿入」
保存
７．位置
GOMLスタイル
位置
positionY
エディタ
GOML
mmdタグのstyleに挿入、保存
・位置は右手で WebGL 右手系
●一般オブジェクト
下準備
http://editor.jthree.jp/?id=UdbmUw
を開いて、保存
・一般オブジェクト→「メッシュ」を挿入
→保存しても何も起こらないはず
書くのは何？
見た目の設定が必要
・書くのは何？：「形状データ：立方体」→headに挿入
geoタグにid hoge
mesh のgeo属性#hoge
・見た目の設定：「材質データ つややか」
mtiタグにid fuga設定
mesh のmtl属性#fuga
・j3.Trackball();
camera style lookAtY: 7;を消す
●画像をテクスチャに貼り付け
・「テクスチャ：画像」headの下に挿入→txrが入る
・mtlのparamにmap:txrをいれ color:#foo;を消して保存
●動画を入れる
・「テクスチャ：動画」headの下に挿入→txrが入る
（前に画像のテクスチャが入っていたら、削除する）
・mtlのparamにmap:txrが入っていることを確認
・「ファイルインポート」→HTMLファイルを挿入
→ここにvideoタグが入っている
●動作をつける
・Javascriptタグにして
１０行目から１２行目を消す
・８行目、meshのクリックイベントを取っている
ここに
alert(1);
→あらーとでる
・そこを
j3(this).animate({positionY:10},1000);
・そこを
j3(this).animate({positionY:"+=1"},1000);
・回転させるには（１＝１rad）
j3(this).animate({rotateY:"+=1"},1000);
●親子構造
・一般オブジェクト：空オブジェクトで
<mesh id="" geo="#hoge" mtl="#fuga" ></mesh>
<obj id="" >
<mesh id="" geo="#hoge" mtl="#fuga" style="positionX:50"></mesh>
</obj>
・Javascriptで
j3( "mesh" ).click( function() {
j3("obj").animate({rotateY:"+=3.14"},1000);
} );
●地球のように自転＆公転
・meshのところ
<mesh id="" geo="#hoge" mtl="#fuga" >
<mesh id="" geo="#hoge" mtl="#fuga" style="positionX:50"> </mesh>
</mesh>
・Javascriptで
j3( "mesh" ).click( function() {
j3("mesh").animate({rotateY:"+=3.14"},1000);
} );
●有志さいと：http://seesaawiki.jp/j3wiki/d/%cd%ad%bb%d6%a5%b5%a5%a4%a5%c8
次のお話
http://goo.gl/VOQmV1
デモページ
http://goo.gl/3nJFHR
http://goo.gl/kszJgn
職業
植物工場のWebAPI化
ドキュメント
http://j3doc.azurewebsites.net/
＜＜おひる＞＞
はこすこ ふじいさん
・５０個提供
・フロントエンジニア募集している
プラグイン→その他→はこすこ
でプラグイン使える
＜＜午後の部＞＞
■Microsoft Azureの話
・インターン生がご紹介
・Azureでできること
いろいろあるけど、きょうはバーチャルマシンのご紹介
・いいところ
１．簡単に公開
２．素材を自由に変えられる
３．全世界に公開できる
・でも
http://jthree.cloudapp.net/ms/
http://jthree.jp/editor.zip
にアクセス
作ったファイルをペーストして
・・・
（説明ファイル詳しく見てね！）
ビルゲイツになった
http://jthree.cloudapp.net/azure.zipに書いてある
そのなかAzure設定手順
■プレゼン
●JThreeXKinnect V2
@masota0517
http://1drv.ms/1AzjAOv
Kinnectにできること
・視野とセンシング範囲
V1より広がっている
・骨格の情報
２０個のかんせつ→６人同時に
・Kinnect v2 アプリケーション必要
Azure（ローカルホストでも）
リアルタイム通信：milkcocoaを使えば
・動作する→Kinnectでとる→jThreeで、初音ミクを躍らせる
・ブログにいろいろ書いてある
●milkcocoa
１．バックエンドのことを考えずにかける
２．とくにリアルタイム通信
すぐに相手に反応
RTS
・JavascriptとNode.js対応
・Javascriptだけかければ大丈夫！
●リコー Theta（というカメラ）
・３６０度ワンショットで使えるカメラ
https://theta360.com/ja/
・SDK出してる
→ANdroid,ios用
・パソコンにつないで、あとは松田さんのアプリ見てね
・Maker Faire Tokyo 出展中 あしたビッグサイトきてね
・http://jthree.jp/jtube
●エクシング（JOY SOUND)
・言語解析WebAPI
利用登録する
・文字列を投げると、解析する
感情とかも
・文節のかかりうけのポジネガ
・その他に
・例：wadaiCall
無人IoTラジオ
・Twitter @DevIminos
■ハンズオン－iminosに出ました。
https://lr.capio.jp/services/webapis/
で「サービス利用登録」をする
●Joysound jlpのzip
・Download zipでダウンロード、かいとう
・srcのした、example.jsのアクセスキーを変更
・サンプルアプリは、こんなかんじ
<!DOCTYPE html>
<html>
<head>
<title>JLP Example</title>
<meta charset="utf-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='jlp/JoysoundJLP.js'></script>
<script type='text/javascript'>
function func1()
{
var sourceSentence = $("#tx1").val().trim();
var config = new JoysoundJLP.Config('アクセスキーを入れる');
var analyzer = new JoysoundJLP.Analyzer(config);
analyzer.analyze(sourceSentence, function(resultSet) {
alert("全体すう"+resultSet.results().length);
for(ji = 0 ; ji < resultSet.results().length; ji++)
{
var result = resultSet.results()[ji];
alert("ポジネガ"+result.spn());
alert("フレーズ数"+result.phrases().length);
for(pi = 0 ; pi < result.phrases().length ; pi++)
{
var phrase = result.phrases()[pi];
buf = "";
buf = buf + "id:"+phrase.pid()+"\n";
buf = buf + "jyomi:"+phrase.jyomi()+"\n";
buf = buf + "fyomi:"+phrase.fyomi()+"\n";
buf = buf + "jhinshi:"+phrase.jhinshi()+"\n";
buf = buf + "fhinshi:"+phrase.fhinshi()+"\n";
buf = buf + "ppn:"+phrase.ppn()+"\n";
buf = buf + "did:"+phrase.did();
alert(buf);
}
alert("感情数"+result.sensibilities().length);
alert("形態素数"+result.morphemes().length);
for(mi = 0 ; mi < result.morphemes().length ; mi++)
{
var morph = result.morphemes()[mi];
buf = "";
buf = buf + "id:"+morph.mid()+"\n";
buf = buf + "pid:"+morph.pid()+"\n";
buf = buf + "gokan:"+morph.gokan()+"\n";
buf = buf + "hinshi:"+morph.hinshi()+"\n";
buf = buf + "yomi:"+morph.yomi()+"\n";
alert(buf);
}
}
});
}
</script>
</head>
<body>
<h1>JOYSOUND JLP Example</h1>
<div>
<textarea id="tx1" cols="60" rows="5"></textarea>
<br />
<button id="bt1" onclick="func1()">実行</button>
</div>
</body>
</html>
|
適当に入力してボタンおすと、情報が取れる。
・どんなデータが取れるのか
返ってくる結果
フレーズ（文節）：ポジネガ結果
形態素 読みを取ってくる
●おまけ
画像を表示させる
・画像をBase64に変換する
・SRC="data:image/gif;base64,変換内容"とする
かるぱの http://krpano.com/
●【先着55名限定】日本初Web3Dハッカソンで年越ししよう！jThree Class主催 Web3D
Hackathon Japan 2014
https://atnd.org/events/59304
●【jQuery初心者超歓迎！ jThree開発者から学べる日本最後のWeb3D勉強会】 jThree Class
Tokyo #3
http://eventdots.jp/event/242094
●自己紹介
・JTube
JThreeの連携
・課題
Web３Dライブラリの中で、処理は遅い
ドキュメントが書いてない
３Dの基礎が身につかなくなる
→時間・ハード・価値観の変化で解決可能
オンライン広告
日本１兆円ない アメリカ４．２兆円
アクセス
トータル
ランキング
