LoginSignup
9

More than 5 years have passed since last update.

CodePenで作るAltspaceVRアプリ

Last updated at Posted at 2015-10-11

前回、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ライブコーディング.png

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

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

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

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

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

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

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

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

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

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

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

変更箇所は前回と同様。

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' が足りない)。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9