忍者ブログ
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。



2017/03/23 17:09 |
jThreeでMMDミクさんが踊る
http://jthree.jp/

なんだこれすごすぎる。
JavaScriptだけでこんなことができるとか全く意味がわかりません。

とりあえず動かしてみることにします。

公式サイトからjThreeをダウンロード。
バージョンはv1.5.1でした。
適当なところに展開する。
デモ一式が入っているので、後は音源のMP3を配置するだけで動作します。

http://www.nicovideo.jp/watch/sm1715919
からMP3をダウンロードし、MP3をdata/audio/melt.mp3に配置します。
とreadmeではなってますが別に適当なMP3でも問題ないようです。

あとはindex.htmlを開くだけでメルトを歌うミクさんが。
http://nurseangel.sakura.ne.jp/js/jthree/
※MP3は著作権の関係上適当なものに差し替えています。

あっさりできました。
どうなってんだこれ。
さっぱりわからないので中身を見ていくことにします。
以下は上記のソースを見ながら見てください。

index.html
<html>
<head>
<style>
#player {
	position: fixed;
	width: 100%; height: 100%;
	top: 0; left: 0; margin: 0; padding: 0;
}
</style>
</head>
<body>
	<div id="player">
		<a id="jThree-player" href="http://jthree.jp/">jThreeデモ</a>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
		<script src="plugin/jThree.Player.min.js"></script>
		<script src="index.js"></script>
	</div>
</body>
</html>

プレイヤーの大きさを指定し、必要なライブラリとindex.jsを読み込んでいるだけです。
公式のサンプルはbodyタグに直接出力しているので、適当にdivで括っておいたほうが使い勝手がいいでしょう。

index.js
$( function() {
	jThree.Player.setScript( {
		jQuery: "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js",
		jThree: "script/jThree.min.js",
		ammo: "plugin/ammo.js",
		MMD: "plugin/jThree.MMD.js",
		other: [ "//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" ]
	} );

	jThree.Player( {
		img: "data/img/test.jpg",
		goml: "index.goml",
		audio: {
			"audio/mp3": "data/audio/melt.mp3",
			"audio/ogg": "data/audio/melt.ogg"
		},
		credits: [
			{type: "楽曲",url: "http://supercell.sc/melt/",name: "supercell"},
			{type: "モデリングソフト",url: "http://www.geocities.jp/higuchuu4/",name: "樋口優"},
			{type: "モデルデータ仕様",url: "http://kkhk22.seesaa.net/",name: "極北P"},
			{type: "モデルデザイン",url: "https://twitter.com/animasasa",name: "あにまさ"},
			{type: "モデル・カメラモーション",url: "http://www.nicovideo.jp/watch/sm22045369",name: "pokky"},
			{type: "スカイドームテクスチャ",url: "http://seiga.nicovideo.jp/user/illust/11592603",name: "(メ_メ)"}
		],
		onLoad: function() {
			jThree( "mesh:first" ).animate( { rotateY: "-=1.57" }, 30000, "linear", arguments.callee );
		}
	} );
} );

jThree.Player.setScript()で必要なライブラリを指定します。
jQuery自体はindex.htmlでも読み込んでいるのだけど、何故かこちらでも記載が必要みたいです。
jquery.easingは動作エフェクトを追加するjQueryプラグインのようです。

jThree.Player()でMP3やMMD、クレジット等を指定。
このあたりは規定通りに指定するだけで、あとはjThreeがよしなに計らってくれます。
『MMDプラグインの貢献者katwat氏に特別な感謝を。』はjThree.Playerに最初から埋め込まれてるみたい。
onLoadは#domeGeoの傾きを指定しているみたいですが、あってもなくても動きが変わらないっぽいんだけどなんだろう。

index.goml
<?xml version="1.0" encoding="UTF-8"?>
<goml>
	<head>
		<model id="mikuPmx" src="data/pmx/miku.pmx" />
		<motion id="mainVmd" src="data/vmd/model.vmd" />
		<motion id="camVmd" src="data/vmd/camera.vmd" />
		<txr id="blueSky" src="data/img/sky.png" />
		<txr type="canvas" id="floorTxr" param="width: 32; height: 32; repeat: 10; wrap: 0;" draw="misc.drawFloor(a, '#fff', '#2ff')" />
		<gmt type="Plane" id="floorGmt" param="60 60 15 15" />
		<gmt type="Sphere" id="domeGeo" param="450 32 16" />
		<mtr type="MeshPhong" id="skyMat" param="side:1;ambient: #fff; map:#blueSky;"/>
		<mtr type="MeshPhong" id="floorMtr" param="side:2; map: #floorTxr;" />
		<rdr param="antialias: true;"/>
	</head>
	<body>
		<scene>
			<mesh gmt="#domeGeo" mtr="#skyMat" />
			<mesh gmt="#floorGmt" mtr="#floorMtr" style="rotate:1.57 0 -0.785;" />
			<light type="Amb" />
			<light type="Dir" style="light-color: #9f9f9f; position:-14 28 24.5;" />
			<camera motion="#camVmd" style="position: 0 10 30; lookAt:0 10 0;" />
			<mmd model="#mikuPmx" motion="#mainVmd" />
		</scene>
	</body>
</goml>

MMDのモデルやモーションを設定するXMLみたい。
MMD方面の知識が全くないので、いったい何が書かれているのか全くわかりません。
gomlのリファレンスみたいなものはないのだろうか。

ここまでが自分で記載する必要がある部分。
以下はjThreeとライブラリです。


script/jThree.js

jThreeの本体。
もちろん中に何が書かれているのか全く理解できません。


plugin/jThree.Player.js

呼び出すだけでYoutubeっぽいインターフェイスが自動的に追加されるというjThreeのプラグイン。
なんだこりゃ凄すぎる。
あと、こちらの解説記事ではファイルが分かれているjThree.Trackball.jsやjThree.Oculus.jsあたりは統合されたようで、一緒に中に入っていました。


plugin/jThree.MMD.js

MMDファイルを読み込んで、JavaScriptから扱えるようにする機能みたい。
なんでこんなものが作れるんだ。


plugin/ammo.js

物理演算エンジンです。
有名な物理エンジンBulletを移植したもので、物理演算が簡単に行えるのだそうです。

後はこれらを適当に組み合わせて呼び出すだけで、いとも簡単にミクさんが踊ってくれます。

…あかん、中を見ても全然わからん。
何をどうすればいいのかさっぱりだ。

PR


2014/08/15 22:43 | Comments(0) | JavaScript

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<買ったものリスト 2014/08/17 | HOME | 「保守性・管理性が劇的に上がるPHPのスマートなコードの書き方12選」が酷すぎて草>>
忍者ブログ[PR]