This is happening because your setting of the position and rotation of the camera is being overwritten in the orbit-camera.js script. In mouse-orbit.js, you have:
MouseInput.prototype.initialize = function() {
this.orbitCamera = this.entity.script.orbitCamera;
This is storing off a reference to the OrbitCamera script on the camera. The MouseInput script then just updates variables on the OrbitCamera script object in response to, say, a pan of the mouse:
MouseInput.prototype.pan = function(screenPoint) {
var fromWorldPoint = MouseInput.fromWorldPoint;
var toWorldPoint = MouseInput.toWorldPoint;
var worldDiff = MouseInput.worldDiff;
// For panning to work at any zoom level, we use screen point to world projection
// to work out how far we need to pan the pivotEntity in world space
var camera = this.entity.camera;
var distance = this.orbitCamera.distance;
camera.screenToWorld(screenPoint.x, screenPoint.y, distance, fromWorldPoint);
camera.screenToWorld(this.lastPoint.x, this.lastPoint.y, distance, toWorldPoint);
worldDiff.sub2(toWorldPoint, fromWorldPoint);
this.orbitCamera.pivotPoint.add(worldDiff);
};
At the end of that function, the pivotPoint
property on the OrbitCamera script is updated. The function doesn’t directly update the position of the camera. That is done in the update function of the OrbitCamera script, called every frame:
OrbitCamera.prototype.update = function(dt) {
// Add inertia, if any
var t = this.inertiaFactor === 0 ? 1 : Math.min(dt / this.inertiaFactor, 1);
this._distance = pc.math.lerp(this._distance, this._targetDistance, t);
this._yaw = pc.math.lerp(this._yaw, this._targetYaw, t);
this._pitch = pc.math.lerp(this._pitch, this._targetPitch, t);
this._updatePosition();
};
OrbitCamera.prototype._updatePosition = function () {
// Work out the camera position based on the pivot point, pitch, yaw and distance
this.entity.setLocalPosition(0,0,0);
this.entity.setLocalEulerAngles(this._pitch, this._yaw, 0);
var position = this.entity.getPosition();
position.copy(this.entity.forward);
position.scale(-this._distance);
position.add(this.pivotPoint);
this.entity.setPosition(position);
};
The solution? Store off distance
, pivotPoint
, pitch
, and yaw
properties on this.entity.orbitCamera
instead and restore those values on the mouse up event.