開発入門 > 3D > Three.js > AltspaceVR上にWavefront Objファイルの読み込み方法

AltspaceVR上にWavefront Objファイルの読み込み方法

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がロードされ表示されます。

Altspace_obj_load

 

カテゴリー: 3D, Three.js

HOME / Coporate Site/ Careers

© Copyright 2018 STYLY..