aframe.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634
  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.tickTime = 0;
  29. // this.realTickDif = 50;
  30. // this.lastrealTickDif = 50;
  31. // this.lastRealTick = performance.now();
  32. this.state.appInitialized = false;
  33. if (options === undefined) { options = {}; }
  34. if (typeof options == "object") {
  35. this.rootSelector = options["application-root"];
  36. }
  37. else {
  38. this.rootSelector = options;
  39. }
  40. this.gearvr = options.gearvr !== undefined ? options.gearvr : false;
  41. this.wmrright = options.wmrright !== undefined ? options.wmrright : false;
  42. this.wmrleft = options.wmrleft !== undefined ? options.wmrleft : false;
  43. },
  44. createdNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
  45. childSource, childType, childIndex, childName, callback /* ( ready ) */) {
  46. var node = this.state.nodes[childID];
  47. // If the "nodes" object does not have this object in it, it must not be one that
  48. // this driver cares about
  49. if (!node) {
  50. return;
  51. }
  52. if (this.state.scenes[childID]) {
  53. let scene = this.state.scenes[childID];
  54. document.body.appendChild(scene); //append is not working in Edge browser
  55. createAvatarControl(scene);
  56. createAvatar.call(this, childID);
  57. // this.state.appInitialized = true;
  58. if (this.gearvr == true) {
  59. console.log("CREATE GEARVR HERE!!");
  60. if (AFRAME.utils.device.isGearVR()) {
  61. let nodeName = 'gearvr-' + self.kernel.moniker();
  62. createGearVRControls();
  63. createGearVRController.call(this, childID, nodeName);
  64. }
  65. }
  66. if (this.wmrright == true) {
  67. console.log("CREATE WMR RIGHT HERE!!");
  68. if (AFRAME.utils.device.checkHasPositionalTracking()) {
  69. let nodeName = 'wmrvr-right-' + self.kernel.moniker();
  70. createWMRVRControls('right');
  71. createWMRVR.call(this, childID, nodeName);
  72. }
  73. }
  74. if (this.wmrleft == true) {
  75. console.log("CREATE WMR LEFT HERE!!");
  76. if (AFRAME.utils.device.checkHasPositionalTracking()) {
  77. let nodeName = 'wmrvr-left-' + self.kernel.moniker();
  78. createWMRVRControls('left');
  79. createWMRVR.call(this, childID, nodeName);
  80. }
  81. }
  82. }
  83. if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj) {
  84. this.nodes[childID] = {
  85. id: childID,
  86. extends: childExtendsID,
  87. // lastTransformStep: 0,
  88. // lastAnimationStep: 0
  89. };
  90. }
  91. // if(this.state.nodes[childID]) {
  92. // this.nodes[childID] = {id:childID,extends:childExtendsID};
  93. // }
  94. // else if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj.object3D instanceof THREE.Object3D) {
  95. // this.nodes[childID] = {id:childID,extends:childExtendsID};
  96. // }
  97. },
  98. initializedNode: function (nodeID, childID) {
  99. var node = this.state.nodes[childID];
  100. if (!node) {
  101. return;
  102. }
  103. },
  104. createdProperty: function (nodeId, propertyName, propertyValue) {
  105. return this.satProperty(nodeId, propertyName, propertyValue);
  106. },
  107. initializedProperty: function (nodeId, propertyName, propertyValue) {
  108. return this.satProperty(nodeId, propertyName, propertyValue);
  109. },
  110. gotProperty: function (nodeId, propertyName, propertyValue) {
  111. var selfs = this;
  112. var node = this.state.nodes[nodeId];
  113. if (!(node && node.aframeObj)) {
  114. return;
  115. }
  116. },
  117. satProperty: function (nodeId, propertyName, propertyValue) {
  118. var selfs = this;
  119. var node = this.state.nodes[nodeId];
  120. if (!(node && node.aframeObj)) {
  121. return;
  122. }
  123. // if (node.aframeObj.nodeName == "AUDIO" && propertyName == 'itemSrc') {
  124. // //console.log("sat new item");
  125. // let elID = '#' + node.aframeObj.getAttribute('id');
  126. // Object.entries(this.state.nodes).forEach(el => {
  127. // let src = el[1].aframeObj.getAttribute('src');
  128. // if (src){
  129. // // console.log("my: " + src);
  130. // if (src == elID)
  131. // self.kernel.callMethod(el[0], "updateSrc", [elID])
  132. // }
  133. // })
  134. // }
  135. if (node.aframeObj.nodeName == "AUDIO" && propertyName == 'itemSrc') {
  136. //console.log("sat new item");
  137. let elID = '#' + node.aframeObj.getAttribute('id');
  138. Object.entries(this.state.nodes).forEach(el => {
  139. let sound = el[1].aframeObj.getAttribute('sound');
  140. if(sound) {
  141. let soundID = vwf.find(el[0], 'sound');
  142. self.kernel.callMethod(soundID, "refreshSrc", [elID])
  143. // if (sound.src !== ""){
  144. // let src = '#' + sound.src.id;
  145. // if (src == elID){
  146. // let soundID = vwf.find(el[0], 'sound');
  147. // self.kernel.callMethod(soundID, "updateSrc", [elID])
  148. // }
  149. // }
  150. }
  151. })
  152. }
  153. if (node.aframeObj.nodeName == "IMG" && propertyName == 'itemSrc') {
  154. //console.log("sat new item");
  155. let elID = '#' + node.aframeObj.getAttribute('id');
  156. Object.entries(this.state.nodes).forEach(el => {
  157. let material = el[1].aframeObj.getAttribute('material');
  158. if(material) {
  159. if (material.src !== ""){
  160. // console.log("my: " + src);
  161. let src = '#' + material.src.id;
  162. if (src == elID){
  163. let materialID = vwf.find(el[0], 'material');
  164. self.kernel.callMethod(materialID, "updateSrc", [elID])
  165. }
  166. }
  167. }
  168. })
  169. }
  170. if (node.aframeObj.nodeName == "VIDEO" && propertyName == 'itemSrc') {
  171. //console.log("sat new item");
  172. let elID = '#' + node.aframeObj.getAttribute('id');
  173. Object.entries(this.state.nodes).forEach(el => {
  174. let material = el[1].aframeObj.getAttribute('material');
  175. if(material) {
  176. if (material.src !== ""){
  177. // console.log("my: " + src);
  178. let src = '#' + material.src.id;
  179. if (src == elID){
  180. let materialID = vwf.find(el[0], 'material');
  181. self.kernel.callMethod(materialID, "updateSrc", [elID])
  182. }
  183. }
  184. }
  185. })
  186. }
  187. if (node.aframeObj.nodeName == "A-ASSET-ITEM" && propertyName == 'itemSrc') {
  188. //console.log("sat new item");
  189. let elID = '#' + node.aframeObj.getAttribute('id');
  190. Object.entries(this.state.nodes).forEach(el => {
  191. let src = el[1].aframeObj.getAttribute('src');
  192. let mtl = el[1].aframeObj.getAttribute('mtl');
  193. if (src){
  194. // console.log("my: " + src);
  195. if (src == elID)
  196. self.kernel.callMethod(el[0], "updateModel", [elID])
  197. }
  198. if (mtl){
  199. // console.log("my: " + mtl);
  200. if (mtl == elID)
  201. self.kernel.callMethod(el[0], "updateModelMtl", [elID])
  202. }
  203. })
  204. }
  205. // if (node.aframeObj.nodeName == "A-BOX" && propertyName == 'color') {
  206. // console.log("sat color");
  207. // let materialName = '/' + node.name + '/material';
  208. // let materialID = vwf.find('', materialName)[0];
  209. // if (materialID) {
  210. // vwf.setProperty(materialID, propertyName, propertyValue);
  211. // }
  212. // }
  213. // if (propertyName == 'position') {
  214. // this.nodes[nodeId].lastTransformStep = vwf.time();
  215. // }
  216. // var aframeObject = node.aframeObj;
  217. // switch (propertyName) {
  218. // case "clickable":
  219. // if (propertyValue) {
  220. // aframeObject.addEventListener('click', function (evt) {
  221. // let cursorID = 'cursor-avatar-'+selfs.kernel.moniker();
  222. // if (evt.detail.cursorEl.id == cursorID) {
  223. // vwf_view.kernel.fireEvent(nodeId, "clickEvent")
  224. // }
  225. // });
  226. // }
  227. // break;
  228. // }
  229. },
  230. deletedNode: function(childID)
  231. {
  232. delete this.nodes[childID];
  233. },
  234. firedEvent: function (nodeID, eventName, eventParameters) {
  235. //var avatarID = vwf_view.kernel.find("", avatarName)
  236. var avatarName = 'avatar-' + self.kernel.moniker();
  237. if (eventName == "createAvatar") {
  238. console.log("!!!!");
  239. let avatarID = self.kernel.moniker();
  240. var nodeName = 'avatar-' + avatarID;
  241. var newNode = {
  242. "id": avatarName,
  243. "uri": avatarName,
  244. "extends": "http://vwf.example.com/aframe/avatar.vwf",
  245. "properties": {
  246. "localUrl": '',
  247. "remoteUrl": '',
  248. "displayName": 'Avatar '+ randId(),
  249. "sharing": { audio: true, video: true },
  250. "selectMode": false
  251. }
  252. }
  253. if (!self.state.nodes[avatarName]) {
  254. vwf_view.kernel.createChild(nodeID, avatarName, newNode);
  255. vwf_view.kernel.callMethod(avatarName, "createAvatarBody", []);
  256. //"/../assets/avatars/male/avatar1.gltf"
  257. }
  258. }
  259. // if (eventName == "setAvatarRotation") {
  260. // vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
  261. // }
  262. // if (eventName == "setAvatarPosition") {
  263. // vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
  264. // }
  265. if (eventName == "clickEvent") {
  266. if (self.kernel.moniker() == eventParameters[0]){
  267. let avatar = self.nodes[avatarName];
  268. let mode = vwf.getProperty(avatarName, 'selectMode');
  269. if(mode) {
  270. console.log("allow to click!!!")
  271. vwf_view.kernel.setProperty(avatarName, 'selectMode', false);
  272. let editorDriver = vwf.views["vwf/view/editor-new"];
  273. if (editorDriver){
  274. let selectSwitch = document.querySelector('#selectNodeSwitch');
  275. const selectSwitchComp = new mdc.iconToggle.MDCIconToggle(selectSwitch); //new mdc.select.MDCIconToggle
  276. selectSwitchComp.on = false;
  277. let currentNodeDIV = document.querySelector('#currentNode');
  278. if (currentNodeDIV) currentNodeDIV._setNode(nodeID);
  279. }
  280. }
  281. }
  282. }
  283. },
  284. ticked: function (vwfTime) {
  285. updateAvatarPosition();
  286. //update vr controllers
  287. if (this.gearvr == true) {
  288. updateHandControllerVR('gearvr-', '#gearvrcontrol');
  289. }
  290. if (this.wmrright == true) {
  291. updateHandControllerVR('wmrvr-right-', '#wmrvrcontrolright');
  292. }
  293. if (this.wmrleft == true) {
  294. updateHandControllerVR('wmrvr-left-', '#wmrvrcontrolleft');
  295. }
  296. // console.log(vwfTime);
  297. //lerpTick ();
  298. },
  299. calledMethod: function( nodeID, methodName, methodParameters, methodValue ) {
  300. var node = this.state.nodes[nodeID];
  301. if (!(node && node.aframeObj)) {
  302. return;
  303. }
  304. if (this.nodes[nodeID].extends == "http://vwf.example.com/aframe/acamera.vwf"){
  305. if (methodName == "setCameraToActive"){
  306. if (methodParameters[0] == vwf.moniker_){
  307. console.log("set active");
  308. node.aframeObj.setAttribute('camera', 'active', true)
  309. }
  310. }
  311. }
  312. if(methodName == "createGooglePoly"){
  313. }
  314. }
  315. });
  316. function compareCoordinates(a, b) {
  317. return a.x !== b.x || a.y !== b.y || a.z !== b.z
  318. }
  319. function updateAvatarPosition() {
  320. let avatarName = 'avatar-' + self.kernel.moniker();
  321. var node = self.state.nodes[avatarName];
  322. if (!node) return;
  323. if (!node.aframeObj) return;
  324. let el = document.querySelector('#avatarControl');
  325. if (el) {
  326. let position = el.getAttribute('position');
  327. let rotation = el.getAttribute('rotation');
  328. let lastRotation = self.nodes[avatarName].selfTickRotation;
  329. let currentPosition = node.aframeObj.getAttribute('position');
  330. let currentRotation = node.aframeObj.getAttribute('rotation');
  331. if (position && rotation && currentPosition && currentRotation && lastRotation) {
  332. if (compareCoordinates(position, currentPosition) || rotation.y !== lastRotation.y) {
  333. console.log("not equal!!")
  334. vwf_view.kernel.callMethod(avatarName, "followAvatarControl", [position, rotation]);
  335. }
  336. }
  337. self.nodes[avatarName].selfTickRotation = Object.assign({}, el.getAttribute('rotation'));
  338. }
  339. }
  340. function updateHandControllerVR(aName, aSelector) {
  341. //let avatarName = 'avatar-' + self.kernel.moniker();
  342. let avatarName = aName + self.kernel.moniker();
  343. var node = self.state.nodes[avatarName];
  344. if (!node) return;
  345. if (!node.aframeObj) return;
  346. let el = document.querySelector(aSelector);
  347. if (el) {
  348. let position = el.getAttribute('position');
  349. let rotation = el.getAttribute('rotation');
  350. let lastRotation = self.nodes[avatarName].selfTickRotation;
  351. let lastPosition = self.nodes[avatarName].selfTickPosition;
  352. // let currentPosition = node.aframeObj.getAttribute('position');
  353. //let currentRotation = node.aframeObj.getAttribute('rotation');
  354. if (position && rotation && lastRotation && lastPosition) {
  355. if (compareCoordinates(position, lastPosition) || compareCoordinates(rotation, lastRotation)) {
  356. console.log("not equal!!");
  357. vwf_view.kernel.callMethod(avatarName, "updateVRControl", [position, rotation]);
  358. // vwf_view.kernel.setProperty(avatarName, "position", AFRAME.utils.coordinates.stringify(position));
  359. //vwf_view.kernel.setProperty(avatarName, "rotation", AFRAME.utils.coordinates.stringify(rotation));
  360. }
  361. }
  362. self.nodes[avatarName].selfTickRotation = Object.assign({}, el.getAttribute('rotation'));
  363. self.nodes[avatarName].selfTickPosition = Object.assign({}, el.getAttribute('position'));
  364. }
  365. }
  366. function createAvatarControl(aScene) {
  367. let avatarName = 'avatar-' + self.kernel.moniker();
  368. let controlEl = document.createElement('a-camera');
  369. // controlEl.setAttribute('avatar', '');
  370. controlEl.setAttribute('id', 'avatarControl');
  371. controlEl.setAttribute('wasd-controls-enabled', true);
  372. controlEl.setAttribute('look-controls-enabled', true);
  373. controlEl.setAttribute('user-height', 1.6);
  374. controlEl.setAttribute('gamepad-controls', {'controller': 0});
  375. //controlEl.setAttribute('universal-controls', {});
  376. //controlEl.setAttribute('gearvr-controls',{});
  377. controlEl.setAttribute('camera', 'active', true);
  378. // controlEl.setAttribute('camera', 'userHeight', 1.6);
  379. // controlEl.setAttribute('camera', 'near', 0.51);
  380. aScene.appendChild(controlEl);
  381. let cursorEl = document.createElement('a-cursor');
  382. cursorEl.setAttribute('id', 'cursor-' + avatarName);
  383. cursorEl.setAttribute('raycaster', {});
  384. cursorEl.setAttribute('raycaster', 'objects', '.intersectable');
  385. cursorEl.setAttribute('raycaster', 'showLine', false);
  386. // cursorEl.setAttribute('raycaster', {objects: '.intersectable', showLine: true, far: 100});
  387. // cursorEl.setAttribute('raycaster', 'showLine', true);
  388. controlEl.appendChild(cursorEl);
  389. // let gearVRControlsEl = document.createElement('a-entity');
  390. // gearVRControlsEl.setAttribute('id', 'gearvr-'+avatarName);
  391. // gearVRControlsEl.setAttribute('gearvr-controls', {});
  392. // aScene.appendChild(gearVRControlsEl);
  393. // controlEl.addEventListener('componentchanged', function (evt) {
  394. // if (evt.detail.name === 'position') {
  395. // var eventParameters = evt.detail.newData;
  396. // vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
  397. // }
  398. // if (evt.detail.name === 'rotation') {
  399. // var eventParameters = evt.detail.newData;
  400. // vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
  401. // }
  402. // });
  403. }
  404. function createWMRVR (nodeID, nodeName) {
  405. var newNode = {
  406. "id": nodeName,
  407. "uri": nodeName,
  408. "extends": "http://vwf.example.com/aframe/wmrvrcontroller.vwf",
  409. "properties": {
  410. }
  411. }
  412. if (!self.state.nodes[nodeName]) {
  413. vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  414. vwf_view.kernel.callMethod(nodeName, "createController", []);
  415. //"/../assets/controller/wmrvr.gltf"
  416. }
  417. }
  418. function createGearVRController(nodeID, nodeName) {
  419. var newNode = {
  420. "id": nodeName,
  421. "uri": nodeName,
  422. "extends": "http://vwf.example.com/aframe/gearvrcontroller.vwf",
  423. "properties": {
  424. }
  425. }
  426. if (!self.state.nodes[nodeName]) {
  427. vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  428. vwf_view.kernel.callMethod(nodeName, "createController", []);
  429. //"/../assets/controller/gearvr.gltf"
  430. }
  431. }
  432. function createAvatar(nodeID) {
  433. vwf_view.kernel.fireEvent(nodeID, "createAvatar")
  434. // let avatarID = self.kernel.moniker();
  435. // var nodeName = 'avatar-' + avatarID;
  436. // var newNode = {
  437. // "id": nodeName,
  438. // "uri": nodeName,
  439. // "extends": "http://vwf.example.com/aframe/avatar.vwf"
  440. // }
  441. // vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  442. // vwf_view.kernel.callMethod(nodeName, "createAvatarBody");
  443. }
  444. function randId() {
  445. return '_' + Math.random().toString(36).substr(2, 9);
  446. }
  447. function createGearVRControls() {
  448. let sceneEl = document.querySelector('a-scene');
  449. let gearvr = document.createElement('a-entity');
  450. gearvr.setAttribute('id', 'gearvrcontrol');
  451. gearvr.setAttribute('gearvr-controls', '');
  452. gearvr.setAttribute('gearvr-controls', 'hand', 'right');
  453. gearvr.setAttribute('gearvrcontrol', '');
  454. sceneEl.appendChild(gearvr);
  455. }
  456. function createWMRVRControls(hand) {
  457. let sceneEl = document.querySelector('a-scene');
  458. let wmrvr = document.createElement('a-entity');
  459. wmrvr.setAttribute('id', 'wmrvrcontrol' + hand);
  460. wmrvr.setAttribute('windows-motion-controls', '');
  461. wmrvr.setAttribute('windows-motion-controls', 'hand', hand);
  462. wmrvr.setAttribute('wmrvrcontrol', {'hand': hand});
  463. sceneEl.appendChild(wmrvr);
  464. }
  465. });