aframe.js 52 KB

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