aframe.js 52 KB

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