How can I track controller movement events with WebVR and A-Frame?

Multi tool use
Multi tool use












0














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.










share|improve this question
























  • 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
















0














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.










share|improve this question
























  • 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














0












0








0







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.










share|improve this question















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Dec 27 '18 at 18:10

























asked Dec 27 '18 at 16:40









Ael

93111




93111












  • 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
















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












1 Answer
1






active

oldest

votes


















0














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]');






share|improve this answer























    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    0














    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]');






    share|improve this answer




























      0














      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]');






      share|improve this answer


























        0












        0








        0






        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]');






        share|improve this answer














        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]');







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Dec 29 '18 at 21:08

























        answered Dec 27 '18 at 19:18









        Diego Marcos

        1,83521013




        1,83521013






























            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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
            m,efeMZyvrnJB,3tR B86ZHlQoLUztzef,ES

            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas