question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Documenting a quick short tutorial on how to add this library to your project and make something pick-upabble

See original GitHub issue
  1. add libraries:
    <script src="https://unpkg.com/super-hands/dist/super-hands.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@^4.1.1/dist/aframe-event-set-component.min.js"></script>
    <script src="https://unpkg.com/aframe-physics-extras/dist/aframe-physics-extras.min.js"></script>
  1. add physics: add the physics component to your scene note: trying physics="gravity: 0" can sometimes help with debugging some issues, try at your own risk.
`<a-scene physics>`
  1. add mixins add these mixins within your <a-assets>
        <a-mixin id="all-interactions"
                 hoverable grabbable stretchable draggable
                 event-set__hoveron="_event: hover-start; material.opacity: 0.7; transparent: true"
                 event-set__hoveroff="_event: hover-end; material.opacity: 1; transparent: false"
                 dynamic-body
        ></a-mixin>

        <a-mixin id="grab-move"
                 hoverable grabbable draggable
                 event-set__hoveron="_event: hover-start; material.opacity: 0.7; transparent: true"
                 event-set__hoveroff="_event: hover-end; material.opacity: 1; transparent: false"
                 dynamic-body="shape: box; sphereRadius: 0.1"
        ></a-mixin>
        
        <a-mixin id="physics-hands"
                 physics-collider phase-shift
                 collision-filter="collisionForces: false"
                 static-body="shape: sphere; sphereRadius: 0.02"
                 super-hands="colliderEvent: collisions;
                              colliderEventProperty: els;
                              colliderEndEvent: collisions;
                              colliderEndEventProperty: clearedEls;"
        ></a-mixin>

3.5 make it efficient add the following component to your project:

      AFRAME.registerComponent('phase-shift', {
       init: function () {
         var el = this.el
         el.addEventListener('gripdown', function () {
           el.setAttribute('collision-filter', {collisionForces: true})
         })
         el.addEventListener('gripup', function () {
           el.setAttribute('collision-filter', {collisionForces: false})
         })
       }
     });
  1. give hands the ability to grab add the physics-hands mixin to your hand entities
        <a-entity id="rhand" mixin="physics-hands"
                hand-controls="hand: right">
      </a-entity>
      <a-entity id="lhand" mixin="physics-hands"
                hand-controls="hand: left">
      </a-entity>
  1. make a floor things won’t fall through add static-body component to your ground and whatever surfaces you want to be able to put things on
<a-box static-body width="100" height="0.01" depth="100" visible="false"></a-box>
<!-- if you already have a ground, you should just be able to add static-body to it -->
  1. make your thing able to be picked up add the mixin ‘all-interactions’ or ‘grab-move’
      <a-entity class="cube" mixin="cube all-interactions" position="0 0.265 -1" material="color: red"></a-entity>

Might be good to have this somewhere as a helpful starting point. From here, people can start modifying. This is basically what I extrapolated from the working demo I found.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
kylebakeriocommented, Feb 21, 2021

Nice. I imagine using networked-aframe will come up soon, so I’ll probably hear from you again soon. 😉

1reaction
rchovatiya88commented, Feb 21, 2021

Thank so much @kylebakerio and @wmurphyrd - i can confirm this works really well I also documented in the ReadMe of my demo project- https://github.com/rchovatiya88/chessvr

Read more comments on GitHub >

github_iconTop Results From Across the Web

Deep dive: Create and publish your first Python library
A complete guide for the creation of a Python library, from zero to CI/CD pipeline and automatic documentation generation.
Read more >
How to Write a Good Documentation for Your Open-Source ...
To write a good documentation create a guide to the key features of your library. Start at the beginning – cover the most...
Read more >
How to Write Good Documentation (And Its Essential Elements)
Creating a sample project means putting yourself in your user's shoes and actually making something useful with your library. Sample projects ...
Read more >
Create and use your own Dynamic Link Library (C++)
This walkthrough covers these tasks: Create a DLL project in Visual Studio. Add exported functions and variables to the DLL. Create a console ......
Read more >
Document Your Simple Library - Parallax Inc
This activity demonstrates how to document the functions in the header file so that a software package called Doxygen can automatically create the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found