aframe.js 53 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443
  1. "use strict";
  2. /*
  3. The MIT License (MIT)
  4. Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contributors. (https://github.com/NikolaySuslov/livecodingspace/blob/master/LICENSE.md)
  5. Virtual World Framework Apache 2.0 license (https://github.com/NikolaySuslov/livecodingspace/blob/master/licenses/LICENSE_VWF.md)
  6. */
  7. // VWF & A-Frame model driver
  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. //aframeObj.setAttribute('loading-screen', "backgroundColor: black");
  863. self.state.scenes[node.ID] = aframeObj;
  864. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-item.vwf")) {
  865. let assets = document.querySelector('a-assets');
  866. if (assets){
  867. aframeObj = document.createElement('a-asset-item');
  868. aframeObj.setAttribute('id', "item-"+GUID());
  869. aframeObj.setAttribute('src', "");
  870. aframeObj.setAttribute('crossorigin', "anonymous");
  871. assets.appendChild(aframeObj);
  872. }
  873. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-image-item.vwf")) {
  874. let assets = document.querySelector('a-assets');
  875. if (assets){
  876. let elID = "item-"+GUID();
  877. aframeObj = document.createElement('img');
  878. aframeObj.setAttribute('id', elID);
  879. aframeObj.setAttribute('src', "");
  880. aframeObj.setAttribute('crossorigin', "anonymous");
  881. assets.appendChild(aframeObj);
  882. }
  883. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-audio-item.vwf")) {
  884. let assets = document.querySelector('a-assets');
  885. if (assets){
  886. aframeObj = document.createElement('audio');
  887. aframeObj.setAttribute('id', "item-"+GUID());
  888. aframeObj.setAttribute('src', "");
  889. aframeObj.setAttribute('crossorigin', "anonymous");
  890. assets.appendChild(aframeObj);
  891. }
  892. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-video-item.vwf")) {
  893. let assets = document.querySelector('a-assets');
  894. if (assets){
  895. aframeObj = document.createElement('video');
  896. aframeObj.setAttribute('id', "item-"+GUID());
  897. aframeObj.setAttribute('src', "");
  898. aframeObj.setAttribute('crossorigin', "anonymous");
  899. aframeObj.setAttribute('autoplay', "");
  900. aframeObj.setAttribute('loop', true);
  901. assets.appendChild(aframeObj);
  902. }
  903. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/asky.vwf")) {
  904. aframeObj = document.createElement('a-sky');
  905. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acamera.vwf")) {
  906. aframeObj = document.createElement('a-camera');
  907. aframeObj.setAttribute('camera', 'active', false);
  908. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/alight.vwf")) {
  909. aframeObj = document.createElement('a-light');
  910. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acursor.vwf")) {
  911. aframeObj = document.createElement('a-cursor');
  912. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-sun-sky.vwf")) {
  913. aframeObj = document.createElement('a-sun-sky');
  914. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/abox.vwf")) {
  915. aframeObj = document.createElement('a-box');
  916. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aplane.vwf")) {
  917. aframeObj = document.createElement('a-plane');
  918. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acylinder.vwf")) {
  919. aframeObj = document.createElement('a-cylinder');
  920. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acone.vwf")) {
  921. aframeObj = document.createElement('a-cone');
  922. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/atext.vwf")) {
  923. aframeObj = document.createElement('a-text');
  924. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acolladamodel.vwf")) {
  925. aframeObj = document.createElement('a-collada-model');
  926. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aobjmodel.vwf")) {
  927. aframeObj = document.createElement('a-obj-model');
  928. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/agltfmodel.vwf")) {
  929. aframeObj = document.createElement('a-gltf-model');
  930. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/asphere.vwf")) {
  931. aframeObj = document.createElement('a-sphere');
  932. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aanimation.vwf")) {
  933. aframeObj = document.createElement('a-animation');
  934. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aentity.vwf")) {
  935. aframeObj = document.createElement('a-entity');
  936. }
  937. if (aframeObj.nodeName !== "A-ASSET-ITEM" &&
  938. aframeObj.nodeName !== "IMG" &&
  939. aframeObj.nodeName !== "AUDIO" &&
  940. aframeObj.nodeName !== "VIDEO"
  941. ){
  942. aframeObj.setAttribute('id', node.ID);
  943. }
  944. return aframeObj;
  945. }
  946. function addNodeToHierarchy(node) {
  947. if (node.aframeObj) {
  948. if (self.state.nodes[node.parentID] !== undefined) {
  949. var parent = self.state.nodes[node.parentID];
  950. if (parent.aframeObj) {
  951. if (parent.children === undefined) {
  952. parent.children = [];
  953. }
  954. parent.children.push(node.ID);
  955. //console.info( "Adding child: " + childID + " to " + nodeID );
  956. if (node.aframeObj.nodeName !== "A-ASSET-ITEM" &&
  957. node.aframeObj.nodeName !== "IMG" &&
  958. node.aframeObj.nodeName !== "AUDIO" &&
  959. node.aframeObj.nodeName !== "VIDEO"
  960. ){
  961. parent.aframeObj.appendChild(node.aframeObj);
  962. }
  963. }
  964. }
  965. if (node.aframeObj.nodeName !== "A-SCENE") {
  966. node.scene = self.state.scenes[self.kernel.application()];
  967. }
  968. }
  969. }
  970. function getPrototypes(kernel, extendsID) {
  971. var prototypes = [];
  972. var id = extendsID;
  973. while (id !== undefined) {
  974. prototypes.push(id);
  975. id = kernel.prototype(id);
  976. }
  977. return prototypes;
  978. }
  979. function isNodeDefinition(prototypes) {
  980. var found = false;
  981. if (prototypes) {
  982. for (var i = 0; i < prototypes.length && !found; i++) {
  983. found = (prototypes[i] == "http://vwf.example.com/aframe/node.vwf");
  984. }
  985. }
  986. return found;
  987. }
  988. function isAEntityDefinition(prototypes) {
  989. var found = false;
  990. if (prototypes) {
  991. for (var i = 0; i < prototypes.length && !found; i++) {
  992. found = (prototypes[i] == "http://vwf.example.com/aframe/aentity.vwf");
  993. }
  994. }
  995. return found;
  996. }
  997. // Changing this function significantly from the GLGE code
  998. // Will search hierarchy down until encountering a matching child
  999. // Will look into nodes that don't match.... this might not be desirable
  1000. function FindChildByName(obj, childName, childType, recursive) {
  1001. var child = undefined;
  1002. if (recursive) {
  1003. // TODO: If the obj itself has the child name, the object will be returned by this function
  1004. // I don't think this this desirable.
  1005. if (nameTest.call(this, obj, childName)) {
  1006. child = obj;
  1007. } else if (obj.children && obj.children.length > 0) {
  1008. for (var i = 0; i < obj.children.length && child === undefined; i++) {
  1009. child = FindChildByName(obj.children[i], childName, childType, true);
  1010. }
  1011. }
  1012. } else {
  1013. if (obj.children) {
  1014. for (var i = 0; i < obj.children.length && child === undefined; i++) {
  1015. if (nameTest.call(this, obj.children[i], childName)) {
  1016. child = obj.children[i];
  1017. }
  1018. }
  1019. }
  1020. }
  1021. return child;
  1022. }
  1023. function nameTest(obj, name) {
  1024. if (obj.name == "") {
  1025. return (obj.parent.name + "Child" == name);
  1026. } else {
  1027. return (obj.name == name || obj.id == name || obj.vwfID == name);
  1028. }
  1029. }
  1030. function httpGet(url) {
  1031. return new Promise(function (resolve, reject) {
  1032. // do the usual Http request
  1033. let request = new XMLHttpRequest();
  1034. request.open('GET', url);
  1035. request.onload = function () {
  1036. if (request.status == 200) {
  1037. resolve(request.response);
  1038. } else {
  1039. reject(Error(request.statusText));
  1040. }
  1041. };
  1042. request.onerror = function () {
  1043. reject(Error('Network Error'));
  1044. };
  1045. request.send();
  1046. });
  1047. }
  1048. async function httpGetJson(url) {
  1049. // check if the URL looks like a JSON file and call httpGet.
  1050. let regex = /\.(json)$/i;
  1051. if (regex.test(url)) {
  1052. // call the async function, wait for the result
  1053. return await httpGet(url);
  1054. } else {
  1055. throw Error('Bad Url Format');
  1056. }
  1057. }
  1058. function GUID() {
  1059. var S4 = function () {
  1060. return Math.floor(
  1061. Math.random() * 0x10000 /* 65536 */
  1062. ).toString(16);
  1063. };
  1064. return (
  1065. S4() + S4() + "-" +
  1066. S4() + "-" +
  1067. S4() + "-" +
  1068. S4() + "-" +
  1069. S4() + S4() + S4()
  1070. );
  1071. }
  1072. });