aframe.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. "use strict";
  2. // VWF & A-Frame view driver
  3. // Copyright 2017 Krestianstvo.org project
  4. //
  5. // Copyright 2012 United States Government, as represented by the Secretary of Defense, Under
  6. // Secretary of Defense (Personnel & Readiness).
  7. //
  8. // Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
  9. // in compliance with the License. You may obtain a copy of the License at
  10. //
  11. // http://www.apache.org/licenses/LICENSE-2.0
  12. //
  13. // Unless required by applicable law or agreed to in writing, software distributed under the License
  14. // is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  15. // or implied. See the License for the specific language governing permissions and limitations under
  16. // the License.
  17. /// vwf/view/lesson creates a view interface for instruction text.
  18. ///
  19. /// @module vwf/view/aframe
  20. /// @requires vwf/view
  21. define(["module", "vwf/view"], function (module, view) {
  22. var self;
  23. return view.load(module, {
  24. // == Module Definition ====================================================================
  25. initialize: function (options) {
  26. self = this;
  27. this.nodes = {};
  28. this.state.appInitialized = false;
  29. if ( options === undefined ) { options = {}; }
  30. if (typeof options == "object") {
  31. this.rootSelector = options["application-root"];
  32. }
  33. else {
  34. this.rootSelector = options;
  35. }
  36. this.gearvr = options.gearvr !== undefined ? options.gearvr : false;
  37. this.wmrright = options.wmrright !== undefined ? options.wmrright : false;
  38. this.wmrleft = options.wmrleft !== undefined ? options.wmrleft : false;
  39. },
  40. createdNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
  41. childSource, childType, childIndex, childName, callback /* ( ready ) */) {
  42. var node = this.state.nodes[childID];
  43. // If the "nodes" object does not have this object in it, it must not be one that
  44. // this driver cares about
  45. if (!node) {
  46. return;
  47. }
  48. if (this.state.scenes[childID]) {
  49. let scene = this.state.scenes[childID];
  50. document.body.appendChild(scene); //append is not working in Edge browser
  51. createAvatarControl(scene);
  52. createAvatar.call(this, childID);
  53. // this.state.appInitialized = true;
  54. if (this.gearvr == true) {
  55. console.log("CREATE GEARVR HERE!!");
  56. createGearVRControls();
  57. createControlVR.call(this, childID, 'controlvr-');
  58. }
  59. if (this.wmrright == true) {
  60. console.log("CREATE WMR RIGHT HERE!!");
  61. createWMRVRControls('right');
  62. createControlVR.call(this, childID, 'wmrvr-right-');
  63. }
  64. if (this.wmrright == true) {
  65. console.log("CREATE WMR LEFT HERE!!");
  66. createWMRVRControls('left');
  67. createControlVR.call(this, childID, 'wmrvr-left-');
  68. }
  69. }
  70. if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj) {
  71. this.nodes[childID] = {id:childID,extends:childExtendsID};
  72. }
  73. // if(this.state.nodes[childID]) {
  74. // this.nodes[childID] = {id:childID,extends:childExtendsID};
  75. // }
  76. // else if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj.object3D instanceof THREE.Object3D) {
  77. // this.nodes[childID] = {id:childID,extends:childExtendsID};
  78. // }
  79. },
  80. initializedNode: function( nodeID, childID ) {
  81. var node = this.state.nodes[childID];
  82. if (!node) {
  83. return;
  84. }
  85. },
  86. createdProperty: function (nodeId, propertyName, propertyValue) {
  87. return this.satProperty(nodeId, propertyName, propertyValue);
  88. },
  89. initializedProperty: function (nodeId, propertyName, propertyValue) {
  90. return this.satProperty(nodeId, propertyName, propertyValue);
  91. },
  92. satProperty: function (nodeId, propertyName, propertyValue) {
  93. var selfs = this;
  94. var node = this.state.nodes[ nodeId ];
  95. if ( !( node && node.aframeObj ) ) {
  96. return;
  97. }
  98. // var aframeObject = node.aframeObj;
  99. // switch (propertyName) {
  100. // case "clickable":
  101. // if (propertyValue) {
  102. // aframeObject.addEventListener('click', function (evt) {
  103. // let cursorID = 'cursor-avatar-'+selfs.kernel.moniker();
  104. // if (evt.detail.cursorEl.id == cursorID) {
  105. // vwf_view.kernel.fireEvent(nodeId, "clickEvent")
  106. // }
  107. // });
  108. // }
  109. // break;
  110. // }
  111. },
  112. firedEvent: function (nodeID, eventName, eventParameters) {
  113. //var avatarID = vwf_view.kernel.find("", avatarName)
  114. var avatarName = 'avatar-' + self.kernel.moniker();
  115. if (eventName == "createAvatar") {
  116. console.log("!!!!");
  117. let avatarID = self.kernel.moniker();
  118. var nodeName = 'avatar-' + avatarID;
  119. var newNode = {
  120. "id": avatarName,
  121. "uri": avatarName,
  122. "extends": "http://vwf.example.com/aframe/avatar.vwf",
  123. "properties":{
  124. "localUrl": '',
  125. "remoteUrl":'',
  126. "displayName": randId(),
  127. "sharing": { audio: true, video: true }
  128. }
  129. }
  130. if (!self.state.nodes[avatarName]) {
  131. vwf_view.kernel.createChild(nodeID, avatarName, newNode);
  132. vwf_view.kernel.callMethod(avatarName, "createAvatarBody", []);
  133. //"/../assets/avatars/male/avatar1.gltf"
  134. }
  135. }
  136. // if (eventName == "setAvatarRotation") {
  137. // vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
  138. // }
  139. // if (eventName == "setAvatarPosition") {
  140. // vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
  141. // }
  142. },
  143. ticked: function (vwfTime) {
  144. updateAvatarPosition();
  145. updateHandControllerVR('controlvr-', '#gearvrcontrol');
  146. updateHandControllerVR('wmrvr-right-', '#wmrvrcontrolright');
  147. updateHandControllerVR('wmrvr-left-', '#wmrvrcontrolleft');
  148. //lerpTick ()
  149. }
  150. });
  151. function updateHandControllerVR(aName, aSelector) {
  152. //let avatarName = 'avatar-' + self.kernel.moniker();
  153. let avatarName = aName + self.kernel.moniker();
  154. let el = document.querySelector(aSelector);
  155. if (el) {
  156. let position = el.getAttribute('position');
  157. let rotation = el.getAttribute('rotation');
  158. if ( position && rotation) {
  159. // vwf_view.kernel.callMethod(avatarName, "updateAvatarVRControl", [postion, rotation]);
  160. vwf_view.kernel.setProperty(avatarName, "rotation", AFRAME.utils.coordinates.stringify(rotation));
  161. vwf_view.kernel.setProperty(avatarName, "position", AFRAME.utils.coordinates.stringify(position));
  162. //AFRAME.utils.coordinates.stringify(position)
  163. }
  164. }
  165. }
  166. function updateAvatarPosition() {
  167. let avatarName = 'avatar-' + self.kernel.moniker();
  168. let el = document.querySelector('#avatarControl');
  169. if (el) {
  170. let postion = el.getAttribute('position');
  171. let rotation = el.getAttribute('rotation');
  172. if ( postion && rotation) {
  173. //[postion.x, postion.y, postion.z] //[rotation.x, rotation.y, rotation.z]
  174. vwf_view.kernel.callMethod(avatarName, "followAvatarControl", [postion, rotation]);
  175. // vwf_view.kernel.setProperty(avatarName, "position", AFRAME.utils.coordinates.stringify(postion));
  176. // vwf_view.kernel.setProperty(avatarName, "rotation", AFRAME.utils.coordinates.stringify(rotation));
  177. }
  178. }
  179. }
  180. function createAvatarControl(aScene) {
  181. let avatarName = 'avatar-' + self.kernel.moniker();
  182. let controlEl = document.createElement('a-camera');
  183. // controlEl.setAttribute('avatar', '');
  184. controlEl.setAttribute('id', 'avatarControl');
  185. controlEl.setAttribute('wasd-controls', {});
  186. controlEl.setAttribute('look-controls', {});
  187. controlEl.setAttribute('gamepad-controls', {});
  188. controlEl.setAttribute('camera', 'active', true);
  189. controlEl.setAttribute('camera', 'near', 0.51);
  190. aScene.appendChild(controlEl);
  191. let cursorEl = document.createElement('a-cursor');
  192. cursorEl.setAttribute('id', 'cursor-'+avatarName);
  193. cursorEl.setAttribute('raycaster', {});
  194. cursorEl.setAttribute('raycaster', 'objects', '.intersectable');
  195. cursorEl.setAttribute('raycaster', 'showLine', false);
  196. // cursorEl.setAttribute('raycaster', {objects: '.intersectable', showLine: true, far: 100});
  197. // cursorEl.setAttribute('raycaster', 'showLine', true);
  198. controlEl.appendChild(cursorEl);
  199. // let gearVRControlsEl = document.createElement('a-entity');
  200. // gearVRControlsEl.setAttribute('id', 'gearvr-'+avatarName);
  201. // gearVRControlsEl.setAttribute('gearvr-controls', {});
  202. // aScene.appendChild(gearVRControlsEl);
  203. // controlEl.addEventListener('componentchanged', function (evt) {
  204. // if (evt.detail.name === 'position') {
  205. // var eventParameters = evt.detail.newData;
  206. // vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
  207. // }
  208. // if (evt.detail.name === 'rotation') {
  209. // var eventParameters = evt.detail.newData;
  210. // vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
  211. // }
  212. // });
  213. }
  214. function createAvatar(nodeID) {
  215. vwf_view.kernel.fireEvent(nodeID, "createAvatar")
  216. // let avatarID = self.kernel.moniker();
  217. // var nodeName = 'avatar-' + avatarID;
  218. // var newNode = {
  219. // "id": nodeName,
  220. // "uri": nodeName,
  221. // "extends": "http://vwf.example.com/aframe/avatar.vwf"
  222. // }
  223. // vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  224. // vwf_view.kernel.callMethod(nodeName, "createAvatarBody");
  225. }
  226. function randId() {
  227. return '_' + Math.random().toString(36).substr(2, 9);
  228. }
  229. function createGearVRControls() {
  230. let sceneEl = document.querySelector('a-scene');
  231. let gearvr = document.createElement('a-entity');
  232. gearvr.setAttribute('id', 'gearvrcontrol');
  233. gearvr.setAttribute('gearvr-controls', '');
  234. gearvr.setAttribute('gearvr-controls', 'hand', 'right');
  235. sceneEl.appendChild(gearvr);
  236. }
  237. function createWMRVRControls(hand) {
  238. let sceneEl = document.querySelector('a-scene');
  239. let wmrvr = document.createElement('a-entity');
  240. wmrvr.setAttribute('id', 'wmrvrcontrol'+hand);
  241. wmrvr.setAttribute('windows-motion-controls', '');
  242. wmrvr.setAttribute('windows-motion-controls', 'hand', hand);
  243. sceneEl.appendChild(wmrvr);
  244. }
  245. function createControlVR(nodeID, name) {
  246. let avatarID = self.kernel.moniker();
  247. var nodeName = name + avatarID;
  248. var newNode = {
  249. "id": nodeName,
  250. "uri": nodeName,
  251. "extends": "http://vwf.example.com/aframe/abox.vwf",
  252. "properties": {
  253. "color": "white",
  254. "position": "0 0 0",
  255. "height": 0.1,
  256. "width": 0.1,
  257. "depth": 1,
  258. },
  259. children: {
  260. "gearvr":
  261. {
  262. "extends": "http://vwf.example.com/aframe/gearvrcontrol-component.vwf",
  263. "type": "component",
  264. "properties": {
  265. }
  266. }
  267. // "interpolation":
  268. // {
  269. // "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  270. // "type": "component",
  271. // "properties": {
  272. // }
  273. // }
  274. }
  275. }
  276. vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  277. // vwf_view.kernel.callMethod(nodeName, "createAvatarBody");
  278. }
  279. });