aframe.js 53 KB

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