better #rot (blink-controls some sidefx)

This commit is contained in:
Leon van Kammen 2023-12-12 18:09:30 +01:00
parent 512fae8889
commit 5ec4c8ca8a
12 changed files with 11818 additions and 46 deletions

View File

@ -1,5 +1,5 @@
/*
* v0.5.1 generated at Tue Dec 12 05:22:39 PM CET 2023
* v0.5.1 generated at Tue Dec 12 06:06:16 PM CET 2023
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
@ -1180,6 +1180,7 @@ xrf.frag.pos = function(v, opts){
camera.position.y = v.y
camera.position.z = v.z
}
camera.updateMatrixWorld()
}
xrf.frag.rot = function(v, opts){
let { frag, mesh, model, camera, scene, renderer, THREE} = opts
@ -1190,6 +1191,8 @@ xrf.frag.rot = function(v, opts){
v.y * Math.PI / 180,
v.z * Math.PI / 180
)
camera.rotation.offset = camera.rotation.clone() // remember
//camera.updateProjectionMatrix()
}else{
obj = model.scene.isReparented ? model.scene.children[0] : model.scene
obj.rotation.set(
@ -2765,6 +2768,59 @@ window.AFRAME.registerComponent('xrf', {
},
})
// look-controls turns off autoUpdateMatrix (of player) which
// will break teleporting and other stuff
// overriding this is easier then adding updateMatrixWorld() everywhere else
//AFRAME.components['look-controls'].Component.prototype.onEnterVR = function () {}
//AFRAME.components['look-controls'].Component.prototype.onExitVR = function () {}
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
}
window.AFRAME.registerComponent('xrf-button', {
schema: {
label: {
@ -2803,6 +2859,7 @@ window.AFRAME.registerComponent('xrf-button', {
depth: 0.005
});
el.setAttribute('material', {
shader: "flat",
color: this.color,
transparent:true,
opacity:0.7
@ -3004,19 +3061,6 @@ window.AFRAME.registerComponent('xrf-get', {
});
// gaze click on mobile VR
AFRAME.registerComponent('xrf-moveplayer',{
schema:{
},
init:function(data){
this.player = document.querySelector('#player')
},
tick:function(){
this.player.object3D.rotation.copy( this.el.object3D.rotation )
this.player.object3D.position.copy( this.el.object3D.position )
}
});
window.AFRAME.registerComponent('xrf-wear', {
schema:{
el: {type:"selector"},

View File

@ -1,5 +1,5 @@
/*
* v0.5.1 generated at Tue Dec 12 05:22:39 PM CET 2023
* v0.5.1 generated at Tue Dec 12 06:06:16 PM CET 2023
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
@ -1174,6 +1174,7 @@ xrf.frag.pos = function(v, opts){
camera.position.y = v.y
camera.position.z = v.z
}
camera.updateMatrixWorld()
}
xrf.frag.rot = function(v, opts){
let { frag, mesh, model, camera, scene, renderer, THREE} = opts
@ -1184,6 +1185,8 @@ xrf.frag.rot = function(v, opts){
v.y * Math.PI / 180,
v.z * Math.PI / 180
)
camera.rotation.offset = camera.rotation.clone() // remember
//camera.updateProjectionMatrix()
}else{
obj = model.scene.isReparented ? model.scene.children[0] : model.scene
obj.rotation.set(
@ -2759,6 +2762,59 @@ window.AFRAME.registerComponent('xrf', {
},
})
// look-controls turns off autoUpdateMatrix (of player) which
// will break teleporting and other stuff
// overriding this is easier then adding updateMatrixWorld() everywhere else
//AFRAME.components['look-controls'].Component.prototype.onEnterVR = function () {}
//AFRAME.components['look-controls'].Component.prototype.onExitVR = function () {}
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
}
window.AFRAME.registerComponent('xrf-button', {
schema: {
label: {
@ -2797,6 +2853,7 @@ window.AFRAME.registerComponent('xrf-button', {
depth: 0.005
});
el.setAttribute('material', {
shader: "flat",
color: this.color,
transparent:true,
opacity:0.7
@ -2998,19 +3055,6 @@ window.AFRAME.registerComponent('xrf-get', {
});
// gaze click on mobile VR
AFRAME.registerComponent('xrf-moveplayer',{
schema:{
},
init:function(data){
this.player = document.querySelector('#player')
},
tick:function(){
this.player.object3D.rotation.copy( this.el.object3D.rotation )
this.player.object3D.position.copy( this.el.object3D.position )
}
});
window.AFRAME.registerComponent('xrf-wear', {
schema:{
el: {type:"selector"},

11634
dist/xrfragment.module.js vendored

File diff suppressed because it is too large Load Diff

View File

@ -1,5 +1,5 @@
/*
* v0.5.1 generated at Tue Dec 12 05:22:39 PM CET 2023
* v0.5.1 generated at Tue Dec 12 06:06:16 PM CET 2023
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
@ -1174,6 +1174,7 @@ xrf.frag.pos = function(v, opts){
camera.position.y = v.y
camera.position.z = v.z
}
camera.updateMatrixWorld()
}
xrf.frag.rot = function(v, opts){
let { frag, mesh, model, camera, scene, renderer, THREE} = opts
@ -1184,6 +1185,8 @@ xrf.frag.rot = function(v, opts){
v.y * Math.PI / 180,
v.z * Math.PI / 180
)
camera.rotation.offset = camera.rotation.clone() // remember
//camera.updateProjectionMatrix()
}else{
obj = model.scene.isReparented ? model.scene.children[0] : model.scene
obj.rotation.set(

View File

@ -1,5 +1,5 @@
/*
* v0.5.1 generated at Tue Dec 12 05:22:39 PM CET 2023
* v0.5.1 generated at Tue Dec 12 06:06:16 PM CET 2023
* https://xrfragment.org
* SPDX-License-Identifier: MPL-2.0
*/
@ -1174,6 +1174,7 @@ xrf.frag.pos = function(v, opts){
camera.position.y = v.y
camera.position.z = v.z
}
camera.updateMatrixWorld()
}
xrf.frag.rot = function(v, opts){
let { frag, mesh, model, camera, scene, renderer, THREE} = opts
@ -1184,6 +1185,8 @@ xrf.frag.rot = function(v, opts){
v.y * Math.PI / 180,
v.z * Math.PI / 180
)
camera.rotation.offset = camera.rotation.clone() // remember
//camera.updateProjectionMatrix()
}else{
obj = model.scene.isReparented ? model.scene.children[0] : model.scene
obj.rotation.set(

View File

@ -29,8 +29,8 @@
<canvas id="qrcode" style="display:none" width="300" height="300"></canvas>
<a-scene xr-mode-ui="XRMode: xr" renderer="colorManagement: true; highRefreshRate:true" light="defaultLightsEnabled: false">
<a-entity id="player">
<a-entity camera="fov:90" position="0 1.6 0" wasd-controls look-controls id="camera"></a-entity>
<a-entity id="player" wasd-controls look-controls>
<a-entity camera="fov:90" position="0 1.6 0" id="camera"></a-entity>
<a-entity id="left-hand" laser-controls="hand: left" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: .floor">
<a-entity rotation="-35 0 0" position="0 0.1 0" id="navigator">
<a-entity id="back" xrf-button="label: <; width:0.05; action: history.back()" position="-0.025 0 0" class="ray"></a-entity>

2
make
View File

@ -93,7 +93,7 @@ build(){
test -f /tmp/xrf-aframe.js || {
wget "https://aframe.io/releases/1.5.0/aframe.min.js" -O /tmp/xrf-aframe.js
wget "https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js" -O /tmp/xrf-blink.js
for i in /tmp/xrf-*.js; do echo -e "\n" >> $i; done # add extra linebreak to prevent bundle issues
#for i in /tmp/xrf-*.js; do echo -e "\n" >> $i; done # add extra linebreak to prevent bundle issues
}
cat /tmp/xrf-*.js dist/xrfragment.aframe.js > dist/xrfragment.aframe.all.js

View File

@ -0,0 +1,53 @@
// look-controls turns off autoUpdateMatrix (of player) which
// will break teleporting and other stuff
// overriding this is easier then adding updateMatrixWorld() everywhere else
//AFRAME.components['look-controls'].Component.prototype.onEnterVR = function () {}
//AFRAME.components['look-controls'].Component.prototype.onExitVR = function () {}
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
}

View File

@ -36,6 +36,7 @@ window.AFRAME.registerComponent('xrf-button', {
depth: 0.005
});
el.setAttribute('material', {
shader: "flat",
color: this.color,
transparent:true,
opacity:0.7

View File

@ -1,13 +0,0 @@
// gaze click on mobile VR
AFRAME.registerComponent('xrf-moveplayer',{
schema:{
},
init:function(data){
this.player = document.querySelector('#player')
},
tick:function(){
this.player.object3D.rotation.copy( this.el.object3D.rotation )
this.player.object3D.position.copy( this.el.object3D.position )
}
});

View File

@ -15,4 +15,5 @@ xrf.frag.pos = function(v, opts){
camera.position.y = v.y
camera.position.z = v.z
}
camera.updateMatrixWorld()
}

View File

@ -7,6 +7,8 @@ xrf.frag.rot = function(v, opts){
v.y * Math.PI / 180,
v.z * Math.PI / 180
)
camera.rotation.offset = camera.rotation.clone() // remember
//camera.updateProjectionMatrix()
}else{
obj = model.scene.isReparented ? model.scene.children[0] : model.scene
obj.rotation.set(