Edited at

Solufaで作成したコンテンツを公開する

More than 3 years have passed since last update.


導入

今回は自作のコンテンツを公開して誰でもアクセスできるようにします。

まずはsolufaのgitリポジトリからダウンロードをします。

downloadSolufa.png

ここからダウンロードしてください。

ダウンロードができたらSolufaディレクトリの中から必要なjsファイルのみを取ってきます

solufa/static/components

solufa/static/js

の2つのディレクトリの中身を今回作成するWebページのドキュメントルート/jsの中に持っていきます。(ディレクトリの名前はなんでもいいです)

Root

┗ js ┳Solufa-JyroSync.js

   ┣Solufa-ObjMtl.js

   ・

   ・

   ・

   ┗Solufa.min.js

こんな感じで10ファイルを持ってこれていたらokです。


HTMLの作成

PlayGroundを使用しないということでHTMLも定義していく必要があります。

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>そるふぁ</title>
</head>
<body>
<div id="solufa" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;"></div>
<script src="js/Solufa.min.js"></script>
<script src="js/MSXTransformer.js"></script>
<script src="js/Solufa-OrbitVp.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/msx;harmony=true">
//ここに今までPlayGround内に書いていたスクリプトを書きます。
</script>
</body>
</html>

とりあえず普通に書いていきます。

<div id="solufa" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;"></div>

solufaを流し込むdivタグを定義しています。全画面表示になるようなstyleになっていま



今回、ライブラリはSolufa.min.jsとMSXTransformer.js、Solufa-OrbitVp.jsを使用します。

Solufa.min.jsはSolufaライブラリです。

MSXTransformer.jsはRiot.jsのJSXのMithrilバージョンだと思います。

MSXのリポジトリのREADMEに色々書いてあるので興味がある方は読んでみてください。

Solufa-OrbitVp.jsはPLayGroundでも使用していた、ドラッグやスワイプでカメラの回転ができるライブラリです。

<script type="text/msx;harmony=true"></script>でMSXを使用する宣言をしています。

このscriptタグ内にPlayGroundに書いていたSolufaのスクリプトを書いていきます。


Solufaスクリプトの挿入

さっきのscriptタグの中に今まで書いていたスクリプトでも自作のスクリプトでもいいので挿入します。

長いですが以下のようになります。

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>そるふぁ</title>
</head>
<body>
<div id="solufa" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%;"></div>
<script src="js/Solufa.min.js"></script>
<script src="js/MSXTransformer.js"></script>
<script src="js/Solufa-OrbitVp.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/msx;harmony=true">
S( function( m ) {
var App = {
controller: function() {
return {
geo: {
type: "Box",
value: [1, 1, 1]
},
mtl: {
type: "MeshPhong",
value: {
color: "#00f",
specular: "#999"
}
},

rotate: function( elem, isInit ) {
if ( isInit ) return;
S.update( function(delta) {
elem.style.rotateY += delta * 1;
elem.style.rotateX += delta * 1;
});
}
};
},
view: function( ctrl ) {
return <scene>
<obj config={ctrl.rotate}>
<mesh geo={ ctrl.geo } mtl={ ctrl.mtl } style={{ posY:2, rotate: [ 30*Math.PI/180, 45*Math.PI/180, 0 ] }}/>
<mesh geo={ ctrl.geo } mtl={ ctrl.mtl } style={{ posY:-2, rotate: [ 30*Math.PI/180, 45*Math.PI/180, 0 ] }}/>
<mesh geo={ ctrl.geo } mtl={ ctrl.mtl } style={{ posX:2, rotate: [ 30*Math.PI/180, 45*Math.PI/180, 0 ] }}/>
<mesh geo={ ctrl.geo } mtl={ ctrl.mtl } style={{ posX:-2, rotate: [ 30*Math.PI/180, 45*Math.PI/180, 0 ] }}/>
<mesh geo={ ctrl.geo } mtl={ ctrl.mtl } style={{ posZ:2, rotate: [ 30*Math.PI/180, 45*Math.PI/180, 0 ] }}/>
<mesh geo={ ctrl.geo } mtl={ ctrl.mtl } style={{ posZ:-2, rotate: [ 30*Math.PI/180, 45*Math.PI/180, 0 ] }}/>
</obj>
<cam id="cam" style={{posZ:15}}/>
<light init={{ type: "Dir" }} style={{ pos: [ 1, 10, 10 ] }}/>
<light init={{ type: "Amb" }}/>
</scene>;
}
};
m.mount( S.document.body, App );
m.render( S.document.head, <rdr init={{ frame: "#solufa", antialias: true, preserveDrawingBuffer: true }}>
<OrbitVp cam="#cam"/>
</rdr> );

});

</script>
</body>
</html>

ここまで出来たら見れるようになります。

まずは作成したHTMLファイルをローカルからブラウザで開いてみましょう。

スクリーンショット 2016-06-12 17.12.42.png

このように表示され、アニメーションしていたら完成です!

これで簡単にWebで公開できるようになりました!

サンプル


最後に

今までPlayGroundに書いていたものを自前のHTMLで作成するまでを書きました。

そんなに難しくないですね。

次回はそろそろWebVRに対応する記事を書きます。