Build a two-handed bow and arrow w/physics in webVR using A-Frame
This project shows how to make a two-handed bow and arrow in webVR using A-Frame.
Read "The Bow and Arrow is Virtual Reality's Hello World" on Medium
You can pick up the bow using either hand. Then, pull the trigger on your back hand to take aim. Releasing the trigger shoots an arrow. The force with which the arrow travels depends on the distance between your back hand and the bow.
It currently works much better in Firefox Nightly than in Chrome. You'll have to download a webVR capable browser
You can try a live demo here | Motion Capture Demo
I made modifications to the grab
component to communicate with the bow about which hand was used to grab it and apply rotations to the held object.
Since I reuse arrows from a pool to improve performance, I also made slight modifications to the physics system in a-frame-physics-system
so that it would emit a 'body-played' when the dynamic body is synced.
The rotate-toward-velocity
component keeps the arrow pointed in the direction of travel.
The poissondisc-forest
component distributes 'trees' around you in an attempt to mimic realistic vegetation distribution. Here I'm using boxes instead of the default tree model to showcase the physics system. Some are static and cannot be move, others are dynamic and will topple over when you shoot them.
To speed development, you'll want to make use of avatar motion capture recordings by appending the recording to the url. Support was added in 2.1 by @Hazardus.
You can see it in action at: https://imgntn.github.io/jBow/?avatar-recording=recording-jbow.json
1.0
2.0
2.1 [x] motion capture recording support by @Hazardu5
3.0
5.0