Skip to content

Commit

Permalink
Remove VREffect / VRControls in favor of the new WebGLRenderer API
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmarcos
dmarcos committed Nov 15, 2017
1 parent e9431c4 commit 41b5276
Show file tree
Hide file tree
Showing 18 changed files with 344 additions and 1,075 deletions.
9 changes: 7 additions & 2 deletions src/components/camera.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ module.exports.Component = registerComponent('camera', {
var el = this.el;
var sceneEl = el.sceneEl;

// To save / restore camera pose
this.savedRotation = new THREE.Vector3();
this.savedPosition = new THREE.Vector3();
this.savedPose = null;

// Create camera.
Expand Down Expand Up @@ -153,13 +156,15 @@ module.exports.Component = registerComponent('camera', {
*/
saveCameraPose: function () {
var el = this.el;
var position = el.getAttribute('position');
var rotation = el.getAttribute('rotation');
var hasPositionalTracking = this.hasPositionalTracking !== undefined ? this.hasPositionalTracking : checkHasPositionalTracking();

if (this.savedPose || !hasPositionalTracking) { return; }

this.savedPose = {
position: el.getAttribute('position'),
rotation: el.getAttribute('rotation')
position: this.savedPosition.copy(position),
rotation: this.savedRotation.copy(rotation)
};
},

Expand Down
129 changes: 44 additions & 85 deletions src/components/look-controls.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
var registerComponent = require('../core/component').registerComponent;
var THREE = require('../lib/three');
var DEFAULT_CAMERA_HEIGHT = require('../constants').DEFAULT_CAMERA_HEIGHT;
var bind = require('../utils/bind');
var PolyfillControls = require('../utils').device.PolyfillControls;

// To avoid recalculation at every mouse movement tick
var GRABBING_CLASS = 'a-grabbing';
Expand All @@ -23,21 +23,21 @@ module.exports.Component = registerComponent('look-controls', {
},

init: function () {
var self = this;
var sceneEl = this.el.sceneEl;

this.previousHMDPosition = new THREE.Vector3();
this.hmdQuaternion = new THREE.Quaternion();
this.hmdEuler = new THREE.Euler();
this.position = new THREE.Vector3();
this.polyfillObject = new THREE.Object3D();
this.polyfillControls = new PolyfillControls(this.polyfillObject);
this.rotation = {};
this.deltaRotation = {};

this.setupMouseControls();
this.setupHMDControls();
this.bindMethods();

// Reset previous HMD position when we exit VR.
sceneEl.addEventListener('exit-vr', this.onExitVR);
sceneEl.addEventListener('enter-vr', function () {
sceneEl.renderer.vr.setPoseTarget(self.el.object3D);
});
},

update: function (oldData) {
Expand All @@ -57,22 +57,9 @@ module.exports.Component = registerComponent('look-controls', {

tick: function (t) {
var data = this.data;
if (!data.enabled) { return; }
this.controls.standing = data.standing;
this.controls.userHeight = this.getUserHeight();
this.controls.update();
this.updateOrientation();
if (!data.enabled || this.el.sceneEl.is('vr-mode')) { return; }
this.updatePosition();
},

/**
* Return user height to use for standing poses, where a device doesn't provide an offset.
*/
getUserHeight: function () {
var el = this.el;
return el.hasAttribute('camera')
? el.getAttribute('camera').userHeight
: DEFAULT_CAMERA_HEIGHT;
this.updateOrientation();
},

play: function () {
Expand Down Expand Up @@ -108,16 +95,6 @@ module.exports.Component = registerComponent('look-controls', {
this.yawObject.add(this.pitchObject);
},

/**
* Set up VR controls that will copy data to the dolly.
*/
setupHMDControls: function () {
this.dolly = new THREE.Object3D();
this.euler = new THREE.Euler();
this.controls = new THREE.VRControls(this.dolly);
this.controls.userHeight = 0.0;
},

/**
* Add mouse and touch event listeners to canvas.
*/
Expand Down Expand Up @@ -161,71 +138,46 @@ module.exports.Component = registerComponent('look-controls', {
canvasEl.removeEventListener('touchstart', this.onTouchStart);
canvasEl.removeEventListener('touchmove', this.onTouchMove);
canvasEl.removeEventListener('touchend', this.onTouchEnd);

// sceneEl events.
sceneEl.removeEventListener('exit-vr', this.onExitVR);
sceneEl.removeEventListener('loaded', this.wrapGetCamera);
},

/**
* Update orientation for mobile, mouse drag, and headset.
* Mouse-drag only enabled if HMD is not active.
*/
updateOrientation: function () {
var currentRotation;
var deltaRotation = this.deltaRotation;
var hmdEuler = this.hmdEuler;
var hmdQuaternion = this.hmdQuaternion;
var pitchObject = this.pitchObject;
var yawObject = this.yawObject;
var sceneEl = this.el.sceneEl;
var rotation = this.rotation;

// Calculate HMD quaternion.
hmdQuaternion = hmdQuaternion.copy(this.dolly.quaternion);
hmdEuler.setFromQuaternion(hmdQuaternion, 'YXZ');

if (sceneEl.isMobile) {
// On mobile, do camera rotation with touch events and sensors.
rotation.x = radToDeg(hmdEuler.x) + radToDeg(pitchObject.rotation.x);
rotation.y = radToDeg(hmdEuler.y) + radToDeg(yawObject.rotation.y);
rotation.z = radToDeg(hmdEuler.z);
} else if (!sceneEl.is('vr-mode') || isNullVector(hmdEuler) || !this.data.hmdEnabled) {
// Mouse drag if WebVR not active (not connected, no incoming sensor data).
currentRotation = this.el.getAttribute('rotation');
this.calculateDeltaRotation();
if (this.data.reverseMouseDrag) {
rotation.x = currentRotation.x - deltaRotation.x;
rotation.y = currentRotation.y - deltaRotation.y;
rotation.z = currentRotation.z;
} else {
rotation.x = currentRotation.x + deltaRotation.x;
rotation.y = currentRotation.y + deltaRotation.y;
rotation.z = currentRotation.z;
}
} else {
var object3D = this.el.object3D;
if (sceneEl.is('vr-mode')) {
// Calculate HMD quaternion.
hmdEuler.setFromQuaternion(object3D.quaternion, 'YXZ');
// Mouse rotation ignored with an active headset. Use headset rotation.
rotation.x = radToDeg(hmdEuler.x);
rotation.y = radToDeg(hmdEuler.y);
rotation.z = radToDeg(hmdEuler.z);
} else {
// Calculate polyfilled HMD quaternion.
this.polyfillControls.update();
hmdEuler.setFromQuaternion(this.polyfillObject.quaternion, 'YXZ');
// On mobile, do camera rotation with touch events and sensors.
rotation.x = radToDeg(hmdEuler.x) + radToDeg(pitchObject.rotation.x);
rotation.y = radToDeg(hmdEuler.y) + radToDeg(yawObject.rotation.y);
rotation.z = 0;
}

this.el.setAttribute('rotation', rotation);
},

/**
* Calculate delta rotation for mouse-drag and touch-drag.
*/
calculateDeltaRotation: function () {
var currentRotationX = radToDeg(this.pitchObject.rotation.x);
var currentRotationY = radToDeg(this.yawObject.rotation.y);
this.deltaRotation.x = currentRotationX - (this.previousRotationX || 0);
this.deltaRotation.y = currentRotationY - (this.previousRotationY || 0);
// Store current rotation for next tick.
this.previousRotationX = currentRotationX;
this.previousRotationY = currentRotationY;
return this.deltaRotation;
},

/**
* Handle positional tracking.
*/
* Handle positional tracking.
*/
updatePosition: function () {
var el = this.el;
var currentHMDPosition;
Expand All @@ -238,26 +190,37 @@ module.exports.Component = registerComponent('look-controls', {

// Calculate change in position.
currentHMDPosition = this.calculateHMDPosition();

currentPosition = el.getAttribute('position');

position.copy(currentPosition).sub(previousHMDPosition).add(currentHMDPosition);
el.setAttribute('position', position);
previousHMDPosition.copy(currentHMDPosition);
},

/**
* Get headset position from VRControls.
*/
calculateHMDPosition: (function () {
var position = new THREE.Vector3();
return function () {
this.dolly.updateMatrix();
position.setFromMatrixPosition(this.dolly.matrix);
var object3D = this.el.object3D;
object3D.updateMatrix();
position.setFromMatrixPosition(object3D.matrix);
return position;
};
})(),

/**
* Calculate delta rotation for mouse-drag and touch-drag.
*/
calculateDeltaRotation: function () {
var currentRotationX = radToDeg(this.pitchObject.rotation.x);
var currentRotationY = radToDeg(this.yawObject.rotation.y);
this.deltaRotation.x = currentRotationX - (this.previousRotationX || 0);
this.deltaRotation.y = currentRotationY - (this.previousRotationY || 0);
// Store current rotation for next tick.
this.previousRotationX = currentRotationX;
this.previousRotationY = currentRotationY;
return this.deltaRotation;
},

/**
* Translate mouse drag into rotation.
*
Expand Down Expand Up @@ -377,7 +340,3 @@ module.exports.Component = registerComponent('look-controls', {
disableGrabCursor();
}
});

function isNullVector (vector) {
return vector.x === 0 && vector.y === 0 && vector.z === 0;
}
1 change: 1 addition & 0 deletions src/components/scene/screenshot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ module.exports.Component = registerComponent('screenshot', {

function setup () {
var gl = el.renderer.getContext();
if (!gl) { return; }
self.cubeMapSize = gl.getParameter(gl.MAX_CUBE_MAP_TEXTURE_SIZE);
self.material = new THREE.RawShaderMaterial({
uniforms: {map: {type: 't', value: null}},
Expand Down
Loading

0 comments on commit 41b5276

Please sign in to comment.