前回、Webサーバー上でAltspaceSDKを動作させる方法を解説しました。
本記事では、codepenでのAltspaceVRアプリ作成方法を説明します。
公式のDeveroping with CodePen＋αな内容です。

はじめに

CodePenとは、ブラウザ上でJavaScriptやHTML、CSSの編集が可能なWebサービスです。
特徴
・変更がリアルタイムで反映される。
・他のプロジェクトをForkして自分用にプロジェクトを作れる。(AltspaceVRのサンプルもあります)
・AltspaceSDKが使える。AltspaceVR内のブラウザで操作可能で、変更はVR内で即反映されます。

CodePenでのAltspaceVRアプリ開発

公式ドキュメントはこのあたり
https://developer.altvr.com/get-started/
https://developer.altvr.com/codepen/

VR内でもコーディングできますが、HMDを繋がずウィンドウモードでAltspaceVRを起動、同時にブラウザでCodePenを編集＆Saveし、AltspaceVRのブラウザでそのurlを指定&リロードすると良い感じです。

AltspaceVRのサンプルをForkして自分用のプロジェクトを作成＆表示するまでの流れ

１．CodePenアカウントを作る
https://codepen.io/signup/free
GitHUBアカウントが使えます。

2．AltspaceVRアプリのサンプルを選択
http://codepen.io/team/altspacevr/
HelloVRをクリックします。

3．Forkボタンを押し、自分用のプロジェクトを作る
A PEN BY [自分のアカウント名]となっていることを確認してください。これで好きに変更できます。
HTMLやCSSのウインドウは消します。
下のView　Hello VR in AltspaceVRの部分も、不要なのでJSのウィンドウを広げます。

4．AltspaceVRで表示する
このURLをコピーして、AltspaveVR内のブラウザのurl欄にペーストすると、くるくる回る四角形が表示されます。
http://codepen.io/ 自分のアカウント/pen/XXXXXX?editors=001

5.ウィンドウ部分を非表示にする
ChangeView>Full Pageを選択。

公開スペース(白い角がある、アプリが置ける立方体スペース)へBeemすれば他の人も見ることが出来ます。

CodePenで3DオブジェクトをAltspaceVRに持ち込む

CodePenから画像ファイルや3Dモデルのobjファイル等のリソースを使用するには、HostingサービスのあるPro版へのアップグレードの他、Dropbox上の共有ファイルでもアクセス可能です。

・ChessサンプルをForkしてから揚げを表示した例

DropBoxへ表示したい3Dモデルを格納

変更箇所は前回と同様。

chess.html

	var CONFIG = Object.freeze({//constants
		boardSize: 700,//chess piece models are scaled to fit the board
		tableHeight: 0,//chess board is raised to be on top of table
		dragPlaneSize: 1000,//boundary for dragging pieces, should be larger than boardSize
		pieces: {
// kingのファイル名をkaraage_vsへ
			king: {modelFile: 'karaage_vs', count: 1},
			queen: {modelFile: 'queen', count: 1},
			bishop: {modelFile: 'bishop', count: 2},
			knight: {modelFile: 'knight', count: 2},
			rook: {modelFile: 'rook', count: 2},
			pawn: {modelFile: 'pawn', count: 8}
		},
		pieceWidth: 16,
		board: {modelFile: 'board', width: 50, height: 1},
// dropboxの公開フォルダの3Dモデルを置いたURLを指定。
		directory: 'https://dl.dropboxusercontent.com/u/10402228/models/chess',

	});

このCodePenはこちら。
http://codepen.io/afjk/pen/vNJOar

追記

サクラサーバー上のファイルでは、CodePenからアクセスするとクロスドメインのアクセス制限により読み込めませんでした。

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://afjk.sakura.ne.jp/xxxx/models/chess/karaage_vs.obj にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダ 'Access-Control-Allow-Origin' が足りない)。

対策をご存知の方、教えていただけると幸いです。