STYLY Developer's Blog
開発者ブログ
Altspace社のエンジニアのSohailさんが来日しているとのことで歓迎会に参加してきました。AltspaceVRはVR空間内でアバター同士で会話できるプラットフォームで私もたまに遊んでいます。
AltspaceではSDKを公開していてThree.jsライブラリを使ってAltspace上のアプリケーションを開発することができるようになっている。Three.jsを用いて開発ができるということはThree.js用に用意されたたくさんのライブラリの利用やWeb用に開発した資産の再利用ができるのでうまいこと考えたものだと思う。
基本的な考え方は、Three.jsでRenderを指定する際に
通常は
var renderer = new THREE.WebGLRenderer();
と記述するところを
var renderer = altspace.getThreeJSRenderer({version:‘0.2.0‘});
とすることで、レンダリング先をAltspace内に変更できる。
var altspace = altspace || null;
if(altspace){
renderer = altspace.getThreeJSRenderer({version:'0.2.0'});
}else{
renderer = new THREE.WebGLRenderer();
}
とすることで、Altspace、WebGL両対応のスクリプトを書くことも可能になる。
Altspace上にObjファイルを読み込んで表示する方法ですが、実はAltspaceデベロッパーサイト上にプロジェクトがあり、そこにコードが公開されています。
[blogcard url=”https://developer.altvr.com/projects/3d-model-viewer/”]
こちらのコードを改造して表示してみることにします。
github.com/falkrons/3dModelViewer
こちらには、Objファイルを読み込んだあとのちょっとした機能があるのですが、基本的なコード以外全部そぎ落としてみるとこんな感じになります。
<!DOCTYPE html>
<html lang="en"> <head>
<title>3D Object Viewer</title>
<!-- 必要なライブラリの読み込み -->
<script src="http://sdk.altvr.com/lib/three.min.js"></script>
<script src="http://sdk.altvr.com/lib/OBJMTLLoader.js"></script>
<script src="http://sdk.altvr.com/lib/MTLLoader.js"></script>
</head><body><script>
//YOUR OBJ HERE:
function loadObj(){
//Objファイル及びMTLファイルの指定
loader.load("obj/dino/mesh.obj", "obj/dino/mesh.obj.mtl", function (object){
obj = object.clone();
obj.scale.set(10, 10, 10);
obj.rotation.set(0, 0, 0);
obj.position.set(0, 0, 0);
scene.add(obj);
});
}
var altspace = altspace || null;
var renderer, camera, scene, loader ;
//初期設定
(function init(){
scene = new THREE.Scene();
loader = new THREE.OBJMTLLoader();
if(altspace){
//ここでrenderにAltspace用のRenderを指定
renderer = altspace.getThreeJSRenderer({version:'0.2.0'});
loadObj();
animate();
}
}());
//updates the scene.
function animate() {
window.requestAnimationFrame(animate);
renderer.render(scene, camera);
}
</script></body></html>
ここで一つ注意ですが、Three.jsのObjローダーにはクロスサイトスクリプティングの制限があり、モデル設置サーバー及び表示スクリプト両方に細工をしないと別ドメインのObjファイルを読み込めない仕組みになっています。この対策は別記事で紹介します。
ですので
loader.load("Models/ClickBeam.obj", "Models/ClickBeam.mtl", function (object){}
には同一サーバーにあるobjファイル及びmtlファイルを相対パスで記述してください。
Altspace上で実行するにはインターネット上のウェブサーバーにHTMLファイルをアップロードし外部から実行できるようにします。
http://test2.psychic-vr-lab.com/altspacevr/3dModelView_Blog.html
に上記コードをアップしました。（こちらはウェブブラウザ上でみても何も表示されません。）
AltspaceVRを起動して、△ボタンからメニューを表示し「WEB」をクリックし、URLをペーストします。画面上にObjがロードされ表示されます。
