aframe.js 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778
  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. return model.load(module, {
  23. // == Module Definition ====================================================================
  24. // -- initialize ---------------------------------------------------------------------------
  25. initialize: function () {
  26. self = this;
  27. this.state = {
  28. nodes: {},
  29. scenes: {},
  30. prototypes: {},
  31. createLocalNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
  32. childSource, childType, childIndex, childName, callback) {
  33. return {
  34. "parentID": nodeID,
  35. "ID": childID,
  36. "extendsID": childExtendsID,
  37. "implementsIDs": childImplementsIDs,
  38. "source": childSource,
  39. "type": childType,
  40. "name": childName,
  41. "prototypes": undefined,
  42. "aframeObj": undefined,
  43. "scene": undefined
  44. };
  45. },
  46. isAFrameClass: function (prototypes, classID) {
  47. if (prototypes) {
  48. for (var i = 0; i < prototypes.length; i++) {
  49. if (prototypes[i] === classID) {
  50. //console.info( "prototypes[ i ]: " + prototypes[ i ] );
  51. return true;
  52. }
  53. }
  54. }
  55. return false;
  56. },
  57. isAFrameComponent: function (prototypes) {
  58. var found = false;
  59. if (prototypes) {
  60. for (var i = 0; i < prototypes.length && !found; i++) {
  61. found = (prototypes[i] === "http://vwf.example.com/aframe/node.vwf");
  62. }
  63. }
  64. return found;
  65. }
  66. };
  67. this.state.kernel = this.kernel.kernel.kernel;
  68. },
  69. // == Model API ============================================================================
  70. // -- creatingNode -------------------------------------------------------------------------
  71. creatingNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
  72. childSource, childType, childIndex, childName, callback /* ( ready ) */) {
  73. // If the parent nodeID is 0, this node is attached directly to the root and is therefore either
  74. // the scene or a prototype. In either of those cases, save the uri of the new node
  75. var childURI = (nodeID === 0 ? childIndex : undefined);
  76. var appID = this.kernel.application();
  77. // If the node being created is a prototype, construct it and add it to the array of prototypes,
  78. // and then return
  79. var prototypeID = utility.ifPrototypeGetId(appID, this.state.prototypes, nodeID, childID);
  80. if (prototypeID !== undefined) {
  81. this.state.prototypes[prototypeID] = {
  82. parentID: nodeID,
  83. ID: childID,
  84. extendsID: childExtendsID,
  85. implementsID: childImplementsIDs,
  86. source: childSource,
  87. type: childType,
  88. name: childName
  89. };
  90. return;
  91. }
  92. var protos = getPrototypes(this.kernel, childExtendsID);
  93. //var kernel = this.kernel.kernel.kernel;
  94. var node;
  95. if (this.state.isAFrameComponent(protos)) {
  96. // Create the local copy of the node properties
  97. if (this.state.nodes[childID] === undefined) {
  98. this.state.nodes[childID] = this.state.createLocalNode(nodeID, childID, childExtendsID, childImplementsIDs,
  99. childSource, childType, childIndex, childName, callback);
  100. }
  101. node = this.state.nodes[childID];
  102. node.prototypes = protos;
  103. node.aframeObj = createAFrameObject(node);
  104. addNodeToHierarchy(node);
  105. //notifyDriverOfPrototypeAndBehaviorProps();
  106. }
  107. },
  108. // -- initializingProperty -----------------------------------------------------------------
  109. initializingProperty: function (nodeID, propertyName, propertyValue) {
  110. var value = undefined;
  111. var node = this.state.nodes[nodeID];
  112. if (node !== undefined) {
  113. value = this.settingProperty(nodeID, propertyName, propertyValue);
  114. }
  115. return value;
  116. },
  117. // -- creatingProperty ---------------------------------------------------------------------
  118. creatingProperty: function (nodeID, propertyName, propertyValue) {
  119. return this.initializingProperty(nodeID, propertyName, propertyValue);
  120. },
  121. // -- deletingNode -------------------------------------------------------------------------
  122. //deletingNode: function( nodeID ) {
  123. //},
  124. // -- settingProperty ----------------------------------------------------------------------
  125. settingProperty: function (nodeID, propertyName, propertyValue) {
  126. var node = this.state.nodes[nodeID];
  127. var value = undefined;
  128. if (node && node.aframeObj && utility.validObject(propertyValue)) {
  129. var aframeObject = node.aframeObj;
  130. if (isNodeDefinition(node.prototypes)) {
  131. // 'id' will be set to the nodeID
  132. value = propertyValue;
  133. switch (propertyName) {
  134. default:
  135. value = undefined;
  136. break;
  137. }
  138. }
  139. if ( value === undefined && isAEntityDefinition( node.prototypes ) ) {
  140. value = propertyValue;
  141. switch ( propertyName ) {
  142. case "position":
  143. aframeObject.setAttribute('position', { x: propertyValue[0], y: propertyValue[1], z: propertyValue[2] });
  144. break;
  145. case "rotation":
  146. aframeObject.setAttribute('rotation', { x: propertyValue[0], y: propertyValue[1], z: propertyValue[2] });
  147. break;
  148. case "scale":
  149. aframeObject.setAttribute('scale', { x: propertyValue[0], y: propertyValue[1], z: propertyValue[2] });
  150. break;
  151. case "color":
  152. aframeObject.setAttribute('color', propertyValue);
  153. break;
  154. case "fog":
  155. aframeObject.setAttribute('material','fog', propertyValue);
  156. break;
  157. case "wireframe":
  158. aframeObject.setAttribute('wireframe', propertyValue);
  159. break;
  160. case "wireframe-linewidth":
  161. aframeObject.setAttribute('wireframeLinewidth', propertyValue);
  162. break;
  163. // case "clickable":
  164. // value = propertyValue;
  165. // break;
  166. // case "clickable":
  167. // if (propertyValue) {
  168. // aframeObject.addEventListener('click', function (evt) {
  169. // vwf_view.kernel.fireEvent(node.ID, "clickEvent");
  170. // });
  171. // }
  172. // break;
  173. case "src":
  174. aframeObject.setAttribute('src', propertyValue);
  175. break;
  176. case "repeat":
  177. aframeObject.setAttribute('repeat', propertyValue);
  178. break;
  179. default:
  180. value = undefined;
  181. break;
  182. }
  183. }
  184. if ( value === undefined && aframeObject.nodeName == "A-TEXT" ) {
  185. value = propertyValue;
  186. switch ( propertyName ) {
  187. case "value":
  188. aframeObject.setAttribute('value', propertyValue);
  189. break;
  190. case "color":
  191. aframeObject.setAttribute('color', propertyValue);
  192. break;
  193. default:
  194. value = undefined;
  195. break;
  196. }
  197. }
  198. if ( value === undefined && aframeObject.nodeName == "A-SCENE" ) {
  199. value = propertyValue;
  200. switch ( propertyName ) {
  201. case "fog":
  202. aframeObject.setAttribute('fog', propertyValue);
  203. break;
  204. case "assets":
  205. var assetsElement = document.createElement('a-assets');
  206. aframeObject.appendChild(assetsElement);
  207. if (propertyValue) {
  208. httpGetJson(propertyValue).then(function (response) {
  209. console.log(JSON.parse(response));
  210. let assets = JSON.parse(response);
  211. for (var prop in assets) {
  212. var elm = document.createElement(assets[prop].tag);
  213. elm.setAttribute('id', prop);
  214. elm.setAttribute('src', assets[prop].src);
  215. assetsElement.appendChild(elm);
  216. }
  217. }).catch(function (error) {
  218. console.log(error);
  219. });
  220. }
  221. break;
  222. default:
  223. value = undefined;
  224. break;
  225. }
  226. }
  227. if ( value === undefined && aframeObject.nodeName == "A-BOX") {
  228. value = propertyValue;
  229. switch ( propertyName ) {
  230. case "depth":
  231. aframeObject.setAttribute('depth', propertyValue);
  232. break;
  233. case "height":
  234. aframeObject.setAttribute('height', propertyValue);
  235. break;
  236. case "width":
  237. aframeObject.setAttribute('width', propertyValue);
  238. break;
  239. default:
  240. value = undefined;
  241. break;
  242. }
  243. }
  244. if ( value === undefined && aframeObject.nodeName == "A-LIGHT" ) {
  245. value = propertyValue;
  246. switch ( propertyName ) {
  247. //"angle", "color", "decay", "distance", "ground-color", "intensity", "penumbra", "type", "target"
  248. case "color":
  249. aframeObject.setAttribute('color', propertyValue);
  250. break;
  251. case "type":
  252. aframeObject.setAttribute('type', propertyValue);
  253. break;
  254. case "intensity":
  255. aframeObject.setAttribute('intensity', propertyValue);
  256. break;
  257. case "distance":
  258. aframeObject.setAttribute('distance', propertyValue);
  259. break;
  260. default:
  261. value = undefined;
  262. break;
  263. }
  264. }
  265. if ( value === undefined && aframeObject.nodeName == "A-COLLADA-MODEL") {
  266. value = propertyValue;
  267. switch ( propertyName ) {
  268. case "src":
  269. aframeObject.setAttribute('src', propertyValue);
  270. break;
  271. default:
  272. value = undefined;
  273. break;
  274. }
  275. }
  276. if ( value === undefined && aframeObject.nodeName == "A-PLANE") {
  277. value = propertyValue;
  278. switch ( propertyName ) {
  279. case "height":
  280. aframeObject.setAttribute('height', propertyValue);
  281. break;
  282. case "width":
  283. aframeObject.setAttribute('width', propertyValue);
  284. break;
  285. default:
  286. value = undefined;
  287. break;
  288. }
  289. }
  290. if (value === undefined && aframeObject.nodeName == "A-SPHERE") {
  291. value = propertyValue;
  292. switch (propertyName) {
  293. case "radius":
  294. aframeObject.setAttribute('radius', propertyValue);
  295. break;
  296. default:
  297. value = undefined;
  298. break;
  299. }
  300. }
  301. if (value === undefined && aframeObject.nodeName == "A-CAMERA") {
  302. value = propertyValue;
  303. switch (propertyName) {
  304. case "look-controls-enabled":
  305. aframeObject.setAttribute('look-controls', 'enabled', propertyValue);
  306. break;
  307. case "forAvatar":
  308. if (propertyValue) {
  309. aframeObject.addEventListener('componentchanged', function (evt) {
  310. if (evt.detail.name === 'position') {
  311. self.kernel.fireEvent(node.ID, "setAvatarPosition", evt.detail.newData);
  312. }
  313. if (evt.detail.name === 'rotation') {
  314. self.kernel.fireEvent(node.ID, "setAvatarRotation", evt.detail.newData);
  315. //console.log('Entity has moved from', evt.detail.oldData, 'to', evt.detail.newData, '!');
  316. }
  317. });
  318. }
  319. break;
  320. default:
  321. value = undefined;
  322. break;
  323. }
  324. }
  325. //if (!aframeObject) return value;
  326. //if (propertyValue !== undefined) {
  327. //self = this;
  328. }
  329. return value;
  330. },
  331. // -- gettingProperty ----------------------------------------------------------------------
  332. gettingProperty: function (nodeID, propertyName, propertyValue) {
  333. var node = this.state.nodes[nodeID];
  334. var value = undefined;
  335. if (node && node.aframeObj) {
  336. var aframeObject = node.aframeObj;
  337. if (isNodeDefinition(node.prototypes)) {
  338. switch ( propertyName ) {
  339. }
  340. }
  341. if ( value === undefined && isAEntityDefinition( node.prototypes ) ) {
  342. switch ( propertyName ) {
  343. case "position":
  344. var pos = aframeObject.getAttribute('position');
  345. if ( pos !== undefined ){
  346. value = [pos.x, pos.y, pos.z];
  347. }
  348. break;
  349. case "scale":
  350. var scale = aframeObject.getAttribute('scale');
  351. if ( scale !== undefined ){
  352. value = [scale.x, scale.y, scale.z];
  353. }
  354. break;
  355. case "rotation":
  356. var rot = aframeObject.getAttribute('rotation');
  357. if ( rot !== undefined ){
  358. value = [rot.x, rot.y, rot.z];
  359. }
  360. break;
  361. case "color":
  362. value = aframeObject.getAttribute('color');
  363. break;
  364. case "fog":
  365. if (aframeObject.getAttribute('material')){
  366. value = aframeObject.getAttribute('material').fog;
  367. }
  368. break;
  369. case "wireframe":
  370. value = aframeObject.getAttribute('wireframe');
  371. break;
  372. case "wireframe-linewidth":
  373. value = aframeObject.getAttribute('wireframeLinewidth');
  374. break;
  375. // case "clickable":
  376. // value = propertyValue;
  377. // break;
  378. case "src":
  379. value = aframeObject.getAttribute('src');
  380. break;
  381. case "repeat":
  382. value = aframeObject.getAttribute('repeat');
  383. }
  384. }
  385. if ( value === undefined && aframeObject.nodeName == "A-SCENE" ) {
  386. switch ( propertyName ) {
  387. case "fog":
  388. value = aframeObject.getAttribute('fog');
  389. break;
  390. }
  391. }
  392. if ( value === undefined && aframeObject.nodeName == "A-BOX" ) {
  393. switch ( propertyName ) {
  394. case "depth":
  395. value = aframeObject.getAttribute('depth');
  396. break;
  397. case "height":
  398. value = aframeObject.getAttribute('height');
  399. break;
  400. case "width":
  401. value = aframeObject.getAttribute('width');
  402. break;
  403. }
  404. }
  405. if ( value === undefined && aframeObject.nodeName == "A-LIGHT" ) {
  406. //"angle", "color", "decay", "distance", "ground-color", "intensity", "penumbra", "type", "target"
  407. switch (propertyName) {
  408. case "color":
  409. value = aframeObject.getAttribute('color');
  410. break;
  411. case "type":
  412. value = aframeObject.getAttribute('type');
  413. break;
  414. case "distance":
  415. value = aframeObject.getAttribute('distance');
  416. break;
  417. case "intensity":
  418. value = aframeObject.getAttribute('intensity');
  419. break;
  420. }
  421. }
  422. if ( value === undefined && aframeObject.nodeName == "A-PLANE" ) {
  423. switch (propertyName) {
  424. case "height":
  425. value = aframeObject.getAttribute('height');
  426. break;
  427. case "width":
  428. value = aframeObject.getAttribute('width');
  429. break;
  430. }
  431. }
  432. if ( value === undefined && aframeObject.nodeName == "A-SPHERE" ) {
  433. switch (propertyName) {
  434. case "radius":
  435. value = aframeObject.getAttribute('radius');
  436. break;
  437. }
  438. }
  439. if ( value === undefined && aframeObject.nodeName == "A-TEXT" ) {
  440. switch (propertyName) {
  441. case "value":
  442. value = aframeObject.getAttribute('value');
  443. break;
  444. case "color":
  445. value = aframeObject.getAttribute('color');
  446. break;
  447. }
  448. }
  449. if ( value === undefined && aframeObject.nodeName == "A-CAMERA" ) {
  450. switch (propertyName) {
  451. case "look-controls-enabled":
  452. value = aframeObject.getAttribute('look-controls').enabled;
  453. break;
  454. }
  455. }
  456. if ( value === undefined && aframeObject.nodeName == "A-COLLADA-MODEL" ) {
  457. switch (propertyName) {
  458. case "src":
  459. value = aframeObject.getAttribute('src');
  460. break;
  461. }
  462. }
  463. }
  464. if ( value !== undefined ) {
  465. propertyValue = value;
  466. }
  467. return value;
  468. }
  469. });
  470. function createAFrameObject(node, config) {
  471. var protos = node.prototypes;
  472. var aframeObj = undefined;
  473. if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/ascene.vwf")) {
  474. aframeObj = document.createElement('a-scene');
  475. self.state.scenes[node.ID] = aframeObj;
  476. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acamera.vwf")) {
  477. aframeObj = document.createElement('a-camera');
  478. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/alight.vwf")) {
  479. aframeObj = document.createElement('a-light');
  480. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acursor.vwf")) {
  481. aframeObj = document.createElement('a-cursor');
  482. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/asky.vwf")) {
  483. aframeObj = document.createElement('a-sky');
  484. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/abox.vwf")) {
  485. aframeObj = document.createElement('a-box');
  486. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aplane.vwf")) {
  487. aframeObj = document.createElement('a-plane');
  488. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/atext.vwf")) {
  489. aframeObj = document.createElement('a-text');
  490. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acolladamodel.vwf")) {
  491. aframeObj = document.createElement('a-collada-model');
  492. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/asphere.vwf")) {
  493. aframeObj = document.createElement('a-sphere');
  494. } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aentity.vwf")) {
  495. aframeObj = document.createElement('a-entity');
  496. }
  497. return aframeObj;
  498. }
  499. function addNodeToHierarchy(node) {
  500. if (node.aframeObj) {
  501. if (self.state.nodes[node.parentID] !== undefined) {
  502. var parent = self.state.nodes[node.parentID];
  503. if (parent.aframeObj) {
  504. if (parent.children === undefined) {
  505. parent.children = [];
  506. }
  507. parent.children.push(node.ID);
  508. //console.info( "Adding child: " + childID + " to " + nodeID );
  509. parent.aframeObj.appendChild(node.aframeObj);
  510. }
  511. }
  512. if (node.aframeObj.nodeName !== "A-SCENE") {
  513. node.scene = self.state.scenes[self.kernel.application()];
  514. }
  515. }
  516. }
  517. function getPrototypes(kernel, extendsID) {
  518. var prototypes = [];
  519. var id = extendsID;
  520. while (id !== undefined) {
  521. prototypes.push(id);
  522. id = kernel.prototype(id);
  523. }
  524. return prototypes;
  525. }
  526. function isNodeDefinition(prototypes) {
  527. var found = false;
  528. if (prototypes) {
  529. for (var i = 0; i < prototypes.length && !found; i++) {
  530. found = (prototypes[i] == "http://vwf.example.com/aframe/node.vwf");
  531. }
  532. }
  533. return found;
  534. }
  535. function isAEntityDefinition( prototypes ) {
  536. var found = false;
  537. if ( prototypes ) {
  538. for ( var i = 0; i < prototypes.length && !found; i++ ) {
  539. found = ( prototypes[i] == "http://vwf.example.com/aframe/aentity.vwf" );
  540. }
  541. }
  542. return found;
  543. }
  544. // Changing this function significantly from the GLGE code
  545. // Will search hierarchy down until encountering a matching child
  546. // Will look into nodes that don't match.... this might not be desirable
  547. function FindChildByName(obj, childName, childType, recursive) {
  548. var child = undefined;
  549. if (recursive) {
  550. // TODO: If the obj itself has the child name, the object will be returned by this function
  551. // I don't think this this desirable.
  552. if (nameTest.call(this, obj, childName)) {
  553. child = obj;
  554. } else if (obj.children && obj.children.length > 0) {
  555. for (var i = 0; i < obj.children.length && child === undefined; i++) {
  556. child = FindChildByName(obj.children[i], childName, childType, true);
  557. }
  558. }
  559. } else {
  560. if (obj.children) {
  561. for (var i = 0; i < obj.children.length && child === undefined; i++) {
  562. if (nameTest.call(this, obj.children[i], childName)) {
  563. child = obj.children[i];
  564. }
  565. }
  566. }
  567. }
  568. return child;
  569. }
  570. function nameTest(obj, name) {
  571. if (obj.name == "") {
  572. return (obj.parent.name + "Child" == name);
  573. } else {
  574. return (obj.name == name || obj.id == name || obj.vwfID == name);
  575. }
  576. }
  577. function httpGet(url) {
  578. return new Promise(function (resolve, reject) {
  579. // do the usual Http request
  580. let request = new XMLHttpRequest();
  581. request.open('GET', url);
  582. request.onload = function () {
  583. if (request.status == 200) {
  584. resolve(request.response);
  585. } else {
  586. reject(Error(request.statusText));
  587. }
  588. };
  589. request.onerror = function () {
  590. reject(Error('Network Error'));
  591. };
  592. request.send();
  593. });
  594. }
  595. async function httpGetJson(url) {
  596. // check if the URL looks like a JSON file and call httpGet.
  597. let regex = /\.(json)$/i;
  598. if (regex.test(url)) {
  599. // call the async function, wait for the result
  600. return await httpGet(url);
  601. } else {
  602. throw Error('Bad Url Format');
  603. }
  604. }
  605. });