aframe.js 52 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428
  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. let worldQuat = node.aframeObj.object3D.getWorldQuaternion();
  214. let angle = (new THREE.Euler()).setFromQuaternion(worldQuat, 'YXZ');
  215. let rotation = (new THREE.Vector3(THREE.Math.radToDeg(angle.x),
  216. THREE.Math.radToDeg(angle.y), THREE.Math.radToDeg(angle.z) ));
  217. return rotation
  218. }
  219. if (methodName == 'worldPosition') {
  220. let position = node.aframeObj.object3D.getWorldPosition();
  221. return position
  222. }
  223. }
  224. },
  225. // -- deletingNode -------------------------------------------------------------------------
  226. //deletingNode: function( nodeID ) {
  227. //},
  228. // -- deletingNode -------------------------------------------------------------------------
  229. deletingNode: function (nodeID) {
  230. if (nodeID) {
  231. var childNode = this.state.nodes[nodeID];
  232. if (!childNode) return;
  233. if (childNode !== undefined) {
  234. if (childNode.children) {
  235. for (var i = 0; i < childNode.children.length; i++) {
  236. this.deletingNode(childNode.children[i]);
  237. }
  238. }
  239. if (childNode.aframeObj !== undefined) {
  240. // removes and destroys object
  241. childNode.aframeObj.parentNode.removeChild(childNode.aframeObj);
  242. childNode.aframeObj = undefined;
  243. }
  244. delete this.state.nodes[nodeID];
  245. }
  246. }
  247. },
  248. // -- settingProperty ----------------------------------------------------------------------
  249. settingProperty: function (nodeID, propertyName, propertyValue) {
  250. var node = this.state.nodes[nodeID];
  251. var value = undefined;
  252. // if (node.componentName == 'line') {
  253. // console.log(node.aframeObj);
  254. // }
  255. if (node && node.aframeObj && utility.validObject(propertyValue)) {
  256. var aframeObject = node.aframeObj;
  257. if (isNodeDefinition(node.prototypes)) {
  258. // 'id' will be set to the nodeID
  259. value = propertyValue;
  260. switch (propertyName) {
  261. default:
  262. value = undefined;
  263. break;
  264. }
  265. }
  266. if (value === undefined && isAEntityDefinition(node.prototypes)) {
  267. value = propertyValue;
  268. switch (propertyName) {
  269. case "position":
  270. this.state.setAFrameProperty('position', propertyValue, aframeObject);
  271. break;
  272. case "rotation":
  273. this.state.setAFrameProperty('rotation', propertyValue, aframeObject);
  274. break;
  275. case "scale":
  276. this.state.setAFrameProperty('scale', propertyValue, aframeObject);
  277. break;
  278. case "clickable":
  279. if (propertyValue) {
  280. aframeObject.setAttribute('class', 'intersectable');
  281. } else {
  282. aframeObject.setAttribute('class', 'nonintersectable');
  283. }
  284. node.events.clickable = propertyValue;
  285. break;
  286. case "visible":
  287. aframeObject.setAttribute('visible', propertyValue);
  288. break;
  289. // case "clickable":
  290. // console.log("set clickable!");
  291. // value = propertyValue;
  292. // break;
  293. // case "clickable":
  294. // if (propertyValue) {
  295. // aframeObject.addEventListener('click', function (evt) {
  296. // console.log("click!");
  297. // vwf_view.kernel.fireEvent(node.ID, "clickEvent",evt.detail.cursorEl.id);
  298. // });
  299. // }
  300. // break;
  301. // case "look-controls-enabled":
  302. // aframeObject.setAttribute('look-controls', 'enabled', propertyValue);
  303. // break;
  304. case "wasd-controls":
  305. aframeObject.setAttribute('wasd-controls', 'enabled', propertyValue);
  306. break;
  307. default:
  308. value = undefined;
  309. break;
  310. }
  311. }
  312. if (value === undefined && aframeObject.nodeName == "A-ASSET-ITEM") {
  313. value = propertyValue;
  314. switch (propertyName) {
  315. case "itemID":
  316. aframeObject.setAttribute('id', propertyValue);
  317. break;
  318. case "itemSrc":
  319. aframeObject.setAttribute('src', propertyValue);
  320. break;
  321. default:
  322. value = undefined;
  323. break;
  324. }
  325. }
  326. if (value === undefined && aframeObject.nodeName == "IMG") {
  327. value = propertyValue;
  328. switch (propertyName) {
  329. case "itemID":
  330. aframeObject.setAttribute('id', propertyValue);
  331. break;
  332. case "itemSrc":
  333. aframeObject.setAttribute('src', propertyValue);
  334. break;
  335. // case "width":
  336. // aframeObject.width = propertyValue;
  337. // break;
  338. // case "height":
  339. // aframeObject.height = propertyValue;
  340. // break;
  341. default:
  342. value = undefined;
  343. break;
  344. }
  345. }
  346. if (value === undefined && aframeObject.nodeName == "AUDIO") {
  347. value = propertyValue;
  348. switch (propertyName) {
  349. case "itemID":
  350. aframeObject.setAttribute('id', propertyValue);
  351. break;
  352. case "itemSrc":
  353. aframeObject.setAttribute('src', propertyValue);
  354. break;
  355. default:
  356. value = undefined;
  357. break;
  358. }
  359. }
  360. if (value === undefined && aframeObject.nodeName == "VIDEO") {
  361. value = propertyValue;
  362. switch (propertyName) {
  363. case "itemID":
  364. aframeObject.setAttribute('id', propertyValue);
  365. break;
  366. case "itemSrc":
  367. aframeObject.setAttribute('src', propertyValue);
  368. break;
  369. default:
  370. value = undefined;
  371. break;
  372. }
  373. }
  374. if (value === undefined && aframeObject.nodeName == "A-SKY") {
  375. value = propertyValue;
  376. self.aframeDef['A-SKY'].forEach(element => {
  377. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  378. value = undefined;
  379. })
  380. }
  381. if (value === undefined && aframeObject.nodeName == "A-TEXT") {
  382. value = propertyValue;
  383. self.aframeDef['A-TEXT'].forEach(element => {
  384. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  385. value = undefined;
  386. })
  387. }
  388. if (value === undefined && aframeObject.nodeName == "A-SCENE") {
  389. value = propertyValue;
  390. switch (propertyName) {
  391. case "color":
  392. aframeObject.setAttribute('background', {'color': propertyValue} );
  393. break;
  394. case "transparent":
  395. aframeObject.setAttribute('background', {'transparent': propertyValue} );
  396. break;
  397. // case "fog":
  398. // aframeObject.setAttribute('fog', propertyValue);
  399. // break;
  400. case "assets":
  401. let assetsEl = document.querySelector('a-assets');
  402. if (!assetsEl) {
  403. let newAssetsEl = document.createElement('a-assets');
  404. aframeObject.appendChild(newAssetsEl);
  405. }
  406. var assetsElement = document.querySelector('a-assets');
  407. if (propertyValue) {
  408. httpGetJson(propertyValue).then(function (response) {
  409. console.log(JSON.parse(response));
  410. let assets = JSON.parse(response);
  411. for (var prop in assets) {
  412. var elm = document.createElement(assets[prop].tag);
  413. elm.setAttribute('id', prop);
  414. elm.setAttribute('src', assets[prop].src);
  415. assetsElement.appendChild(elm);
  416. }
  417. }).catch(function (error) {
  418. console.log(error);
  419. });
  420. }
  421. break;
  422. default:
  423. value = undefined;
  424. break;
  425. }
  426. }
  427. if (value === undefined && aframeObject.nodeName == "A-BOX") {
  428. value = propertyValue;
  429. self.aframeDef['A-BOX'].forEach(element => {
  430. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  431. value = undefined;
  432. })
  433. }
  434. if (value === undefined && aframeObject.nodeName == "A-LIGHT") {
  435. value = propertyValue;
  436. self.aframeDef['A-LIGHT'].forEach(element => {
  437. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  438. value = undefined;
  439. })
  440. switch (propertyName) {
  441. case "castShadow":
  442. aframeObject.setAttribute('light', 'castShadow', propertyValue);
  443. break;
  444. case "shadowCameraVisible":
  445. aframeObject.setAttribute('light', 'shadowCameraVisible', propertyValue);
  446. break;
  447. default:
  448. value = undefined;
  449. break;
  450. }
  451. }
  452. if (value === undefined && aframeObject.nodeName == "A-GLTF-MODEL") {
  453. value = propertyValue;
  454. switch (propertyName) {
  455. case "src":
  456. aframeObject.setAttribute('src', propertyValue);
  457. break;
  458. default:
  459. value = undefined;
  460. break;
  461. }
  462. }
  463. if (value === undefined && aframeObject.nodeName == "A-COLLADA-MODEL") {
  464. value = propertyValue;
  465. switch (propertyName) {
  466. case "src":
  467. aframeObject.setAttribute('src', propertyValue);
  468. break;
  469. default:
  470. value = undefined;
  471. break;
  472. }
  473. }
  474. if (value === undefined && aframeObject.nodeName == "A-OBJ-MODEL") {
  475. value = propertyValue;
  476. switch (propertyName) {
  477. case "src":
  478. aframeObject.setAttribute('src', propertyValue);
  479. break;
  480. case "mtl":
  481. aframeObject.setAttribute('mtl', propertyValue);
  482. break;
  483. default:
  484. value = undefined;
  485. break;
  486. }
  487. }
  488. if (value === undefined && aframeObject.nodeName == "A-PLANE") {
  489. value = propertyValue;
  490. self.aframeDef['A-PLANE'].forEach(element => {
  491. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  492. value = undefined;
  493. })
  494. }
  495. if (value === undefined && aframeObject.nodeName == "A-SPHERE") {
  496. value = propertyValue;
  497. self.aframeDef['A-SPHERE'].forEach(element => {
  498. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  499. value = undefined;
  500. })
  501. }
  502. if (value === undefined && aframeObject.nodeName == "A-CYLINDER") {
  503. value = propertyValue;
  504. self.aframeDef['A-CYLINDER'].forEach(element => {
  505. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  506. value = undefined;
  507. })
  508. }
  509. if (value === undefined && aframeObject.nodeName == "A-CONE") {
  510. value = propertyValue;
  511. self.aframeDef['A-CONE'].forEach(element => {
  512. element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
  513. value = undefined;
  514. })
  515. }
  516. if (value === undefined && aframeObject.nodeName == "A-ANIMATION") {
  517. value = propertyValue;
  518. switch (propertyName) {
  519. // attribute:
  520. // dur:
  521. // from:
  522. // to:
  523. // repeat:
  524. case "dur":
  525. aframeObject.setAttribute('dur', propertyValue);
  526. break;
  527. case "from":
  528. aframeObject.setAttribute('from', propertyValue);
  529. break;
  530. case "to":
  531. aframeObject.setAttribute('to', propertyValue);
  532. break;
  533. case "repeat":
  534. aframeObject.setAttribute('repeat', propertyValue);
  535. break;
  536. case "attribute":
  537. aframeObject.setAttribute('attribute', propertyValue);
  538. break;
  539. case "begin":
  540. aframeObject.setAttribute('begin', propertyValue);
  541. break;
  542. default:
  543. value = undefined;
  544. break;
  545. }
  546. }
  547. if (value === undefined && aframeObject.nodeName == "A-CAMERA") {
  548. value = propertyValue;
  549. switch (propertyName) {
  550. case "user-height":
  551. aframeObject.setAttribute('user-height', propertyValue);
  552. break;
  553. case "look-controls-enabled":
  554. aframeObject.setAttribute('look-controls-enabled', propertyValue);
  555. break;
  556. case "wasd-controls-enabled":
  557. aframeObject.setAttribute('wasd-controls-enabled', propertyValue);
  558. break;
  559. // case "active":
  560. // aframeObject.setAttribute('camera', 'active', propertyValue);
  561. // break;
  562. default:
  563. value = undefined;
  564. break;
  565. }
  566. }
  567. if (value === undefined && aframeObject.nodeName == "A-SUN-SKY") {
  568. value = propertyValue;
  569. switch (propertyName) {
  570. case "sunPosition":
  571. aframeObject.setAttribute('material', 'sunPosition', propertyValue);
  572. break;
  573. // case "active":
  574. // aframeObject.setAttribute('camera', 'active', propertyValue);
  575. // break;
  576. default:
  577. value = undefined;
  578. break;
  579. }
  580. }
  581. }
  582. return value;
  583. },
  584. // -- gettingProperty ----------------------------------------------------------------------
  585. gettingProperty: function (nodeID, propertyName, propertyValue) {
  586. var node = this.state.nodes[nodeID];
  587. var value = undefined;
  588. if (node && node.aframeObj) {
  589. var aframeObject = node.aframeObj;
  590. if (isNodeDefinition(node.prototypes)) {
  591. switch (propertyName) {
  592. }
  593. }
  594. if (value === undefined && isAEntityDefinition(node.prototypes)) {
  595. switch (propertyName) {
  596. case "position":
  597. var pos = aframeObject.getAttribute('position');
  598. if (pos !== undefined) {
  599. value = pos//[pos.x, pos.y, pos.z]//AFRAME.utils.coordinates.stringify(pos);
  600. }
  601. break;
  602. case "scale":
  603. var scale = aframeObject.getAttribute('scale');
  604. if (scale !== undefined) {
  605. value = scale//AFRAME.utils.coordinates.stringify(scale);
  606. }
  607. break;
  608. case "rotation":
  609. var rot = aframeObject.getAttribute('rotation');
  610. if (rot !== undefined) {
  611. value = rot//AFRAME.utils.coordinates.stringify(rot);
  612. }
  613. break;
  614. case "clickable":
  615. value = node.events.clickable;
  616. break;
  617. // case "look-controls-enabled":
  618. // var look = aframeObject.getAttribute('look-controls-enabled');
  619. // if (look !== null && look !== undefined) {
  620. // value = aframeObject.getAttribute('look-controls').enabled;
  621. // }
  622. // break;
  623. // case "wasd-controls":
  624. // var wasd = aframeObject.getAttribute('wasd-controls');
  625. // if (wasd !== null && wasd !== undefined) {
  626. // value = aframeObject.getAttribute('wasd-controls').enabled;
  627. // }
  628. // break;
  629. case "visible":
  630. value = aframeObject.getAttribute('visible');
  631. break;
  632. }
  633. }
  634. if (value === undefined && aframeObject.nodeName == "A-ASSET-ITEM") {
  635. switch (propertyName) {
  636. case "itemID":
  637. value = aframeObject.getAttribute('id');
  638. break;
  639. case "itemSrc":
  640. value = aframeObject.getAttribute('src');
  641. break;
  642. }
  643. }
  644. if (value === undefined && aframeObject.nodeName == "IMG") {
  645. switch (propertyName) {
  646. case "itemID":
  647. value = aframeObject.getAttribute('id');
  648. break;
  649. case "itemSrc":
  650. value = aframeObject.getAttribute('src');
  651. break;
  652. case "width":
  653. value = aframeObject.width;
  654. break;
  655. case "height":
  656. value = aframeObject.height;
  657. break;
  658. }
  659. }
  660. if (value === undefined && aframeObject.nodeName == "AUDIO") {
  661. switch (propertyName) {
  662. case "itemID":
  663. value = aframeObject.getAttribute('id');
  664. break;
  665. case "itemSrc":
  666. value = aframeObject.getAttribute('src');
  667. break;
  668. }
  669. }
  670. if (value === undefined && aframeObject.nodeName == "VIDEO") {
  671. switch (propertyName) {
  672. case "itemID":
  673. value = aframeObject.getAttribute('id');
  674. break;
  675. case "itemSrc":
  676. value = aframeObject.getAttribute('src');
  677. break;
  678. case "videoWidth":
  679. value = aframeObject.videoWidth;
  680. break;
  681. case "videoHeight":
  682. value = aframeObject.videoHeight;
  683. break;
  684. }
  685. }
  686. if (value === undefined && aframeObject.nodeName == "A-SCENE") {
  687. switch (propertyName) {
  688. // case "fog":
  689. // value = aframeObject.getAttribute('fog');
  690. // break;
  691. case "color":
  692. if (aframeObject.getAttribute('background')) {
  693. value = aframeObject.getAttribute('background').color;
  694. }
  695. break;
  696. case "transparent":
  697. if (aframeObject.getAttribute('background')) {
  698. value = aframeObject.getAttribute('background').transparent;
  699. }
  700. break;
  701. }
  702. }
  703. if (value === undefined && aframeObject.nodeName == "A-SKY") {
  704. self.aframeDef['A-SKY'].forEach(element => {
  705. if (element == propertyName) {
  706. value = aframeObject.getAttribute(element);
  707. }
  708. })
  709. }
  710. if (value === undefined && aframeObject.nodeName == "A-LIGHT") {
  711. self.aframeDef['A-LIGHT'].forEach(element => {
  712. if (element == propertyName) {
  713. value = aframeObject.getAttribute(element);
  714. }
  715. })
  716. switch (propertyName) {
  717. case "castShadow":
  718. value = aframeObject.getAttribute('light').castShadow;
  719. break;
  720. case "shadowCameraVisible":
  721. value = aframeObject.getAttribute('light').shadowCameraVisible;
  722. break;
  723. }
  724. }
  725. if (value === undefined && aframeObject.nodeName == "A-BOX") {
  726. self.aframeDef['A-BOX'].forEach(element => {
  727. if (element == propertyName) {
  728. value = aframeObject.getAttribute(element);
  729. }
  730. })
  731. }
  732. if (value === undefined && aframeObject.nodeName == "A-PLANE") {
  733. self.aframeDef['A-PLANE'].forEach(element => {
  734. if (element == propertyName) {
  735. value = aframeObject.getAttribute(element);
  736. }
  737. })
  738. }
  739. if (value === undefined && aframeObject.nodeName == "A-SPHERE") {
  740. self.aframeDef['A-SPHERE'].forEach(element => {
  741. if (element == propertyName) {
  742. value = aframeObject.getAttribute(element);
  743. }
  744. })
  745. }
  746. if (value === undefined && aframeObject.nodeName == "A-CYLINDER") {
  747. self.aframeDef['A-CYLINDER'].forEach(element => {
  748. if (element == propertyName) {
  749. value = aframeObject.getAttribute(element);
  750. }
  751. })
  752. }
  753. if (value === undefined && aframeObject.nodeName == "A-CONE") {
  754. self.aframeDef['A-CONE'].forEach(element => {
  755. if (element == propertyName) {
  756. value = aframeObject.getAttribute(element);
  757. }
  758. })
  759. }
  760. if (value === undefined && aframeObject.nodeName == "A-TEXT") {
  761. self.aframeDef['A-TEXT'].forEach(element => {
  762. if (element == propertyName) {
  763. value = aframeObject.getAttribute(element);
  764. }
  765. })
  766. }
  767. if (value === undefined && aframeObject.nodeName == "A-ANIMATION") {
  768. switch (propertyName) {
  769. case "attribute":
  770. value = aframeObject.getAttribute('attribute');
  771. break;
  772. case "dur":
  773. value = aframeObject.getAttribute('dur');
  774. break;
  775. case "from":
  776. value = aframeObject.getAttribute('from');
  777. break;
  778. case "to":
  779. value = aframeObject.getAttribute('to');
  780. break;
  781. case "repeat":
  782. value = aframeObject.getAttribute('repeat');
  783. break;
  784. case "begin":
  785. value = aframeObject.getAttribute('begin');
  786. break;
  787. }
  788. }
  789. if (value === undefined && aframeObject.nodeName == "A-CAMERA") {
  790. switch (propertyName) {
  791. case "user-height":
  792. value = aframeObject.getAttribute('user-height');
  793. break;
  794. case "look-controls-enabled":
  795. value = aframeObject.getAttribute('look-controls-enabled');
  796. break;
  797. case "wasd-controls-enabled":
  798. value = aframeObject.getAttribute('wasd-controls-enabled');
  799. break;
  800. }
  801. // switch (propertyName) {
  802. // case "active":
  803. // value = aframeObject.getAttribute('camera').active;
  804. // break;
  805. // }
  806. }
  807. if (value === undefined && aframeObject.nodeName == "A-SUN-SKY") {
  808. switch (propertyName) {
  809. case "sunPosition":
  810. value = aframeObject.getAttribute('material').sunPosition;
  811. break;
  812. }
  813. // switch (propertyName) {
  814. // case "active":
  815. // value = aframeObject.getAttribute('camera').active;
  816. // break;
  817. // }
  818. }
  819. if (value === undefined && aframeObject.nodeName == "A-COLLADA-MODEL") {
  820. switch (propertyName) {
  821. case "src":
  822. value = aframeObject.getAttribute('src');
  823. break;
  824. }
  825. }
  826. if (value === undefined && aframeObject.nodeName == "A-OBJ-MODEL") {
  827. switch (propertyName) {
  828. case "src":
  829. value = aframeObject.getAttribute('src');
  830. break;
  831. case "mtl":
  832. value = aframeObject.getAttribute('mtl');
  833. break;
  834. }
  835. }
  836. if (value === undefined && aframeObject.nodeName == "A-GLTF-MODEL") {
  837. switch (propertyName) {
  838. case "src":
  839. value = aframeObject.getAttribute('src');
  840. break;
  841. }
  842. }
  843. }
  844. if (value !== undefined) {
  845. propertyValue = value;
  846. }
  847. return value;
  848. }
  849. });
  850. function createAFrameObject(node, config) {
  851. var protos = node.prototypes;
  852. var aframeObj = undefined;
  853. if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/ascene.vwf")) {
  854. aframeObj = document.createElement('a-scene');
  855. let assetsElement = document.createElement('a-assets');
  856. aframeObj.appendChild(assetsElement);
  857. aframeObj.setAttribute('scene-utils', "");
  858. self.state.scenes[node.ID] = aframeObj;
  859. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-item.vwf")) {
  860. let assets = document.querySelector('a-assets');
  861. if (assets){
  862. aframeObj = document.createElement('a-asset-item');
  863. aframeObj.setAttribute('id', "item-"+GUID());
  864. aframeObj.setAttribute('src', "");
  865. aframeObj.setAttribute('crossorigin', "anonymous");
  866. assets.appendChild(aframeObj);
  867. }
  868. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-image-item.vwf")) {
  869. let assets = document.querySelector('a-assets');
  870. if (assets){
  871. aframeObj = document.createElement('img');
  872. aframeObj.setAttribute('id', "item-"+GUID());
  873. aframeObj.setAttribute('src', "");
  874. aframeObj.setAttribute('crossorigin', "anonymous");
  875. assets.appendChild(aframeObj);
  876. }
  877. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-audio-item.vwf")) {
  878. let assets = document.querySelector('a-assets');
  879. if (assets){
  880. aframeObj = document.createElement('audio');
  881. aframeObj.setAttribute('id', "item-"+GUID());
  882. aframeObj.setAttribute('src', "");
  883. aframeObj.setAttribute('crossorigin', "anonymous");
  884. assets.appendChild(aframeObj);
  885. }
  886. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-video-item.vwf")) {
  887. let assets = document.querySelector('a-assets');
  888. if (assets){
  889. aframeObj = document.createElement('video');
  890. aframeObj.setAttribute('id', "item-"+GUID());
  891. aframeObj.setAttribute('src', "");
  892. aframeObj.setAttribute('crossorigin', "anonymous");
  893. aframeObj.setAttribute('autoplay', "");
  894. aframeObj.setAttribute('loop', true);
  895. assets.appendChild(aframeObj);
  896. }
  897. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/asky.vwf")) {
  898. aframeObj = document.createElement('a-sky');
  899. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acamera.vwf")) {
  900. aframeObj = document.createElement('a-camera');
  901. aframeObj.setAttribute('camera', 'active', false);
  902. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/alight.vwf")) {
  903. aframeObj = document.createElement('a-light');
  904. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acursor.vwf")) {
  905. aframeObj = document.createElement('a-cursor');
  906. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-sun-sky.vwf")) {
  907. aframeObj = document.createElement('a-sun-sky');
  908. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/abox.vwf")) {
  909. aframeObj = document.createElement('a-box');
  910. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aplane.vwf")) {
  911. aframeObj = document.createElement('a-plane');
  912. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acylinder.vwf")) {
  913. aframeObj = document.createElement('a-cylinder');
  914. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acone.vwf")) {
  915. aframeObj = document.createElement('a-cone');
  916. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/atext.vwf")) {
  917. aframeObj = document.createElement('a-text');
  918. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acolladamodel.vwf")) {
  919. aframeObj = document.createElement('a-collada-model');
  920. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aobjmodel.vwf")) {
  921. aframeObj = document.createElement('a-obj-model');
  922. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/agltfmodel.vwf")) {
  923. aframeObj = document.createElement('a-gltf-model');
  924. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/asphere.vwf")) {
  925. aframeObj = document.createElement('a-sphere');
  926. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aanimation.vwf")) {
  927. aframeObj = document.createElement('a-animation');
  928. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aentity.vwf")) {
  929. aframeObj = document.createElement('a-entity');
  930. }
  931. if (aframeObj.nodeName !== "A-ASSET-ITEM" &&
  932. aframeObj.nodeName !== "IMG" &&
  933. aframeObj.nodeName !== "AUDIO" &&
  934. aframeObj.nodeName !== "VIDEO"
  935. ){
  936. aframeObj.setAttribute('id', node.ID);
  937. }
  938. return aframeObj;
  939. }
  940. function addNodeToHierarchy(node) {
  941. if (node.aframeObj) {
  942. if (self.state.nodes[node.parentID] !== undefined) {
  943. var parent = self.state.nodes[node.parentID];
  944. if (parent.aframeObj) {
  945. if (parent.children === undefined) {
  946. parent.children = [];
  947. }
  948. parent.children.push(node.ID);
  949. //console.info( "Adding child: " + childID + " to " + nodeID );
  950. if (node.aframeObj.nodeName !== "A-ASSET-ITEM" &&
  951. node.aframeObj.nodeName !== "IMG" &&
  952. node.aframeObj.nodeName !== "AUDIO" &&
  953. node.aframeObj.nodeName !== "VIDEO"
  954. ){
  955. parent.aframeObj.appendChild(node.aframeObj);
  956. }
  957. }
  958. }
  959. if (node.aframeObj.nodeName !== "A-SCENE") {
  960. node.scene = self.state.scenes[self.kernel.application()];
  961. }
  962. }
  963. }
  964. function getPrototypes(kernel, extendsID) {
  965. var prototypes = [];
  966. var id = extendsID;
  967. while (id !== undefined) {
  968. prototypes.push(id);
  969. id = kernel.prototype(id);
  970. }
  971. return prototypes;
  972. }
  973. function isNodeDefinition(prototypes) {
  974. var found = false;
  975. if (prototypes) {
  976. for (var i = 0; i < prototypes.length && !found; i++) {
  977. found = (prototypes[i] == "http://vwf.example.com/aframe/node.vwf");
  978. }
  979. }
  980. return found;
  981. }
  982. function isAEntityDefinition(prototypes) {
  983. var found = false;
  984. if (prototypes) {
  985. for (var i = 0; i < prototypes.length && !found; i++) {
  986. found = (prototypes[i] == "http://vwf.example.com/aframe/aentity.vwf");
  987. }
  988. }
  989. return found;
  990. }
  991. // Changing this function significantly from the GLGE code
  992. // Will search hierarchy down until encountering a matching child
  993. // Will look into nodes that don't match.... this might not be desirable
  994. function FindChildByName(obj, childName, childType, recursive) {
  995. var child = undefined;
  996. if (recursive) {
  997. // TODO: If the obj itself has the child name, the object will be returned by this function
  998. // I don't think this this desirable.
  999. if (nameTest.call(this, obj, childName)) {
  1000. child = obj;
  1001. } else if (obj.children && obj.children.length > 0) {
  1002. for (var i = 0; i < obj.children.length && child === undefined; i++) {
  1003. child = FindChildByName(obj.children[i], childName, childType, true);
  1004. }
  1005. }
  1006. } else {
  1007. if (obj.children) {
  1008. for (var i = 0; i < obj.children.length && child === undefined; i++) {
  1009. if (nameTest.call(this, obj.children[i], childName)) {
  1010. child = obj.children[i];
  1011. }
  1012. }
  1013. }
  1014. }
  1015. return child;
  1016. }
  1017. function nameTest(obj, name) {
  1018. if (obj.name == "") {
  1019. return (obj.parent.name + "Child" == name);
  1020. } else {
  1021. return (obj.name == name || obj.id == name || obj.vwfID == name);
  1022. }
  1023. }
  1024. function httpGet(url) {
  1025. return new Promise(function (resolve, reject) {
  1026. // do the usual Http request
  1027. let request = new XMLHttpRequest();
  1028. request.open('GET', url);
  1029. request.onload = function () {
  1030. if (request.status == 200) {
  1031. resolve(request.response);
  1032. } else {
  1033. reject(Error(request.statusText));
  1034. }
  1035. };
  1036. request.onerror = function () {
  1037. reject(Error('Network Error'));
  1038. };
  1039. request.send();
  1040. });
  1041. }
  1042. async function httpGetJson(url) {
  1043. // check if the URL looks like a JSON file and call httpGet.
  1044. let regex = /\.(json)$/i;
  1045. if (regex.test(url)) {
  1046. // call the async function, wait for the result
  1047. return await httpGet(url);
  1048. } else {
  1049. throw Error('Bad Url Format');
  1050. }
  1051. }
  1052. function GUID() {
  1053. var S4 = function () {
  1054. return Math.floor(
  1055. Math.random() * 0x10000 /* 65536 */
  1056. ).toString(16);
  1057. };
  1058. return (
  1059. S4() + S4() + "-" +
  1060. S4() + "-" +
  1061. S4() + "-" +
  1062. S4() + "-" +
  1063. S4() + S4() + S4()
  1064. );
  1065. }
  1066. });