PlayCanvasのStarter Kitで用意されている「Model Viewer Starter Kit」では360°ビューワーを簡単に作る事ができますが、常にインプット情報からカメラ位置を制御しているため、スクリプトやボタンで指定位置にカメラを移動する方法にやや癖があります。
この記事ではスクリプトからorbit-camera.jsを利用した状態で指定位置にカメラを移動する方法を説明します。
これを使うとコンフィギュレーターなどを開発する際に、基本は自由移動でボタンを押したときだけ特定の部品に寄るなどの処理ができるようになります。
orbit-camera.js
ではupdate()
内で常にthis._updatePosition();
を呼び出しているため、外部のスクリプトからカメラに対してsetPosition()
やsetEularAngles()
を呼び出しても次のフレームで元の位置に戻ってしまいます。
そこでorbit-camera.js
を利用している場合は、その代わりにOrbitCamera
の中で定義されているresetAndLookAtPoint(resetPoint
,
lookAtPoint)
を利用します。
このメソッドをsetPosition()
と同じように呼び出して使うことができます。
上記のサンプルではConeに以下のようにスクリプトをアタッチしています。
var Movecamera = pc.createScript('movecamera');
Movecamera.attributes.add("camera",{type:"entity"});
Movecamera.attributes.add("button",{type:"entity"});
Movecamera.prototype.initialize = function() {
this.button.button.on('click', function(event) {
//ボタンが押されたら、自信の位置に移動して原点を向くようにする
this.camera.script.orbitCamera.resetAndLookAtPoint(this.entity.getLocalPosition(),new pc.Vec3(0,0,0));
}, this);
};
setEularAngles()
のような角度指定は用意されていないため、向きはlookAt
される対象座標を第2引数で入れてあげる必要があります。
resetAndLookAtPoint()
のオーバーラップ関数としてresetAndLookAtEntity()
も用意されています。こちらでは第2引数でEntityを指定することで直接そちらに注視点を移すことが可能です。
デフォルトでは瞬間的に移動と視点変更が行われてしまいます。Tweenを利用することでじわりと注視点が変更するように実装することも可能です。
まずPlayCanvas公式のTweenライブラリを導入します
https://developer.playcanvas.com/ja/tutorials/tweening/
次にorbit-camera.js
のresetAndLookAtPoint()
を以下のように修正します。
// Set the camera position to a world position and look at a world position
// Useful if you have multiple viewing angles to swap between in a scene
OrbitCamera.prototype.resetAndLookAtPoint = function (resetPoint, lookAtPoint) {
// tween内でスコープが外れるため回避
let self = this;
// tweenの時間
let second = 1.5;
this.pivotPoint.copy(lookAtPoint);
// lookAtで変化する角度を事前に取得するためのentity
let virtualCam = new pc.Entity();
virtualCam.setLocalPosition(resetPoint);
virtualCam.lookAt(lookAtPoint);
// translate tween
let tween = this.entity.tween(this.entity.getLocalPosition()).to(resetPoint, second, pc.SineOut);
tween.on('complete', function () {
//実行後にpitch yawを調整する
self.entity.lookAt(lookAtPoint);
var distance = OrbitCamera.distanceBetween;
distance.sub2(lookAtPoint, resetPoint);
self.distance = distance.length();
self.pivotPoint.copy(lookAtPoint);
var cameraQuat = self.entity.getRotation();
self.yaw = self._calcYaw(cameraQuat);
self.pitch = self._calcPitch(cameraQuat, self.yaw);
self._removeInertia();
self._updatePosition();
if (!self.autoRender) {
self.app.renderNextFrame = true;
}
});
tween.start();
//rotate tween
let tweenrotate = this.entity.tween(this.entity.getLocalEulerAngles()).rotate(virtualCam.getLocalEulerAngles(), second, pc.SineOut);
tweenrotate.start();
};
translateとrotateのtweenを同時に走らせ、complete
直後に既存の変更処理を実施するような処理としました。
rotateの情報のみlookAt
で得られる最終的なEularAnglesがわからないため、事前に仮想エンティティを作成し、移動後の座標・視点をそれぞれ合わせた状態で角度を取得している点がポイントです。
反Apple信者の私が移動用のメインマシンをiPad Pro(第5世代) 12.9インチに変えてからしばらく経ったので現在の構成を紹介
2022年8月9日(火) 15時27分41秒 | 818 viewmicroCMSにプリセットで入っているimgixを利用してお手軽に動的OGPを設定する
2021年9月6日(月) 14時33分9秒 | 198 viewactions-js/push@masterでのデフォルトブランチがmasterからmainに変わっていてCIが動かなくなっていた
2021年8月30日(月) 8時49分10秒 | 71 view目次をデフォルトで開いたり、開いたり閉じたりを検出したい
2020年10月30日(金) 9時52分28秒 | 22 viewbacknumberを実装した
2020年10月21日(水) 9時34分34秒 | 18 view