added controller things
This commit is contained in:
parent
375f30ef70
commit
a2a26dc739
|
|
@ -0,0 +1,47 @@
|
||||||
|
// gaze + fuse-to-click on mobile VR
|
||||||
|
// gaze + tap-to-click on mobile AR
|
||||||
|
// also adds 'eye'-tracking (mouseover) functionality to display popovers
|
||||||
|
|
||||||
|
AFRAME.registerComponent('gaze-touch-to-click',{
|
||||||
|
schema:{
|
||||||
|
spawn:{type:'boolean',default:false},
|
||||||
|
},
|
||||||
|
events:{
|
||||||
|
"fusing": function(e){
|
||||||
|
if( e.detail.mouseEvent ) return // ignore click event
|
||||||
|
console.dir(e)
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setGazer: function(state, fuse){
|
||||||
|
if( !AFRAME.utils.device.isMobile() ) return
|
||||||
|
let cam = document.querySelector("[camera]")
|
||||||
|
if( state ){
|
||||||
|
if( cam.innerHTML.match(/cursor/) ) return; // avoid duplicate calls
|
||||||
|
cam.innerHTML = `<a-entity id="cursor" cursor="fuse: ${fuse ? 'true': 'false'}; fuseTimeout: 1500"
|
||||||
|
animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
|
||||||
|
animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
|
||||||
|
animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
|
||||||
|
raycaster="objects: .ray"
|
||||||
|
visible="true"
|
||||||
|
position="0 0 -1"
|
||||||
|
material="color: #BBBBBB; shader: flat">
|
||||||
|
</a-entity>`
|
||||||
|
cam.querySelector('#cursor').setAttribute("geometry","primitive: ring; radiusInner: 0.02; radiusOuter: 0.03")
|
||||||
|
}else{
|
||||||
|
cam.querySelector('#cursor').removeAttribute("geometry")
|
||||||
|
if( document.querySelector('[cursor]') ) {
|
||||||
|
document.querySelector('[cursor]').setAttribute("visible",false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
init:function(data){
|
||||||
|
this.setGazer(true);
|
||||||
|
|
||||||
|
document.querySelector("a-scene").addEventListener('exit-vr', () => this.setGazer(false,false) )
|
||||||
|
document.querySelector("a-scene").addEventListener('enter-vr', () => this.setGazer(true,true) )
|
||||||
|
document.querySelector("a-scene").addEventListener('enter-ar', () => this.setGazer(true,false) )
|
||||||
|
document.querySelector("a-scene").addEventListener('exit-ar', () => this.setGazer(false,false) )
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
// look-controls turns off autoUpdateMatrix (of player) which
|
||||||
|
// will break repositionining the VR rig (teleporting and other stuff)
|
||||||
|
// overriding this below is easier then adding updateMatrixWorld() everywhere else
|
||||||
|
// (or rolling your own look-controls and diverting from mainbranch)
|
||||||
|
|
||||||
|
AFRAME.registerComponent('patch-look-controls',{
|
||||||
|
|
||||||
|
init: function(){
|
||||||
|
alert("fjo"); //dEventListener('loaded', () => this.patchLookControls() )
|
||||||
|
},
|
||||||
|
|
||||||
|
patchLookControls: function(){
|
||||||
|
alert("ja!")
|
||||||
|
let lk = document.querySelector('[look-controls]')
|
||||||
|
if( !lk ) return
|
||||||
|
lk = lk.components['look-controls']
|
||||||
|
|
||||||
|
lk.onEnterVR = function () {
|
||||||
|
var sceneEl = this.el.sceneEl;
|
||||||
|
if (!sceneEl.checkHeadsetConnected()) { return; }
|
||||||
|
this.saveCameraPose();
|
||||||
|
this.el.object3D.position.set(0, 0, 0);
|
||||||
|
this.el.object3D.rotation.set(0, 0, 0);
|
||||||
|
if (sceneEl.hasWebXR) {
|
||||||
|
// this.el.object3D.matrixAutoUpdate = false;
|
||||||
|
this.el.object3D.updateMatrix();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the pose.
|
||||||
|
*/
|
||||||
|
lk.onExitVR = function () {
|
||||||
|
if (!this.el.sceneEl.checkHeadsetConnected()) { return; }
|
||||||
|
this.restoreCameraPose();
|
||||||
|
this.previousHMDPosition.set(0, 0, 0);
|
||||||
|
this.el.object3D.matrixAutoUpdate = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// it also needs to apply the offset (in case the #rot was used in URLS)
|
||||||
|
|
||||||
|
lk.updateOrientation = function () {
|
||||||
|
var object3D = this.el.object3D;
|
||||||
|
var pitchObject = this.pitchObject;
|
||||||
|
var yawObject = this.yawObject;
|
||||||
|
var sceneEl = this.el.sceneEl;
|
||||||
|
|
||||||
|
// In VR or AR mode, THREE is in charge of updating the camera pose.
|
||||||
|
if ((sceneEl.is('vr-mode') || sceneEl.is('ar-mode')) && sceneEl.checkHeadsetConnected()) {
|
||||||
|
// With WebXR THREE applies headset pose to the object3D internally.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateMagicWindowOrientation();
|
||||||
|
|
||||||
|
let offsetX = object3D.rotation.offset ? object3D.rotation.offset.x : 0
|
||||||
|
let offsetY = object3D.rotation.offset ? object3D.rotation.offset.y : 0
|
||||||
|
|
||||||
|
// On mobile, do camera rotation with touch events and sensors.
|
||||||
|
object3D.rotation.x = this.magicWindowDeltaEuler.x + offsetX + pitchObject.rotation.x;
|
||||||
|
object3D.rotation.y = this.magicWindowDeltaEuler.y + offsetY + yawObject.rotation.y;
|
||||||
|
object3D.rotation.z = this.magicWindowDeltaEuler.z;
|
||||||
|
object3D.matrixAutoUpdate = true
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
// look-controls turns off autoUpdateMatrix (of player) which
|
||||||
|
// will break repositionining the VR rig (teleporting and other stuff)
|
||||||
|
// overriding this below is easier then adding updateMatrixWorld() everywhere else
|
||||||
|
// (or rolling your own look-controls and diverting from mainbranch)
|
||||||
|
|
||||||
|
|
||||||
|
// this component will re-attach a patched look-controls
|
||||||
|
AFRAME.registerComponent('patch-look-controls',{
|
||||||
|
|
||||||
|
init: function(){
|
||||||
|
let scene = AFRAME.scenes[0]
|
||||||
|
let el = document.querySelector('[look-controls]')
|
||||||
|
el.removeAttribute("look-controls")
|
||||||
|
|
||||||
|
AFRAME.components['look-controls'].Component.prototype.onEnterVR = function () {
|
||||||
|
var sceneEl = this.el.sceneEl;
|
||||||
|
if (!sceneEl.checkHeadsetConnected()) { return; }
|
||||||
|
this.saveCameraPose();
|
||||||
|
this.el.object3D.position.set(0, 0, 0);
|
||||||
|
this.el.object3D.rotation.set(0, 0, 0);
|
||||||
|
if (sceneEl.hasWebXR) {
|
||||||
|
// this.el.object3D.matrixAutoUpdate = false;
|
||||||
|
this.el.object3D.updateMatrix();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the pose.
|
||||||
|
*/
|
||||||
|
AFRAME.components['look-controls'].Component.prototype.onExitVR = function () {
|
||||||
|
if (!this.el.sceneEl.checkHeadsetConnected()) { return; }
|
||||||
|
this.restoreCameraPose();
|
||||||
|
this.previousHMDPosition.set(0, 0, 0);
|
||||||
|
this.el.object3D.matrixAutoUpdate = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// it also needs to apply the offset (in case the #rot was used in URLS)
|
||||||
|
|
||||||
|
AFRAME.components['look-controls'].Component.prototype.updateOrientation = function () {
|
||||||
|
var object3D = this.el.object3D;
|
||||||
|
var pitchObject = this.pitchObject;
|
||||||
|
var yawObject = this.yawObject;
|
||||||
|
var sceneEl = this.el.sceneEl;
|
||||||
|
|
||||||
|
// In VR or AR mode, THREE is in charge of updating the camera pose.
|
||||||
|
if ((sceneEl.is('vr-mode') || sceneEl.is('ar-mode')) && sceneEl.checkHeadsetConnected()) {
|
||||||
|
// With WebXR THREE applies headset pose to the object3D internally.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateMagicWindowOrientation();
|
||||||
|
|
||||||
|
let offsetX = object3D.rotation.offset ? object3D.rotation.offset.x : 0
|
||||||
|
let offsetY = object3D.rotation.offset ? object3D.rotation.offset.y : 0
|
||||||
|
|
||||||
|
// On mobile, do camera rotation with touch events and sensors.
|
||||||
|
object3D.rotation.x = this.magicWindowDeltaEuler.x + offsetX + pitchObject.rotation.x;
|
||||||
|
object3D.rotation.y = this.magicWindowDeltaEuler.y + offsetY + yawObject.rotation.y;
|
||||||
|
object3D.rotation.z = this.magicWindowDeltaEuler.z;
|
||||||
|
object3D.matrixAutoUpdate = true
|
||||||
|
}
|
||||||
|
|
||||||
|
el.setAttribute('look-controls','')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
// poor man's way to move forward using hand gesture pinch
|
||||||
|
|
||||||
|
window.AFRAME.registerComponent('pinch-to-teleport', {
|
||||||
|
schema:{
|
||||||
|
rig: {type: "selector"}
|
||||||
|
},
|
||||||
|
init: function(){
|
||||||
|
this.el.addEventListener("pinchended", () => {
|
||||||
|
// get the cameras world direction
|
||||||
|
let direction = new THREE.Vector3()
|
||||||
|
this.el.sceneEl.camera.getWorldDirection(direction);
|
||||||
|
// multiply the direction by a "speed" factor
|
||||||
|
direction.multiplyScalar(0.4)
|
||||||
|
// get the current position
|
||||||
|
var pos = player.getAttribute("position")
|
||||||
|
// add the direction vector
|
||||||
|
pos.x += direction.x
|
||||||
|
pos.z += direction.z
|
||||||
|
// set the new position
|
||||||
|
this.data.rig.setAttribute("position", pos);
|
||||||
|
// !!! NOTE - it would be more efficient to do the
|
||||||
|
// position change on the players THREE.Object:
|
||||||
|
// `player.object3D.position.add(direction)`
|
||||||
|
// but it would break "getAttribute("position")
|
||||||
|
})
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
// this makes WebXR hand controls able to click things (by touching it)
|
||||||
|
|
||||||
|
AFRAME.registerComponent('pressable', {
|
||||||
|
schema: {
|
||||||
|
pressDistance: {
|
||||||
|
default: 0.01
|
||||||
|
}
|
||||||
|
},
|
||||||
|
init: function() {
|
||||||
|
this.worldPosition = new THREE.Vector3();
|
||||||
|
this.fingerWorldPosition = new THREE.Vector3();
|
||||||
|
this.raycaster = new THREE.Raycaster()
|
||||||
|
this.handEls = document.querySelectorAll('[hand-tracking-controls]');
|
||||||
|
this.pressed = false;
|
||||||
|
this.distance = -1
|
||||||
|
// we throttle by distance, to support scenes with loads of clickable objects (far away)
|
||||||
|
this.tick = this.throttleByDistance( () => this.detectPress() )
|
||||||
|
},
|
||||||
|
throttleByDistance: function(f){
|
||||||
|
return function(){
|
||||||
|
if( this.distance < 0 ) return f() // first call
|
||||||
|
if( !f.tid ){
|
||||||
|
let x = this.distance
|
||||||
|
let y = x*(x*0.05)*1000 // parabolic curve
|
||||||
|
f.tid = setTimeout( function(){
|
||||||
|
f.tid = null
|
||||||
|
f()
|
||||||
|
}, y )
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
detectPress: function(){
|
||||||
|
var handEls = this.handEls;
|
||||||
|
var handEl;
|
||||||
|
let minDistance = 5
|
||||||
|
|
||||||
|
// compensate for xrf-get AFRAME component (which references non-reparented buffergeometries from the 3D model)
|
||||||
|
let object3D = this.el.object3D.child || this.el.object3D
|
||||||
|
|
||||||
|
for (var i = 0; i < handEls.length; i++) {
|
||||||
|
handEl = handEls[i];
|
||||||
|
let indexTipPosition = handEl.components['hand-tracking-controls'].indexTipPosition
|
||||||
|
// Apply the relative position to the parent's world position
|
||||||
|
handEl.object3D.updateMatrixWorld();
|
||||||
|
handEl.object3D.getWorldPosition( this.fingerWorldPosition )
|
||||||
|
this.fingerWorldPosition.add( indexTipPosition )
|
||||||
|
|
||||||
|
this.raycaster.far = this.data.pressDistance
|
||||||
|
// Create a direction vector (doesnt matter because it is supershort for 'touch' purposes)
|
||||||
|
const direction = new THREE.Vector3(1.0,0,0);
|
||||||
|
this.raycaster.set(this.fingerWorldPosition, direction)
|
||||||
|
intersects = this.raycaster.intersectObjects([object3D],true)
|
||||||
|
|
||||||
|
object3D.getWorldPosition(this.worldPosition)
|
||||||
|
|
||||||
|
distance = this.fingerWorldPosition.distanceTo(this.worldPosition)
|
||||||
|
minDistance = distance < minDistance ? distance : minDistance
|
||||||
|
|
||||||
|
if (intersects.length ){
|
||||||
|
if( !this.pressed ){
|
||||||
|
this.el.emit('pressedstarted');
|
||||||
|
this.el.emit('click');
|
||||||
|
this.pressed = setTimeout( () => {
|
||||||
|
this.el.emit('pressedended');
|
||||||
|
this.pressed = null
|
||||||
|
},300)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.distance = minDistance
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
window.AFRAME.registerComponent('xrf-wear', {
|
||||||
|
schema:{
|
||||||
|
el: {type:"selector"},
|
||||||
|
position: {type:"vec3"},
|
||||||
|
rotation: {type:"vec3"}
|
||||||
|
},
|
||||||
|
init: function(){
|
||||||
|
$('a-scene').addEventListener('enter-vr', (e) => this.wear(e) )
|
||||||
|
$('a-scene').addEventListener('exit-vr', (e) => this.unwear(e) )
|
||||||
|
},
|
||||||
|
wear: function(){
|
||||||
|
if( !this.wearable ){
|
||||||
|
let d = this.data
|
||||||
|
this.wearable = new THREE.Group()
|
||||||
|
this.el.object3D.children.map( (c) => this.wearable.add(c) )
|
||||||
|
this.wearable.position.set( d.position.x, d.position.y, d.position.z)
|
||||||
|
this.wearable.rotation.set( d.rotation.x, d.rotation.y, d.rotation.z)
|
||||||
|
}
|
||||||
|
this.data.el.object3D.add(this.wearable)
|
||||||
|
},
|
||||||
|
unwear: function(){
|
||||||
|
this.data.el.remove(this.wearable)
|
||||||
|
this.wearable.children.map( (c) => this.el.object3D.add(c) )
|
||||||
|
delete this.wearable
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue