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

General Info

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

Models Used

• Bow model from Clara.io https://clara.io/view/96531052-8e7c-45db-992e-9eaa127349a6
• Arrow model from Clara.io https://clara.io/view/95c6882f-9216-4415-a06b-2e9591ad04b1
• Tree model from Clara.io https://clara.io/view/6ce48237-f4d4-4852-90f9-8f067fd09b29

Components + Modifications

• ground, grab and aabb-collider
• aframe-physics-system
• aframe-meshline

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.

Interaction Flow

• Listen to event for picking up the bow with primary hand
• Play nocking sound at bow position
• Measure distance between hands (shot force) while aiming
• Move the arrow back in the nock proportional to the shot force
• Draw a line to the back of the arrow
• Detect trigger release from back hand
• Apply impulse force to arrow toward front of bow to shoot arrow
• Play shooting sound at bow position
• Vibrate the controller when we release an arrow
• Rotate the arrow toward its velocity to get a nice arc during flight
• Collision detection to play hit sound at collision position and cleanup

Avatar Motion Capture Recording Support

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

To-Do:

1.0

• reduce lag at shot (try a pool, try more specific selectors)
• when arrows collide, return arrows to pool
• arrow rotation at shot should be front of bow
• why does arrow flip end over end? because impulse position is middle? -- had to set fixedRotation since i'm doing it myself
• realistic trajectory -- rotate toward velocity. probably its own component.
• add some targets
• sound for nocking arrow
• sound for shooting arrow
• haptic pulse for shooting arrow (doesnt seem to be supported anywhere yet)
• extend ground otherwise out of sight arrows might never collide

2.0

• add a cooldown otherwise we run through the whole pool of arrows.
• once you're reusing an arrow from the pool, it gets double the force every time. probably because we're reusing the physics body and it isnt fresh.
• add some trees at various locations to give some depth
• poisson disc for tree distribution
• string animations - meshline to back of arrow
• pull arrow back in bow to match force
• remove string from arrow model
• add some mountains

2.1 [x] motion capture recording support by @Hazardu5

3.0

• [] after pickup the rotation of the bow should be controlled by the line between the hands, not the controller rotation at all. followed by a short slerp back to real controller rotation after firing. ala the lab
• [] arrow is not hitting 'static-body' target obj. does hit primitive box, so its not a lack of CCD (continuous collision detection)
• [] increase poolsize for sounds to allow them to overlap
• [] how to better see the arrow during flight -- glow, particle trail?
• [] make arrow stick and then add cooldown delay before disappearing them
• [] visual indicator of target hit.
• [] animated targets (and their phyiscs bodies)
• [] haptic pulse on bow grab (working yet in FF/Chrome?)

5.0

• [] fire arrows
• [] nightmode
• [] enemy ai
• [] tower
• [] teleport
• [] multiplayer (syncing physics...??? hmm)