Documenting a quick short tutorial on how to add this library to your project and make something pick-upabble
See original GitHub issue- 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>
- add physics:
add the
physics
component to your scene note: tryingphysics="gravity: 0"
can sometimes help with debugging some issues, try at your own risk.
`<a-scene physics>`
- 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})
})
}
});
- 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>
- 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 -->
- 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:
- Created 3 years ago
- Reactions:3
- Comments:7 (6 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Nice. I imagine using networked-aframe will come up soon, so I’ll probably hear from you again soon. 😉
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