aframe.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  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. if (AFRAME.utils.device.isGearVR()) {
  57. let nodeName = 'gearvr-' + self.kernel.moniker();
  58. createGearVRControls();
  59. createGearVRController.call(this, childID, nodeName);
  60. }
  61. }
  62. if (this.wmrright == true) {
  63. console.log("CREATE WMR RIGHT HERE!!");
  64. if (AFRAME.utils.device.checkHasPositionalTracking()) {
  65. let nodeName = 'wmrvr-right-' + self.kernel.moniker();
  66. createWMRVRControls('right');
  67. createWMRVR.call(this, childID, nodeName);
  68. }
  69. }
  70. if (this.wmrright == true) {
  71. console.log("CREATE WMR LEFT HERE!!");
  72. if (AFRAME.utils.device.checkHasPositionalTracking()) {
  73. let nodeName = 'wmrvr-left-' + self.kernel.moniker();
  74. createWMRVRControls('left');
  75. createWMRVR.call(this, childID, nodeName);
  76. }
  77. }
  78. }
  79. if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj) {
  80. this.nodes[childID] = { id: childID, extends: childExtendsID };
  81. }
  82. // if(this.state.nodes[childID]) {
  83. // this.nodes[childID] = {id:childID,extends:childExtendsID};
  84. // }
  85. // else if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj.object3D instanceof THREE.Object3D) {
  86. // this.nodes[childID] = {id:childID,extends:childExtendsID};
  87. // }
  88. },
  89. initializedNode: function (nodeID, childID) {
  90. var node = this.state.nodes[childID];
  91. if (!node) {
  92. return;
  93. }
  94. },
  95. createdProperty: function (nodeId, propertyName, propertyValue) {
  96. return this.satProperty(nodeId, propertyName, propertyValue);
  97. },
  98. initializedProperty: function (nodeId, propertyName, propertyValue) {
  99. return this.satProperty(nodeId, propertyName, propertyValue);
  100. },
  101. satProperty: function (nodeId, propertyName, propertyValue) {
  102. var selfs = this;
  103. var node = this.state.nodes[nodeId];
  104. if (!(node && node.aframeObj)) {
  105. return;
  106. }
  107. // var aframeObject = node.aframeObj;
  108. // switch (propertyName) {
  109. // case "clickable":
  110. // if (propertyValue) {
  111. // aframeObject.addEventListener('click', function (evt) {
  112. // let cursorID = 'cursor-avatar-'+selfs.kernel.moniker();
  113. // if (evt.detail.cursorEl.id == cursorID) {
  114. // vwf_view.kernel.fireEvent(nodeId, "clickEvent")
  115. // }
  116. // });
  117. // }
  118. // break;
  119. // }
  120. },
  121. firedEvent: function (nodeID, eventName, eventParameters) {
  122. //var avatarID = vwf_view.kernel.find("", avatarName)
  123. var avatarName = 'avatar-' + self.kernel.moniker();
  124. if (eventName == "createAvatar") {
  125. console.log("!!!!");
  126. let avatarID = self.kernel.moniker();
  127. var nodeName = 'avatar-' + avatarID;
  128. var newNode = {
  129. "id": avatarName,
  130. "uri": avatarName,
  131. "extends": "http://vwf.example.com/aframe/avatar.vwf",
  132. "properties": {
  133. "localUrl": '',
  134. "remoteUrl": '',
  135. "displayName": randId(),
  136. "sharing": { audio: true, video: true }
  137. }
  138. }
  139. if (!self.state.nodes[avatarName]) {
  140. vwf_view.kernel.createChild(nodeID, avatarName, newNode);
  141. vwf_view.kernel.callMethod(avatarName, "createAvatarBody", []);
  142. //"/../assets/avatars/male/avatar1.gltf"
  143. }
  144. }
  145. // if (eventName == "setAvatarRotation") {
  146. // vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
  147. // }
  148. // if (eventName == "setAvatarPosition") {
  149. // vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
  150. // }
  151. },
  152. ticked: function (vwfTime) {
  153. updateAvatarPosition();
  154. //update vr controllers
  155. if (this.gearvr == true) {
  156. updateHandControllerVR('gearvr-', '#gearvrcontrol');
  157. }
  158. if (this.wmrright == true) {
  159. updateHandControllerVR('wmrvr-right-', '#wmrvrcontrolright');
  160. }
  161. if (this.wmrleft == true) {
  162. updateHandControllerVR('wmrvr-left-', '#wmrvrcontrolleft');
  163. }
  164. //lerpTick ()
  165. }
  166. });
  167. function compareCoordinates(a, b) {
  168. return a.x !== b.x || a.y !== b.y || a.z !== b.z
  169. }
  170. function updateAvatarPosition() {
  171. let avatarName = 'avatar-' + self.kernel.moniker();
  172. var node = self.state.nodes[avatarName];
  173. if (!node) return;
  174. if (!node.aframeObj) return;
  175. let el = document.querySelector('#avatarControl');
  176. if (el) {
  177. let position = el.getAttribute('position');
  178. let rotation = el.getAttribute('rotation');
  179. let currentPosition = node.aframeObj.getAttribute('position');
  180. let currentRotation = node.aframeObj.getAttribute('rotation');
  181. if (position && rotation && currentPosition && currentRotation) {
  182. if (compareCoordinates(position, currentPosition) || rotation.y !== currentRotation.y) {
  183. console.log("not equal!!")
  184. vwf_view.kernel.callMethod(avatarName, "followAvatarControl", [position, rotation]);
  185. }
  186. }
  187. }
  188. }
  189. function updateHandControllerVR(aName, aSelector) {
  190. //let avatarName = 'avatar-' + self.kernel.moniker();
  191. let avatarName = aName + self.kernel.moniker();
  192. var node = self.state.nodes[avatarName];
  193. if (!node) return;
  194. if (!node.aframeObj) return;
  195. let el = document.querySelector(aSelector);
  196. if (el) {
  197. let position = el.getAttribute('position');
  198. let rotation = el.getAttribute('rotation');
  199. let currentPosition = node.aframeObj.getAttribute('position');
  200. let currentRotation = node.aframeObj.getAttribute('rotation');
  201. if (position && rotation && currentPosition && currentRotation) {
  202. if (compareCoordinates(position, currentPosition) || compareCoordinates(rotation, currentRotation)) {
  203. console.log("not equal!!");
  204. vwf_view.kernel.setProperty(avatarName, "rotation", AFRAME.utils.coordinates.stringify(rotation));
  205. vwf_view.kernel.setProperty(avatarName, "position", AFRAME.utils.coordinates.stringify(position));
  206. }
  207. }
  208. }
  209. }
  210. function createAvatarControl(aScene) {
  211. let avatarName = 'avatar-' + self.kernel.moniker();
  212. let controlEl = document.createElement('a-camera');
  213. // controlEl.setAttribute('avatar', '');
  214. controlEl.setAttribute('id', 'avatarControl');
  215. controlEl.setAttribute('wasd-controls', {});
  216. controlEl.setAttribute('look-controls', {});
  217. controlEl.setAttribute('gamepad-controls', {});
  218. controlEl.setAttribute('camera', 'active', true);
  219. // controlEl.setAttribute('camera', 'near', 0.51);
  220. aScene.appendChild(controlEl);
  221. let cursorEl = document.createElement('a-cursor');
  222. cursorEl.setAttribute('id', 'cursor-' + avatarName);
  223. cursorEl.setAttribute('raycaster', {});
  224. cursorEl.setAttribute('raycaster', 'objects', '.intersectable');
  225. cursorEl.setAttribute('raycaster', 'showLine', false);
  226. // cursorEl.setAttribute('raycaster', {objects: '.intersectable', showLine: true, far: 100});
  227. // cursorEl.setAttribute('raycaster', 'showLine', true);
  228. controlEl.appendChild(cursorEl);
  229. // let gearVRControlsEl = document.createElement('a-entity');
  230. // gearVRControlsEl.setAttribute('id', 'gearvr-'+avatarName);
  231. // gearVRControlsEl.setAttribute('gearvr-controls', {});
  232. // aScene.appendChild(gearVRControlsEl);
  233. // controlEl.addEventListener('componentchanged', function (evt) {
  234. // if (evt.detail.name === 'position') {
  235. // var eventParameters = evt.detail.newData;
  236. // vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
  237. // }
  238. // if (evt.detail.name === 'rotation') {
  239. // var eventParameters = evt.detail.newData;
  240. // vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
  241. // }
  242. // });
  243. }
  244. function createWMRVR (nodeID, nodeName) {
  245. var newNode = {
  246. "id": nodeName,
  247. "uri": nodeName,
  248. "extends": "http://vwf.example.com/aframe/wmrvrcontroller.vwf",
  249. "properties": {
  250. }
  251. }
  252. if (!self.state.nodes[nodeName]) {
  253. vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  254. vwf_view.kernel.callMethod(nodeName, "createController", []);
  255. //"/../assets/controller/wmrvr.gltf"
  256. }
  257. }
  258. function createGearVRController(nodeID, nodeName) {
  259. var newNode = {
  260. "id": nodeName,
  261. "uri": nodeName,
  262. "extends": "http://vwf.example.com/aframe/gearvrcontroller.vwf",
  263. "properties": {
  264. }
  265. }
  266. if (!self.state.nodes[nodeName]) {
  267. vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  268. vwf_view.kernel.callMethod(nodeName, "createController", []);
  269. //"/../assets/controller/gearvr.gltf"
  270. }
  271. }
  272. function createAvatar(nodeID) {
  273. vwf_view.kernel.fireEvent(nodeID, "createAvatar")
  274. // let avatarID = self.kernel.moniker();
  275. // var nodeName = 'avatar-' + avatarID;
  276. // var newNode = {
  277. // "id": nodeName,
  278. // "uri": nodeName,
  279. // "extends": "http://vwf.example.com/aframe/avatar.vwf"
  280. // }
  281. // vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  282. // vwf_view.kernel.callMethod(nodeName, "createAvatarBody");
  283. }
  284. function randId() {
  285. return '_' + Math.random().toString(36).substr(2, 9);
  286. }
  287. function createGearVRControls() {
  288. let sceneEl = document.querySelector('a-scene');
  289. let gearvr = document.createElement('a-entity');
  290. gearvr.setAttribute('id', 'gearvrcontrol');
  291. gearvr.setAttribute('gearvr-controls', '');
  292. gearvr.setAttribute('gearvr-controls', 'hand', 'right');
  293. gearvr.setAttribute('gearvrcontrol', '');
  294. sceneEl.appendChild(gearvr);
  295. }
  296. function createWMRVRControls(hand) {
  297. let sceneEl = document.querySelector('a-scene');
  298. let wmrvr = document.createElement('a-entity');
  299. wmrvr.setAttribute('id', 'wmrvrcontrol' + hand);
  300. wmrvr.setAttribute('windows-motion-controls', '');
  301. wmrvr.setAttribute('windows-motion-controls', 'hand', hand);
  302. wmrvr.setAttribute('wmrvrcontrol', {'hand': hand});
  303. sceneEl.appendChild(wmrvr);
  304. }
  305. });