Skip to content

Holoplay.js 参考資料

関数

HoloPlay(scene, camera, renderer, focalPointVector, constantCenter, hiResRender)

Returns: HoloPlay object

HoloPlayオブジェクトを生成します。

パラメーター:

  • scene:3Dロジックを適用したいのシーン
  • camera:カメラコントロールとレンダリングをするカメラ
  • renderer:3Dレンダリングを行うレンダラー
  • focalPointVector (省略可): HoloPlayオブジェクトの焦点座標。この座標位置が最も鮮明に表示されます。 THREE.Vector3または、x、y、z、3つの要素を持つ配列のどちらかで設定します。省略時は(0,0,0)が適用されます。
  • constantCenter (省略可): 上のfocalPointをカメラの動きに合わせて移動するか、又は固定するかをブーリアン型で指定します。trueの場合はfocalPointは初期座標位置に固定となり、falseの場合はカメラの移動に合わせてfocalPointも移動します。省略時はtrueが適用されます。
  • hiResRender (省略可): レンダリングを45視点で行なうか32視点で行なうかを指定します。
  • 省略時はtrueが適用されて、hiRes45視点レンダリングになります。
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(12.5, width / height, 1, 1000);

camera.position.set(0,0,20);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var holoplay = new HoloPlay(camera, scene, renderer);

HoloPlay.render(scene, camera, renderer)

Returns: void

HoloPlayオブジェクトのレンダリングループです。WebGLレンダリング関数の代わりにお使います。

この関数は、Looking Glassボタンの状態の検出の処理も行なっています。

パラメーター:

  • scene (省略可): レンダリングするシーン、省略した場合はHoloPlay()コンストラクタで設定したsceneが使用されます。
  • camera (省略可): レンダリングするカメラです。省略した場合はHoloPlay()コンストラクターで設定したcameraが使用されます。

  • renderer(省略可): WebGLレンダラー、省略した場合はHoloPlay()コンストラクタで設定したrendererが使用されます。

// Game loop
function RunApp(){
  requestAnimationFrame(RunApp);
  holoplay.render();
}

HoloPlay.lookAt(target, camera)

Returns: void

targetの座標またはオブジェクトの座標にfocalPointを移動します。

パラメーター:

  • target: THREE.Object3DまたはTHREE.Vector3のいずれで、focalPointを指定します。

  • camera(省略可): targetに焦点させるカメラ。省略時はHoloPlay()コンストラクタで設定したcameraが使用されます。

holoplay.lookAt(new THREE.Vector3(0,1,0));

イベント関数

buttonDown

Looking Glassボタンがが押された時に、一回だけイベントを発生します。

Properties:

  • name: 押されたボタンの名称。 "square"、"left"、"right"と "circle"。

  • index: 押されたボタンのインデックス。 (square = 0, left = 1, right = 2, circle = 3)

document.addEventListener('buttonDown', function(e){
  console.log("Button name: " + e.name + " Button index: " + e.index);
});

buttonPressed

Looking Glassボタンが押されている間は、連続でイベントが発生されます。

Properties:

  • name: 押されたボタンの名称。 "square"、"left"、"right"と "circle"。

  • index: 押されたボタンのインデックス。 (square = 0, left = 1, right = 2, circle = 3)

document.addEventListener('buttonPressed', function(e){
  console.log("Button name: " + e.name + " Button index: " + e.index);
});

buttonUp

押されていたLooking Glassボタンから指が離れた時に、一回だけイベントを発生します。

Properties:

  • name: 押されたボタンの名称。 "square"、"left"、"right"と "circle"。

  • index: 押されたボタンのインデックス。(square = 0, left = 1, right = 2, circle = 3)

document.addEventListener('buttonUp', function(e){
  console.log("Button name: " + e.name + " Button index: " + e.index);
});

Properties

useButtons

Type: bool

true(デフォルト)の場合、ボタンを使用できて、各フレームの状態変更についても照会されます。