How can I track controller movement events with WebVR and A-Frame?
![Multi tool use Multi tool use](http://sgv.ssvwv.com/sg/ssvwvcomimagb.png)
Multi tool use
I have a WebVR page made with A-Frame, using an Oculus Rift with touch controllers. I have these elements for the controllers:
<a-entity oculus-touch-controls="hand: right" right-control-listener></a-entity>
<a-entity oculus-touch-controls="hand: left" left-control-listener></a-entity>
<a-entity laser-controls="hand: right" raycaster="objects: .clickable"></a-entity>
I want to select or grip an object and move it as a controller moves. But I haven't been able to find an event for controller movement. Mousemove doesn't seem to be available, even though mouseup and mousedown are.
javascript aframe virtual-reality webvr oculus
add a comment |
I have a WebVR page made with A-Frame, using an Oculus Rift with touch controllers. I have these elements for the controllers:
<a-entity oculus-touch-controls="hand: right" right-control-listener></a-entity>
<a-entity oculus-touch-controls="hand: left" left-control-listener></a-entity>
<a-entity laser-controls="hand: right" raycaster="objects: .clickable"></a-entity>
I want to select or grip an object and move it as a controller moves. But I haven't been able to find an event for controller movement. Mousemove doesn't seem to be available, even though mouseup and mousedown are.
javascript aframe virtual-reality webvr oculus
FYI,laser-controls
already supports Oculus Touch. Theoculus-touch-controls
components are redundant. They are set bylaser-controls
– Diego Marcos
Dec 27 '18 at 19:36
add a comment |
I have a WebVR page made with A-Frame, using an Oculus Rift with touch controllers. I have these elements for the controllers:
<a-entity oculus-touch-controls="hand: right" right-control-listener></a-entity>
<a-entity oculus-touch-controls="hand: left" left-control-listener></a-entity>
<a-entity laser-controls="hand: right" raycaster="objects: .clickable"></a-entity>
I want to select or grip an object and move it as a controller moves. But I haven't been able to find an event for controller movement. Mousemove doesn't seem to be available, even though mouseup and mousedown are.
javascript aframe virtual-reality webvr oculus
I have a WebVR page made with A-Frame, using an Oculus Rift with touch controllers. I have these elements for the controllers:
<a-entity oculus-touch-controls="hand: right" right-control-listener></a-entity>
<a-entity oculus-touch-controls="hand: left" left-control-listener></a-entity>
<a-entity laser-controls="hand: right" raycaster="objects: .clickable"></a-entity>
I want to select or grip an object and move it as a controller moves. But I haven't been able to find an event for controller movement. Mousemove doesn't seem to be available, even though mouseup and mousedown are.
javascript aframe virtual-reality webvr oculus
javascript aframe virtual-reality webvr oculus
edited Dec 27 '18 at 18:10
asked Dec 27 '18 at 16:40
![](https://i.stack.imgur.com/UNkCc.png?s=32&g=1)
![](https://i.stack.imgur.com/UNkCc.png?s=32&g=1)
Ael
93111
93111
FYI,laser-controls
already supports Oculus Touch. Theoculus-touch-controls
components are redundant. They are set bylaser-controls
– Diego Marcos
Dec 27 '18 at 19:36
add a comment |
FYI,laser-controls
already supports Oculus Touch. Theoculus-touch-controls
components are redundant. They are set bylaser-controls
– Diego Marcos
Dec 27 '18 at 19:36
FYI,
laser-controls
already supports Oculus Touch. The oculus-touch-controls
components are redundant. They are set by laser-controls
– Diego Marcos
Dec 27 '18 at 19:36
FYI,
laser-controls
already supports Oculus Touch. The oculus-touch-controls
components are redundant. They are set by laser-controls
– Diego Marcos
Dec 27 '18 at 19:36
add a comment |
1 Answer
1
active
oldest
votes
Use the tick
method. If you want to track an entity position or rotation do:
AFRAME.registerComponent('track', {
init: function () {
this.trackedEl = document.querySelector('#trackedEntity');
},
tick: function () {
this.el.object3D.position.x = this.trackedEl.object3D.position.x;
}
});
See a demo where the red ball tracks the x position of the camera (moved with wasd keys). You can do something similar using an appropriate selector for the controller entity you want to track. e.g: document.querySelector('[laser-controls]');
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53948178%2fhow-can-i-track-controller-movement-events-with-webvr-and-a-frame%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Use the tick
method. If you want to track an entity position or rotation do:
AFRAME.registerComponent('track', {
init: function () {
this.trackedEl = document.querySelector('#trackedEntity');
},
tick: function () {
this.el.object3D.position.x = this.trackedEl.object3D.position.x;
}
});
See a demo where the red ball tracks the x position of the camera (moved with wasd keys). You can do something similar using an appropriate selector for the controller entity you want to track. e.g: document.querySelector('[laser-controls]');
add a comment |
Use the tick
method. If you want to track an entity position or rotation do:
AFRAME.registerComponent('track', {
init: function () {
this.trackedEl = document.querySelector('#trackedEntity');
},
tick: function () {
this.el.object3D.position.x = this.trackedEl.object3D.position.x;
}
});
See a demo where the red ball tracks the x position of the camera (moved with wasd keys). You can do something similar using an appropriate selector for the controller entity you want to track. e.g: document.querySelector('[laser-controls]');
add a comment |
Use the tick
method. If you want to track an entity position or rotation do:
AFRAME.registerComponent('track', {
init: function () {
this.trackedEl = document.querySelector('#trackedEntity');
},
tick: function () {
this.el.object3D.position.x = this.trackedEl.object3D.position.x;
}
});
See a demo where the red ball tracks the x position of the camera (moved with wasd keys). You can do something similar using an appropriate selector for the controller entity you want to track. e.g: document.querySelector('[laser-controls]');
Use the tick
method. If you want to track an entity position or rotation do:
AFRAME.registerComponent('track', {
init: function () {
this.trackedEl = document.querySelector('#trackedEntity');
},
tick: function () {
this.el.object3D.position.x = this.trackedEl.object3D.position.x;
}
});
See a demo where the red ball tracks the x position of the camera (moved with wasd keys). You can do something similar using an appropriate selector for the controller entity you want to track. e.g: document.querySelector('[laser-controls]');
edited Dec 29 '18 at 21:08
answered Dec 27 '18 at 19:18
Diego Marcos
1,83521013
1,83521013
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53948178%2fhow-can-i-track-controller-movement-events-with-webvr-and-a-frame%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
yAt90,yyXV4dK hwYOpCCYxXW
FYI,
laser-controls
already supports Oculus Touch. Theoculus-touch-controls
components are redundant. They are set bylaser-controls
– Diego Marcos
Dec 27 '18 at 19:36