Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sean-bradley/grabvr
A module for grabbing objects in WebVR, Three.js and VRController.js projects
https://github.com/sean-bradley/grabvr
grabvr rift threejs vive vrcontroller webvr
Last synced: 1 day ago
JSON representation
A module for grabbing objects in WebVR, Three.js and VRController.js projects
- Host: GitHub
- URL: https://github.com/sean-bradley/grabvr
- Owner: Sean-Bradley
- License: mit
- Created: 2018-04-15T14:06:00.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-24T20:59:57.000Z (8 months ago)
- Last Synced: 2024-05-02T02:13:48.175Z (7 months ago)
- Topics: grabvr, rift, threejs, vive, vrcontroller, webvr
- Language: TypeScript
- Homepage:
- Size: 1.99 MB
- Stars: 11
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GrabVR
A module for grabbing objects in WebVR Three.js projects
You can download the project and view the examples.
``` bash
git clone https://github.com/Sean-Bradley/GrabVR.git
cd GrabVR
npm install
npm run dev
```
Visit https://127.0.0.1:3000/
## How to import GrabVR
```bash
npm install grabvr
```
Import into your code
``` javascript
import GrabVR from 'grabvr'
```
## Instantiate And Use
Create a GrabVR object.
```javascript
const grabVR = new GrabVR()
```
Create some Object3Ds and add then to the GrabVR grabables.
```javascript
const box = new THREE.Mesh(
new THREE.BoxGeometry(1.0, 1.0, 1.0),
new THREE.MeshBasicMaterial({
color: 0xff0066,
wireframe: true
})
)
scene.add(box)
grabVR.grabableObjects().push(box);
```
Add your VR controllers to the scene (see example code for better understanding)
```javascript
const controllerGrip0 = renderer.xr.getControllerGrip(0)
controllerGrip0.addEventListener("connected", (e: any) => {
controllerGrip0.add(lefthand)
grabVR.add(0, controllerGrip0, e.data.gamepad)
scene.add(controllerGrip0)
})
```
Update in the render loop.
```javascript
grabVR.update(clock.getDelta());
renderer.render(scene, camera)
```
## Example 1
Basic GrabVR demo.
[](https://sbcode.net/threejs/grabvr-1/)
## Example 2
GrabVR demo using Cannonjs.
[](https://sbcode.net/threejs/grabvr-2/)
## GrabVR Source Project
This is a typescript project consisting of two sub projects with there own *tsconfigs*.
To edit this example, then modify the files in `./src/client/` or `./src/server/`
The projects will auto recompile if you started it by using *npm run dev*
## Threejs TypeScript Course
Visit https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate for a Threejs TypeScript boilerplate containing many extra branches that demonstrate many examples of Threejs.
> To help support this Threejs example, please take a moment to look at my official Threejs TypeScript course at
[](https://www.udemy.com/course/threejs-tutorials/?referralCode=4C7E1DE91C3E42F69D0F)
[Three.js and TypeScript](https://www.udemy.com/course/threejs-tutorials/?referralCode=4C7E1DE91C3E42F69D0F)
Discount Coupons for all my courses can be found at [https://sbcode.net/coupons](https://sbcode.net/coupons)