aframe.js 52 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441
  1. "use strict";
  2. // VWF & A-Frame model driver
  3. // Copyright (c) 2018 Nikolai Suslov
  4. // Krestianstvo.org MIT license (https://github.com/NikolaySuslov/livecodingspace/blob/master/LICENSE.md)
  5. // VWF Apache License (https://github.com/NikolaySuslov/livecodingspace/blob/master/VWF_LICENSE.md)
  6. /// @module vwf/model/aframe
  7. /// @requires vwf/model
  8. define(["module", "vwf/model", "vwf/utility"], function (module, model, utility) {
  9. var self;
  10. return model.load(module, {
  11. // == Module Definition ====================================================================
  12. // -- initialize ---------------------------------------------------------------------------
  13. initialize: function () {
  14. self = this;
  15. this.state = {
  16. nodes: {},
  17. scenes: {},
  18. prototypes: {},
  19. createLocalNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
  20. childSource, childType, childIndex, childName, callback) {
  21. return {
  22. "parentID": nodeID,
  23. "ID": childID,
  24. "extendsID": childExtendsID,
  25. "implementsIDs": childImplementsIDs,
  26. "source": childSource,
  27. "type": childType,
  28. "name": childName,
  29. "prototypes": undefined,
  30. "aframeObj": undefined,
  31. "scene": undefined,
  32. "componentName": undefined,
  33. "events": {
  34. "clickable": false
  35. }
  36. };
  37. },
  38. isAFrameClass: function (prototypes, classID) {
  39. if (prototypes) {
  40. for (var i = 0; i < prototypes.length; i++) {
  41. if (prototypes[i] === classID) {
  42. //console.info( "prototypes[ i ]: " + prototypes[ i ] );
  43. return true;
  44. }
  45. }
  46. }
  47. return false;
  48. },
  49. isAFrameComponent: function (prototypes) {
  50. var found = false;
  51. if (prototypes) {
  52. for (var i = 0; i < prototypes.length && !found; i++) {
  53. found = (prototypes[i] === "http://vwf.example.com/aframe/node.vwf");
  54. }
  55. }
  56. return found;
  57. },
  58. setAFrameProperty: function (propertyName, propertyValue, aframeObject) {
  59. //console.log(propertyValue);
  60. if (propertyValue.hasOwnProperty('x')) {
  61. aframeObject.setAttribute(propertyName, propertyValue)
  62. } else
  63. if (Array.isArray(propertyValue)) {
  64. aframeObject.setAttribute(propertyName, { x: propertyValue[0], y: propertyValue[1], z: propertyValue[2] })
  65. } else if (typeof propertyValue === 'string') {
  66. aframeObject.setAttribute(propertyName, AFRAME.utils.coordinates.parse(propertyValue))
  67. }
  68. }
  69. };
  70. this.state.kernel = this.kernel.kernel.kernel;
  71. this.aframeDef = {
  72. 'A-BOX': [
  73. 'depth', 'height', 'segments-depth',
  74. 'segments-height', 'segments-width',
  75. 'width'],
  76. 'A-SPHERE': [
  77. 'phi-length', 'phi-start', 'radius',
  78. 'segments-depth',
  79. 'segments-height', 'segments-width',
  80. 'theta-length', 'theta-start'
  81. ],
  82. 'A-CYLINDER': [
  83. 'height', 'radius',
  84. 'open-ended', 'radius-bottom', 'radius-top',
  85. 'segments-height', 'segments-radial',
  86. 'theta-length', 'theta-start'
  87. ],
  88. 'A-CONE': [
  89. 'height',
  90. 'open-ended', 'radius-bottom', 'radius-top',
  91. 'segments-height', 'segments-radial',
  92. 'theta-length', 'theta-start'
  93. ],
  94. 'A-PLANE': [
  95. 'height', 'segments-height', 'segments-width','width'
  96. ],
  97. 'A-TEXT': [
  98. 'align', 'alpha-test', 'anchor',
  99. 'baseline', 'color', 'font',
  100. 'font-image', 'height',
  101. 'letter-spacing', 'line-height',
  102. 'opacity', 'shader',
  103. 'side', 'tab-size',
  104. 'transparent', 'value',
  105. 'white-space', 'width',
  106. 'wrap-count', 'wrap-pixels',
  107. 'z-offset'
  108. ],
  109. 'A-SKY': [
  110. 'phi-length', 'phi-start', 'radius','segments-height',
  111. 'segments-width',
  112. 'theta-length', 'theta-start',
  113. ],
  114. 'A-LIGHT': [
  115. 'angle', 'color', 'decay', 'distance',
  116. 'ground-color', 'intensity', 'penumbra',
  117. 'type', 'target'
  118. ]
  119. }
  120. },
  121. // == Model API ============================================================================
  122. // -- creatingNode -------------------------------------------------------------------------
  123. creatingNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
  124. childSource, childType, childIndex, childName, callback /* ( ready ) */) {
  125. // If the parent nodeID is 0, this node is attached directly to the root and is therefore either
  126. // the scene or a prototype. In either of those cases, save the uri of the new node
  127. var childURI = (nodeID === 0 ? childIndex : undefined);
  128. var appID = this.kernel.application();
  129. // If the node being created is a prototype, construct it and add it to the array of prototypes,
  130. // and then return
  131. var prototypeID = utility.ifPrototypeGetId(appID, this.state.prototypes, nodeID, childID);
  132. if (prototypeID !== undefined) {
  133. this.state.prototypes[prototypeID] = {
  134. parentID: nodeID,
  135. ID: childID,
  136. extendsID: childExtendsID,
  137. implementsID: childImplementsIDs,
  138. source: childSource,
  139. type: childType,
  140. name: childName
  141. };
  142. return;
  143. }
  144. var protos = getPrototypes(this.kernel, childExtendsID);
  145. //var kernel = this.kernel.kernel.kernel;
  146. var node;
  147. if (this.state.isAFrameComponent(protos)) {
  148. // Create the local copy of the node properties
  149. if (this.state.nodes[childID] === undefined) {
  150. this.state.nodes[childID] = this.state.createLocalNode(nodeID, childID, childExtendsID, childImplementsIDs,
  151. childSource, childType, childIndex, childName, callback);
  152. }
  153. node = this.state.nodes[childID];
  154. node.prototypes = protos;
  155. // if (childType == "component") {
  156. // if (nodeID !== undefined) {
  157. // node.aframeObj = setAFrameObjectComponents(node);
  158. // addNodeToHierarchy(node);
  159. // }
  160. // } else {
  161. node.aframeObj = createAFrameObject(node);
  162. addNodeToHierarchy(node);
  163. //notifyDriverOfPrototypeAndBehaviorProps();
  164. // }
  165. //addNodeToHierarchy(node);
  166. }
  167. },
  168. // initializingNode: function( nodeID, childID, childExtendsID, childImplementsIDs,
  169. // childSource, childType, childIndex, childName ) {
  170. // var node = this.state.nodes[childID];
  171. // if ( node && childType == "component" ) {
  172. // }
  173. // },
  174. // -- initializingProperty -----------------------------------------------------------------
  175. initializingProperty: function (nodeID, propertyName, propertyValue) {
  176. var value = undefined;
  177. var node = this.state.nodes[nodeID];
  178. if (node !== undefined) {
  179. value = this.settingProperty(nodeID, propertyName, propertyValue);
  180. }
  181. return value;
  182. },
  183. // -- creatingProperty ---------------------------------------------------------------------
  184. creatingProperty: function (nodeID, propertyName, propertyValue) {
  185. return this.initializingProperty(nodeID, propertyName, propertyValue);
  186. },
  187. // -- callingMethod ------------------------------------------------------------------------
  188. callingMethod: function( nodeID, methodName, methodParameters ) {
  189. var node = this.state.nodes[nodeID];
  190. if(!node) return;
  191. if (node && node.aframeObj ) {
  192. if (methodName == 'lookAt') {
  193. console.log('lookAt: ' + methodParameters[0]);
  194. let target = methodParameters[0];
  195. node.aframeObj.object3D.lookAt(new THREE.Vector3(target.x, target.y, target.z));
  196. let newRotation = node.aframeObj.getAttribute('rotation');
  197. self.kernel.setProperty(nodeID, "rotation", {x: 0, y: newRotation.y, z: 0});
  198. }
  199. if (methodName == 'worldRotation') {
  200. var worldQuat = new THREE.Quaternion();
  201. node.aframeObj.object3D.getWorldQuaternion(worldQuat);
  202. let angle = (new THREE.Euler()).setFromQuaternion(worldQuat, 'YXZ');
  203. let rotation = (new THREE.Vector3(THREE.Math.radToDeg(angle.x),
  204. THREE.Math.radToDeg(angle.y), THREE.Math.radToDeg(angle.z) ));
  205. return rotation
  206. }
  207. if (methodName == 'worldPosition') {
  208. var position = new THREE.Vector3();
  209. node.aframeObj.object3D.getWorldPosition(position);
  210. return position
  211. }
  212. }
  213. },
  214. // -- deletingNode -------------------------------------------------------------------------
  215. //deletingNode: function( nodeID ) {
  216. //},
  217. // -- deletingNode -------------------------------------------------------------------------
  218. deletingNode: function (nodeID) {
  219. if (nodeID) {
  220. var childNode = this.state.nodes[nodeID];
  221. if (!childNode) return;
  222. if (childNode !== undefined) {
  223. if (childNode.children) {
  224. for (var i = 0; i < childNode.children.length; i++) {
  225. this.deletingNode(childNode.children[i]);
  226. }
  227. }
  228. if (childNode.aframeObj !== undefined) {
  229. // removes and destroys object
  230. childNode.aframeObj.parentNode.removeChild(childNode.aframeObj);
  231. childNode.aframeObj = undefined;
  232. }
  233. delete this.state.nodes[nodeID];
  234. }
  235. }
  236. },
  237. // -- settingProperty ----------------------------------------------------------------------
  238. settingProperty: function (nodeID, propertyName, propertyValue) {
  239. var node = this.state.nodes[nodeID];
  240. var value = undefined;
  241. // if (node.componentName == 'line') {
  242. // console.log(node.aframeObj);
  243. // }
  244. if (node && node.aframeObj && utility.validObject(propertyValue)) {
  245. var aframeObject = node.aframeObj;
  246. if (isNodeDefinition(node.prototypes)) {
  247. // 'id' will be set to the nodeID
  248. value = propertyValue;
  249. switch (propertyName) {
  250. default:
  251. value = undefined;
  252. break;
  253. }
  254. }
  255. if (value === undefined && isAEntityDefinition(node.prototypes)) {
  256. value = propertyValue;
  257. switch (propertyName) {
  258. case "position":
  259. this.state.setAFrameProperty('position', propertyValue, aframeObject);
  260. break;
  261. case "rotation":
  262. this.state.setAFrameProperty('rotation', propertyValue, aframeObject);
  263. break;
  264. case "scale":
  265. this.state.setAFrameProperty('scale', propertyValue, aframeObject);
  266. break;
  267. case "clickable":
  268. if (propertyValue) {
  269. aframeObject.setAttribute('class', 'intersectable');
  270. } else {
  271. aframeObject.setAttribute('class', 'nonintersectable');
  272. }
  273. node.events.clickable = propertyValue;
  274. break;
  275. case "visible":
  276. aframeObject.setAttribute('visible', propertyValue);
  277. break;
  278. // case "clickable":
  279. // console.log("set clickable!");
  280. // value = propertyValue;
  281. // break;
  282. // case "clickable":
  283. // if (propertyValue) {
  284. // aframeObject.addEventListener('click', function (evt) {
  285. // console.log("click!");
  286. // vwf_view.kernel.fireEvent(node.ID, "clickEvent",evt.detail.cursorEl.id);
  287. // });
  288. // }
  289. // break;
  290. // case "look-controls-enabled":
  291. // aframeObject.setAttribute('look-controls', 'enabled', propertyValue);
  292. // break;
  293. case "wasd-controls":
  294. aframeObject.setAttribute('wasd-controls', 'enabled', propertyValue);
  295. break;
  296. default:
  297. value = undefined;
  298. break;
  299. }
  300. }
  301. if (value === undefined && aframeObject.nodeName == "A-ASSET-ITEM") {
  302. value = propertyValue;
  303. switch (propertyName) {
  304. case "itemID":
  305. aframeObject.setAttribute('id', propertyValue);
  306. break;
  307. case "itemSrc":
  308. aframeObject.setAttribute('src', propertyValue);
  309. break;
  310. default:
  311. value = undefined;
  312. break;
  313. }
  314. }
  315. if (value === undefined && aframeObject.nodeName == "IMG") {
  316. value = propertyValue;
  317. switch (propertyName) {
  318. case "itemID":
  319. aframeObject.setAttribute('id', propertyValue);
  320. break;
  321. case "itemSrc":
  322. aframeObject.setAttribute('src', propertyValue);
  323. break;
  324. // case "width":
  325. // aframeObject.width = propertyValue;
  326. // break;
  327. // case "height":
  328. // aframeObject.height = propertyValue;
  329. // break;
  330. default:
  331. value = undefined;
  332. break;
  333. }
  334. }
  335. if (value === undefined && aframeObject.nodeName == "AUDIO") {
  336. value = propertyValue;
  337. switch (propertyName) {
  338. case "itemID":
  339. aframeObject.setAttribute('id', propertyValue);
  340. break;
  341. case "itemSrc":
  342. aframeObject.setAttribute('src', propertyValue);
  343. break;
  344. default:
  345. value = undefined;
  346. break;
  347. }
  348. }
  349. if (value === undefined && aframeObject.nodeName == "VIDEO") {
  350. value = propertyValue;
  351. switch (propertyName) {
  352. case "itemID":
  353. aframeObject.setAttribute('id', propertyValue);
  354. break;
  355. case "itemSrc":
  356. aframeObject.setAttribute('src', propertyValue);
  357. break;
  358. default:
  359. value = undefined;
  360. break;
  361. }
  362. }
  363. if (value === undefined && aframeObject.nodeName == "A-SKY") {
  364. value = propertyValue;
  365. self.aframeDef['A-SKY'].forEach(element => {
  366. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  367. value = undefined;
  368. })
  369. }
  370. if (value === undefined && aframeObject.nodeName == "A-TEXT") {
  371. value = propertyValue;
  372. self.aframeDef['A-TEXT'].forEach(element => {
  373. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  374. value = undefined;
  375. })
  376. }
  377. if (value === undefined && aframeObject.nodeName == "A-SCENE") {
  378. value = propertyValue;
  379. switch (propertyName) {
  380. case "color":
  381. aframeObject.setAttribute('background', {'color': propertyValue} );
  382. break;
  383. case "transparent":
  384. aframeObject.setAttribute('background', {'transparent': propertyValue} );
  385. break;
  386. // case "fog":
  387. // aframeObject.setAttribute('fog', propertyValue);
  388. // break;
  389. case "assets":
  390. let assetsEl = document.querySelector('a-assets');
  391. if (!assetsEl) {
  392. let newAssetsEl = document.createElement('a-assets');
  393. aframeObject.appendChild(newAssetsEl);
  394. }
  395. var assetsElement = document.querySelector('a-assets');
  396. if (propertyValue) {
  397. let path = JSON.parse(localStorage.getItem('lcs_app')).path.public_path;
  398. let worldName = path.slice(1);
  399. let dbPath = propertyValue.split(".").join("_");
  400. _LCS_WORLD_USER.get('worlds').get(worldName).get(dbPath).once().then(response => {
  401. if (response) {
  402. console.log(JSON.parse(response.file));
  403. let assets = JSON.parse(response.file);
  404. for (var prop in assets) {
  405. var elm = document.createElement(assets[prop].tag);
  406. elm.setAttribute('id', prop);
  407. elm.setAttribute('src', assets[prop].src);
  408. assetsElement.appendChild(elm);
  409. }
  410. }
  411. });
  412. // httpGetJson(propertyValue).then(function (response) {
  413. // console.log(JSON.parse(response));
  414. // let assets = JSON.parse(response);
  415. // for (var prop in assets) {
  416. // var elm = document.createElement(assets[prop].tag);
  417. // elm.setAttribute('id', prop);
  418. // elm.setAttribute('src', assets[prop].src);
  419. // assetsElement.appendChild(elm);
  420. // }
  421. // }).catch(function (error) {
  422. // console.log(error);
  423. // });
  424. }
  425. break;
  426. default:
  427. value = undefined;
  428. break;
  429. }
  430. }
  431. if (value === undefined && aframeObject.nodeName == "A-BOX") {
  432. value = propertyValue;
  433. self.aframeDef['A-BOX'].forEach(element => {
  434. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  435. value = undefined;
  436. })
  437. }
  438. if (value === undefined && aframeObject.nodeName == "A-LIGHT") {
  439. value = propertyValue;
  440. self.aframeDef['A-LIGHT'].forEach(element => {
  441. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  442. value = undefined;
  443. })
  444. switch (propertyName) {
  445. case "castShadow":
  446. aframeObject.setAttribute('light', 'castShadow', propertyValue);
  447. break;
  448. case "shadowCameraVisible":
  449. aframeObject.setAttribute('light', 'shadowCameraVisible', propertyValue);
  450. break;
  451. default:
  452. value = undefined;
  453. break;
  454. }
  455. }
  456. if (value === undefined && aframeObject.nodeName == "A-GLTF-MODEL") {
  457. value = propertyValue;
  458. switch (propertyName) {
  459. case "src":
  460. aframeObject.setAttribute('src', propertyValue);
  461. break;
  462. default:
  463. value = undefined;
  464. break;
  465. }
  466. }
  467. if (value === undefined && aframeObject.nodeName == "A-COLLADA-MODEL") {
  468. value = propertyValue;
  469. switch (propertyName) {
  470. case "src":
  471. aframeObject.setAttribute('src', propertyValue);
  472. break;
  473. default:
  474. value = undefined;
  475. break;
  476. }
  477. }
  478. if (value === undefined && aframeObject.nodeName == "A-OBJ-MODEL") {
  479. value = propertyValue;
  480. switch (propertyName) {
  481. case "src":
  482. aframeObject.setAttribute('src', propertyValue);
  483. break;
  484. case "mtl":
  485. aframeObject.setAttribute('mtl', propertyValue);
  486. break;
  487. default:
  488. value = undefined;
  489. break;
  490. }
  491. }
  492. if (value === undefined && aframeObject.nodeName == "A-PLANE") {
  493. value = propertyValue;
  494. self.aframeDef['A-PLANE'].forEach(element => {
  495. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  496. value = undefined;
  497. })
  498. }
  499. if (value === undefined && aframeObject.nodeName == "A-SPHERE") {
  500. value = propertyValue;
  501. self.aframeDef['A-SPHERE'].forEach(element => {
  502. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  503. value = undefined;
  504. })
  505. }
  506. if (value === undefined && aframeObject.nodeName == "A-CYLINDER") {
  507. value = propertyValue;
  508. self.aframeDef['A-CYLINDER'].forEach(element => {
  509. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  510. value = undefined;
  511. })
  512. }
  513. if (value === undefined && aframeObject.nodeName == "A-CONE") {
  514. value = propertyValue;
  515. self.aframeDef['A-CONE'].forEach(element => {
  516. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  517. value = undefined;
  518. })
  519. }
  520. if (value === undefined && aframeObject.nodeName == "A-ANIMATION") {
  521. value = propertyValue;
  522. switch (propertyName) {
  523. // attribute:
  524. // dur:
  525. // from:
  526. // to:
  527. // repeat:
  528. case "dur":
  529. aframeObject.setAttribute('dur', propertyValue);
  530. break;
  531. case "from":
  532. aframeObject.setAttribute('from', propertyValue);
  533. break;
  534. case "to":
  535. aframeObject.setAttribute('to', propertyValue);
  536. break;
  537. case "repeat":
  538. aframeObject.setAttribute('repeat', propertyValue);
  539. break;
  540. case "attribute":
  541. aframeObject.setAttribute('attribute', propertyValue);
  542. break;
  543. case "begin":
  544. aframeObject.setAttribute('begin', propertyValue);
  545. break;
  546. default:
  547. value = undefined;
  548. break;
  549. }
  550. }
  551. if (value === undefined && aframeObject.nodeName == "A-CAMERA") {
  552. value = propertyValue;
  553. switch (propertyName) {
  554. case "user-height":
  555. aframeObject.setAttribute('user-height', propertyValue);
  556. break;
  557. case "look-controls-enabled":
  558. aframeObject.setAttribute('look-controls-enabled', propertyValue);
  559. break;
  560. case "wasd-controls-enabled":
  561. aframeObject.setAttribute('wasd-controls-enabled', propertyValue);
  562. break;
  563. // case "active":
  564. // aframeObject.setAttribute('camera', 'active', propertyValue);
  565. // break;
  566. default:
  567. value = undefined;
  568. break;
  569. }
  570. }
  571. if (value === undefined && aframeObject.nodeName == "A-SUN-SKY") {
  572. value = propertyValue;
  573. switch (propertyName) {
  574. case "sunPosition":
  575. aframeObject.setAttribute('material', 'sunPosition', propertyValue);
  576. break;
  577. // case "active":
  578. // aframeObject.setAttribute('camera', 'active', propertyValue);
  579. // break;
  580. default:
  581. value = undefined;
  582. break;
  583. }
  584. }
  585. }
  586. return value;
  587. },
  588. // -- gettingProperty ----------------------------------------------------------------------
  589. gettingProperty: function (nodeID, propertyName, propertyValue) {
  590. var node = this.state.nodes[nodeID];
  591. var value = undefined;
  592. if (node && node.aframeObj) {
  593. var aframeObject = node.aframeObj;
  594. if (isNodeDefinition(node.prototypes)) {
  595. switch (propertyName) {
  596. }
  597. }
  598. if (value === undefined && isAEntityDefinition(node.prototypes)) {
  599. switch (propertyName) {
  600. case "position":
  601. var pos = aframeObject.getAttribute('position');
  602. if (pos !== undefined) {
  603. value = pos//[pos.x, pos.y, pos.z]//AFRAME.utils.coordinates.stringify(pos);
  604. }
  605. break;
  606. case "scale":
  607. var scale = aframeObject.getAttribute('scale');
  608. if (scale !== undefined) {
  609. value = scale//AFRAME.utils.coordinates.stringify(scale);
  610. }
  611. break;
  612. case "rotation":
  613. var rot = aframeObject.getAttribute('rotation');
  614. if (rot !== undefined) {
  615. value = rot//AFRAME.utils.coordinates.stringify(rot);
  616. }
  617. break;
  618. case "clickable":
  619. value = node.events.clickable;
  620. break;
  621. // case "look-controls-enabled":
  622. // var look = aframeObject.getAttribute('look-controls-enabled');
  623. // if (look !== null && look !== undefined) {
  624. // value = aframeObject.getAttribute('look-controls').enabled;
  625. // }
  626. // break;
  627. // case "wasd-controls":
  628. // var wasd = aframeObject.getAttribute('wasd-controls');
  629. // if (wasd !== null && wasd !== undefined) {
  630. // value = aframeObject.getAttribute('wasd-controls').enabled;
  631. // }
  632. // break;
  633. case "visible":
  634. value = aframeObject.getAttribute('visible');
  635. break;
  636. }
  637. }
  638. if (value === undefined && aframeObject.nodeName == "A-ASSET-ITEM") {
  639. switch (propertyName) {
  640. case "itemID":
  641. value = aframeObject.getAttribute('id');
  642. break;
  643. case "itemSrc":
  644. value = aframeObject.getAttribute('src');
  645. break;
  646. }
  647. }
  648. if (value === undefined && aframeObject.nodeName == "IMG") {
  649. switch (propertyName) {
  650. case "itemID":
  651. value = aframeObject.getAttribute('id');
  652. break;
  653. case "itemSrc":
  654. value = aframeObject.getAttribute('src');
  655. break;
  656. case "width":
  657. value = aframeObject.width;
  658. break;
  659. case "height":
  660. value = aframeObject.height;
  661. break;
  662. }
  663. }
  664. if (value === undefined && aframeObject.nodeName == "AUDIO") {
  665. switch (propertyName) {
  666. case "itemID":
  667. value = aframeObject.getAttribute('id');
  668. break;
  669. case "itemSrc":
  670. value = aframeObject.getAttribute('src');
  671. break;
  672. }
  673. }
  674. if (value === undefined && aframeObject.nodeName == "VIDEO") {
  675. switch (propertyName) {
  676. case "itemID":
  677. value = aframeObject.getAttribute('id');
  678. break;
  679. case "itemSrc":
  680. value = aframeObject.getAttribute('src');
  681. break;
  682. case "videoWidth":
  683. value = aframeObject.videoWidth;
  684. break;
  685. case "videoHeight":
  686. value = aframeObject.videoHeight;
  687. break;
  688. }
  689. }
  690. if (value === undefined && aframeObject.nodeName == "A-SCENE") {
  691. switch (propertyName) {
  692. // case "fog":
  693. // value = aframeObject.getAttribute('fog');
  694. // break;
  695. case "color":
  696. if (aframeObject.getAttribute('background')) {
  697. value = aframeObject.getAttribute('background').color;
  698. }
  699. break;
  700. case "transparent":
  701. if (aframeObject.getAttribute('background')) {
  702. value = aframeObject.getAttribute('background').transparent;
  703. }
  704. break;
  705. }
  706. }
  707. if (value === undefined && aframeObject.nodeName == "A-SKY") {
  708. self.aframeDef['A-SKY'].forEach(element => {
  709. if (element == propertyName) {
  710. value = aframeObject.getAttribute(element);
  711. }
  712. })
  713. }
  714. if (value === undefined && aframeObject.nodeName == "A-LIGHT") {
  715. self.aframeDef['A-LIGHT'].forEach(element => {
  716. if (element == propertyName) {
  717. value = aframeObject.getAttribute(element);
  718. }
  719. })
  720. switch (propertyName) {
  721. case "castShadow":
  722. value = aframeObject.getAttribute('light').castShadow;
  723. break;
  724. case "shadowCameraVisible":
  725. value = aframeObject.getAttribute('light').shadowCameraVisible;
  726. break;
  727. }
  728. }
  729. if (value === undefined && aframeObject.nodeName == "A-BOX") {
  730. self.aframeDef['A-BOX'].forEach(element => {
  731. if (element == propertyName) {
  732. value = aframeObject.getAttribute(element);
  733. }
  734. })
  735. }
  736. if (value === undefined && aframeObject.nodeName == "A-PLANE") {
  737. self.aframeDef['A-PLANE'].forEach(element => {
  738. if (element == propertyName) {
  739. value = aframeObject.getAttribute(element);
  740. }
  741. })
  742. }
  743. if (value === undefined && aframeObject.nodeName == "A-SPHERE") {
  744. self.aframeDef['A-SPHERE'].forEach(element => {
  745. if (element == propertyName) {
  746. value = aframeObject.getAttribute(element);
  747. }
  748. })
  749. }
  750. if (value === undefined && aframeObject.nodeName == "A-CYLINDER") {
  751. self.aframeDef['A-CYLINDER'].forEach(element => {
  752. if (element == propertyName) {
  753. value = aframeObject.getAttribute(element);
  754. }
  755. })
  756. }
  757. if (value === undefined && aframeObject.nodeName == "A-CONE") {
  758. self.aframeDef['A-CONE'].forEach(element => {
  759. if (element == propertyName) {
  760. value = aframeObject.getAttribute(element);
  761. }
  762. })
  763. }
  764. if (value === undefined && aframeObject.nodeName == "A-TEXT") {
  765. self.aframeDef['A-TEXT'].forEach(element => {
  766. if (element == propertyName) {
  767. value = aframeObject.getAttribute(element);
  768. }
  769. })
  770. }
  771. if (value === undefined && aframeObject.nodeName == "A-ANIMATION") {
  772. switch (propertyName) {
  773. case "attribute":
  774. value = aframeObject.getAttribute('attribute');
  775. break;
  776. case "dur":
  777. value = aframeObject.getAttribute('dur');
  778. break;
  779. case "from":
  780. value = aframeObject.getAttribute('from');
  781. break;
  782. case "to":
  783. value = aframeObject.getAttribute('to');
  784. break;
  785. case "repeat":
  786. value = aframeObject.getAttribute('repeat');
  787. break;
  788. case "begin":
  789. value = aframeObject.getAttribute('begin');
  790. break;
  791. }
  792. }
  793. if (value === undefined && aframeObject.nodeName == "A-CAMERA") {
  794. switch (propertyName) {
  795. case "user-height":
  796. value = aframeObject.getAttribute('user-height');
  797. break;
  798. case "look-controls-enabled":
  799. value = aframeObject.getAttribute('look-controls-enabled');
  800. break;
  801. case "wasd-controls-enabled":
  802. value = aframeObject.getAttribute('wasd-controls-enabled');
  803. break;
  804. }
  805. // switch (propertyName) {
  806. // case "active":
  807. // value = aframeObject.getAttribute('camera').active;
  808. // break;
  809. // }
  810. }
  811. if (value === undefined && aframeObject.nodeName == "A-SUN-SKY") {
  812. switch (propertyName) {
  813. case "sunPosition":
  814. value = aframeObject.getAttribute('material').sunPosition;
  815. break;
  816. }
  817. // switch (propertyName) {
  818. // case "active":
  819. // value = aframeObject.getAttribute('camera').active;
  820. // break;
  821. // }
  822. }
  823. if (value === undefined && aframeObject.nodeName == "A-COLLADA-MODEL") {
  824. switch (propertyName) {
  825. case "src":
  826. value = aframeObject.getAttribute('src');
  827. break;
  828. }
  829. }
  830. if (value === undefined && aframeObject.nodeName == "A-OBJ-MODEL") {
  831. switch (propertyName) {
  832. case "src":
  833. value = aframeObject.getAttribute('src');
  834. break;
  835. case "mtl":
  836. value = aframeObject.getAttribute('mtl');
  837. break;
  838. }
  839. }
  840. if (value === undefined && aframeObject.nodeName == "A-GLTF-MODEL") {
  841. switch (propertyName) {
  842. case "src":
  843. value = aframeObject.getAttribute('src');
  844. break;
  845. }
  846. }
  847. }
  848. if (value !== undefined) {
  849. propertyValue = value;
  850. }
  851. return value;
  852. }
  853. });
  854. function createAFrameObject(node, config) {
  855. var protos = node.prototypes;
  856. var aframeObj = undefined;
  857. if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/ascene.vwf")) {
  858. aframeObj = document.createElement('a-scene');
  859. let assetsElement = document.createElement('a-assets');
  860. aframeObj.appendChild(assetsElement);
  861. aframeObj.setAttribute('scene-utils', "");
  862. self.state.scenes[node.ID] = aframeObj;
  863. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-item.vwf")) {
  864. let assets = document.querySelector('a-assets');
  865. if (assets){
  866. aframeObj = document.createElement('a-asset-item');
  867. aframeObj.setAttribute('id', "item-"+GUID());
  868. aframeObj.setAttribute('src', "");
  869. aframeObj.setAttribute('crossorigin', "anonymous");
  870. assets.appendChild(aframeObj);
  871. }
  872. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-image-item.vwf")) {
  873. let assets = document.querySelector('a-assets');
  874. if (assets){
  875. aframeObj = document.createElement('img');
  876. aframeObj.setAttribute('id', "item-"+GUID());
  877. aframeObj.setAttribute('src', "");
  878. aframeObj.setAttribute('crossorigin', "anonymous");
  879. assets.appendChild(aframeObj);
  880. }
  881. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-audio-item.vwf")) {
  882. let assets = document.querySelector('a-assets');
  883. if (assets){
  884. aframeObj = document.createElement('audio');
  885. aframeObj.setAttribute('id', "item-"+GUID());
  886. aframeObj.setAttribute('src', "");
  887. aframeObj.setAttribute('crossorigin', "anonymous");
  888. assets.appendChild(aframeObj);
  889. }
  890. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-video-item.vwf")) {
  891. let assets = document.querySelector('a-assets');
  892. if (assets){
  893. aframeObj = document.createElement('video');
  894. aframeObj.setAttribute('id', "item-"+GUID());
  895. aframeObj.setAttribute('src', "");
  896. aframeObj.setAttribute('crossorigin', "anonymous");
  897. aframeObj.setAttribute('autoplay', "");
  898. aframeObj.setAttribute('loop', true);
  899. assets.appendChild(aframeObj);
  900. }
  901. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/asky.vwf")) {
  902. aframeObj = document.createElement('a-sky');
  903. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acamera.vwf")) {
  904. aframeObj = document.createElement('a-camera');
  905. aframeObj.setAttribute('camera', 'active', false);
  906. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/alight.vwf")) {
  907. aframeObj = document.createElement('a-light');
  908. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acursor.vwf")) {
  909. aframeObj = document.createElement('a-cursor');
  910. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-sun-sky.vwf")) {
  911. aframeObj = document.createElement('a-sun-sky');
  912. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/abox.vwf")) {
  913. aframeObj = document.createElement('a-box');
  914. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aplane.vwf")) {
  915. aframeObj = document.createElement('a-plane');
  916. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acylinder.vwf")) {
  917. aframeObj = document.createElement('a-cylinder');
  918. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acone.vwf")) {
  919. aframeObj = document.createElement('a-cone');
  920. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/atext.vwf")) {
  921. aframeObj = document.createElement('a-text');
  922. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acolladamodel.vwf")) {
  923. aframeObj = document.createElement('a-collada-model');
  924. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aobjmodel.vwf")) {
  925. aframeObj = document.createElement('a-obj-model');
  926. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/agltfmodel.vwf")) {
  927. aframeObj = document.createElement('a-gltf-model');
  928. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/asphere.vwf")) {
  929. aframeObj = document.createElement('a-sphere');
  930. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aanimation.vwf")) {
  931. aframeObj = document.createElement('a-animation');
  932. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aentity.vwf")) {
  933. aframeObj = document.createElement('a-entity');
  934. }
  935. if (aframeObj.nodeName !== "A-ASSET-ITEM" &&
  936. aframeObj.nodeName !== "IMG" &&
  937. aframeObj.nodeName !== "AUDIO" &&
  938. aframeObj.nodeName !== "VIDEO"
  939. ){
  940. aframeObj.setAttribute('id', node.ID);
  941. }
  942. return aframeObj;
  943. }
  944. function addNodeToHierarchy(node) {
  945. if (node.aframeObj) {
  946. if (self.state.nodes[node.parentID] !== undefined) {
  947. var parent = self.state.nodes[node.parentID];
  948. if (parent.aframeObj) {
  949. if (parent.children === undefined) {
  950. parent.children = [];
  951. }
  952. parent.children.push(node.ID);
  953. //console.info( "Adding child: " + childID + " to " + nodeID );
  954. if (node.aframeObj.nodeName !== "A-ASSET-ITEM" &&
  955. node.aframeObj.nodeName !== "IMG" &&
  956. node.aframeObj.nodeName !== "AUDIO" &&
  957. node.aframeObj.nodeName !== "VIDEO"
  958. ){
  959. parent.aframeObj.appendChild(node.aframeObj);
  960. }
  961. }
  962. }
  963. if (node.aframeObj.nodeName !== "A-SCENE") {
  964. node.scene = self.state.scenes[self.kernel.application()];
  965. }
  966. }
  967. }
  968. function getPrototypes(kernel, extendsID) {
  969. var prototypes = [];
  970. var id = extendsID;
  971. while (id !== undefined) {
  972. prototypes.push(id);
  973. id = kernel.prototype(id);
  974. }
  975. return prototypes;
  976. }
  977. function isNodeDefinition(prototypes) {
  978. var found = false;
  979. if (prototypes) {
  980. for (var i = 0; i < prototypes.length && !found; i++) {
  981. found = (prototypes[i] == "http://vwf.example.com/aframe/node.vwf");
  982. }
  983. }
  984. return found;
  985. }
  986. function isAEntityDefinition(prototypes) {
  987. var found = false;
  988. if (prototypes) {
  989. for (var i = 0; i < prototypes.length && !found; i++) {
  990. found = (prototypes[i] == "http://vwf.example.com/aframe/aentity.vwf");
  991. }
  992. }
  993. return found;
  994. }
  995. // Changing this function significantly from the GLGE code
  996. // Will search hierarchy down until encountering a matching child
  997. // Will look into nodes that don't match.... this might not be desirable
  998. function FindChildByName(obj, childName, childType, recursive) {
  999. var child = undefined;
  1000. if (recursive) {
  1001. // TODO: If the obj itself has the child name, the object will be returned by this function
  1002. // I don't think this this desirable.
  1003. if (nameTest.call(this, obj, childName)) {
  1004. child = obj;
  1005. } else if (obj.children && obj.children.length > 0) {
  1006. for (var i = 0; i < obj.children.length && child === undefined; i++) {
  1007. child = FindChildByName(obj.children[i], childName, childType, true);
  1008. }
  1009. }
  1010. } else {
  1011. if (obj.children) {
  1012. for (var i = 0; i < obj.children.length && child === undefined; i++) {
  1013. if (nameTest.call(this, obj.children[i], childName)) {
  1014. child = obj.children[i];
  1015. }
  1016. }
  1017. }
  1018. }
  1019. return child;
  1020. }
  1021. function nameTest(obj, name) {
  1022. if (obj.name == "") {
  1023. return (obj.parent.name + "Child" == name);
  1024. } else {
  1025. return (obj.name == name || obj.id == name || obj.vwfID == name);
  1026. }
  1027. }
  1028. function httpGet(url) {
  1029. return new Promise(function (resolve, reject) {
  1030. // do the usual Http request
  1031. let request = new XMLHttpRequest();
  1032. request.open('GET', url);
  1033. request.onload = function () {
  1034. if (request.status == 200) {
  1035. resolve(request.response);
  1036. } else {
  1037. reject(Error(request.statusText));
  1038. }
  1039. };
  1040. request.onerror = function () {
  1041. reject(Error('Network Error'));
  1042. };
  1043. request.send();
  1044. });
  1045. }
  1046. async function httpGetJson(url) {
  1047. // check if the URL looks like a JSON file and call httpGet.
  1048. let regex = /\.(json)$/i;
  1049. if (regex.test(url)) {
  1050. // call the async function, wait for the result
  1051. return await httpGet(url);
  1052. } else {
  1053. throw Error('Bad Url Format');
  1054. }
  1055. }
  1056. function GUID() {
  1057. var S4 = function () {
  1058. return Math.floor(
  1059. Math.random() * 0x10000 /* 65536 */
  1060. ).toString(16);
  1061. };
  1062. return (
  1063. S4() + S4() + "-" +
  1064. S4() + "-" +
  1065. S4() + "-" +
  1066. S4() + "-" +
  1067. S4() + S4() + S4()
  1068. );
  1069. }
  1070. });