├── .gitignore
├── .npmignore
├── LICENSE.md
├── README.md
├── examples
├── 00_simple
│ └── index.html
├── 01_buttons
│ └── index.html
├── 02_vibration
│ └── index.html
├── 03_intersection_events
│ └── index.html
├── aframe.js
└── utils
│ └── laser.js
├── index.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | examples
2 | .idea
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Richard Anaya
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # aframe-webvr-controller
2 | A-Frame ( http://aframe.io ) is a library made by Mozilla to make VR experiences in the web.
3 | This is a component for quickly attaching objects to WebVR controllers in a-frame. This library works perfectly fine with HTC-Vive using WebVR enabled versions of chrome and is the primary reason I made this library! For more information, check out http://webvr.info
4 |
5 | Check out demo here: http://richardanaya.github.io/aframe-webvr-controller/examples/02_vibration/index.html
6 |
7 | Features
8 | * Position tracking
9 | * Simple button events
10 | * Vibration
11 | * Events on triggering while interesected
12 |
13 | Notes
14 | * You may have to build the latest master branch of aframe to get it to recognize your HTC Vive can go into VR mode ( or just copy mine from examples )
15 |
16 | # Installing
17 |
18 | ```
19 | npm install aframe-webvr-controller
20 | ```
21 |
22 | # Usage
23 | Using this component is simple. Pass in the index of the controller you wish to use. Please make sure you have an a-camera at position <0,0,0>, otherwise strange offsetting of the controllers may occur!
24 |
25 | ```html
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | ```
40 |
41 | Let's add some button events. There are several buttons your webvrcontroller may have. For HTC Vive:
42 | * webvrcontrollerbutton0pressed/webvrcontrollerbutton0released - circle button
43 | * webvrcontrollerbutton1pressed/webvrcontrollerbutton1released - trigger button
44 | * webvrcontrollerbutton2pressed/webvrcontrollerbutton2released - grip button
45 | * webvrcontrollerbutton3pressed/webvrcontrollerbutton3released - menu button
46 |
47 | ```html
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 | ```
68 |
69 | Now lets add some vibration.
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 | You can also pass in a number in millseconds to represent a delay (the default delay is 100). Setting the property to false or 0 will turn off vibration.
92 |
93 | Now lets add some events for when a user presses a button while they are intersecting a component
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
--------------------------------------------------------------------------------
/examples/00_simple/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/examples/01_buttons/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/examples/02_vibration/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/examples/03_intersection_events/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/examples/aframe.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/richardanaya/aframe-webvr-controller/655d72a5bf0af7e524b8e056250fbf88cecf29e5/examples/aframe.js
--------------------------------------------------------------------------------
/examples/utils/laser.js:
--------------------------------------------------------------------------------
1 | var originVector = new THREE.Vector3(0, 0, 0);
2 |
3 | AFRAME.registerComponent('laser', {
4 | dependencies: ['material', 'raycaster'],
5 |
6 | init: function () {
7 | var el = this.el;
8 | var geometry = new THREE.Geometry();
9 | var material = new THREE.LineBasicMaterial({
10 | color: el.getComputedAttribute('material').color
11 | });
12 | var raycaster = el.components.raycaster.raycaster;
13 | var length = raycaster.far === Infinity ? 1000 : raycaster.far;
14 |
15 | geometry.vertices.push(originVector,
16 | raycaster.ray.direction.clone().multiplyScalar(length));
17 | material.opacity = el.getComputedAttribute('material').opacity;
18 | material.transparent = true;
19 | el.setObject3D('line', new THREE.Line(geometry, material));
20 | }
21 | });
22 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | // aframe-webvr-controller.js
2 | // repo : https://github.com/richardanaya/aframe-webvr-controller
3 | // license : MIT
4 |
5 | (function (window, module, AFRAME) {
6 | "use strict";
7 | AFRAME = AFRAME.aframeCore || AFRAME;
8 | function getPoseMatrix (pose, display) {
9 | var orientation = new THREE.Quaternion();
10 | var position = new THREE.Vector3();
11 | var scale = new THREE.Vector3();
12 | scale.fromArray([1,1,1]);
13 |
14 | if (!orientation) {
15 | orientation.fromArray([0, 0, 0, 1]);
16 | }
17 | else {
18 | orientation.fromArray(pose.orientation);
19 | }
20 | if (!position) {
21 | position.fromArray([0, 0, 0]);
22 | }
23 | else {
24 | position.fromArray(pose.position);
25 | }
26 |
27 | var m = new THREE.Matrix4();
28 | m.compose(position,orientation,scale)
29 |
30 |
31 | var stage = new THREE.Matrix4();
32 | stage.fromArray(display.stageParameters.sittingToStandingTransform);
33 | stage.multiply(m);
34 | return stage;
35 | }
36 |
37 | AFRAME.registerComponent('webvr-controller', {
38 | schema: { type: 'int' },
39 |
40 | watchIntersectionForButton: function(button){
41 | var _this = this;
42 | function handleRayPress(){
43 | if(!this.components.raycaster){return;}
44 | var ints = this.components.raycaster.intersectedEls;
45 | for(var i = 0 ; i < ints.length; i++){
46 | if(ints[i]!=_this.el && _this.intersections[i].face != null){
47 | ints[i].emit("raycaster-intersected-webvrcontroller"+_this.attrValue+"button"+button+"pressed",{intersection:_this.intersections[i],intersections:_this.intersections})
48 | return;
49 | }
50 | }
51 | }
52 | function handleRayReleased(){
53 | if(!this.components.raycaster){return;}
54 | var ints = this.components.raycaster.intersectedEls;
55 | for(var i = 0 ; i < ints.length; i++){
56 | if(ints[i]!=_this.el && _this.intersections[i].face != null){
57 | ints[i].emit("raycaster-intersected-webvrcontroller"+_this.attrValue+"button"+button+"released",{intersection:_this.intersections[i],intersections:_this.intersections})
58 | return;
59 | }
60 | }
61 | }
62 | _this.el.addEventListener("webvrcontrollerbutton"+button+"pressed",handleRayPress)
63 | _this.el.addEventListener("webvrcontrollerbutton"+button+"released",handleRayReleased)
64 | },
65 |
66 | init: function(){
67 | var _this = this;
68 | _this.intersections = [];
69 | _this.intersectionEvents = [];
70 | function handleIntersections(e){
71 | _this.intersections = e.detail.intersections;
72 | }
73 | _this.el.addEventListener("raycaster-intersection",handleIntersections);
74 | },
75 |
76 | update: function(){
77 | if(!this.buttons){
78 | this.buttons = [];
79 | }
80 | var _this = this;
81 | navigator.getVRDisplays().then(function(displays) {
82 | if (displays.length > 0) {
83 | _this.display = displays[0]; }
84 | });
85 | },
86 |
87 | tick: function () {
88 | var object3D = this.el.object3D;
89 | if(this.display){
90 | var vrGamepads = [];
91 |
92 | var gamepads = navigator.getGamepads();
93 |
94 | for (var i = 0; i < gamepads.length; ++i) {
95 | var gamepad = gamepads[i];
96 | if (gamepad && gamepad.pose) {
97 | vrGamepads.push(gamepad);
98 | }
99 | }
100 |
101 | if(this.display && vrGamepads.length>this.attrValue){
102 | var gamepad = vrGamepads[this.attrValue];
103 |
104 | if ("vibrate" in gamepad) {
105 | var vibration = this.el.getAttribute("webvr-controller-vibration");
106 | if(vibration == "true"){
107 | gamepad.vibrate(100)
108 | }
109 | if(vibration|0 > 0){
110 | gamepad.vibrate(vibration)
111 | }
112 | }
113 |
114 | for (var j = 0; j < gamepad.buttons.length; ++j) {
115 | if(this.intersectionEvents[j]!==true){
116 | this.watchIntersectionForButton(j);
117 | this.intersectionEvents[j] = true;
118 | }
119 | if (gamepad.buttons[j].pressed) {
120 | if(this.buttons[j]===false||this.buttons[j]===undefined){
121 | this.buttons[j]=true;
122 | this.el.emit("webvrcontrollerbutton"+j+"pressed");
123 | }
124 | }
125 | else {
126 | if(this.buttons[j]===true){
127 | this.buttons[j]=false;
128 | this.el.emit("webvrcontrollerbutton"+j+"released");
129 | }
130 | }
131 | }
132 | object3D.matrix = getPoseMatrix(gamepad.pose, this.display);
133 | object3D.matrixAutoUpdate = false;
134 | }
135 | }
136 | }
137 | });
138 | })(
139 | typeof window !== "undefined" ? window : {},
140 | typeof module !== "undefined" ? module : {},
141 | typeof require !== "undefined" ? AFRAME || window.AFRAME || require("aframe") : (AFRAME || window.AFRAME)
142 | );
143 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "aframe-webvr-controller",
3 | "version": "0.0.7",
4 | "description": "A component for quickly creating objects that track to a webvr controller",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/richardanaya/aframe-webvr-controller.git"
12 | },
13 | "keywords": [
14 | "aframe",
15 | "webvr",
16 | "controller"
17 | ],
18 | "author": "Richard Anaya (http://www.richardanaya.com/)",
19 | "license": "MIT",
20 | "bugs": {
21 | "url": "https://github.com/richardanaya/aframe-webvr-controller/issues"
22 | },
23 | "homepage": "https://github.com/richardanaya/aframe-webvr-controller#readme",
24 | "dependencies": {
25 | "aframe": "latest"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------