aframe.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. "use strict";
  2. // VWF & A-Frame view 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/view/lesson creates a view interface for instruction text.
  18. ///
  19. /// @module vwf/view/aframe
  20. /// @requires vwf/view
  21. define(["module", "vwf/view"], function (module, view) {
  22. var self;
  23. return view.load(module, {
  24. // == Module Definition ====================================================================
  25. initialize: function (options) {
  26. self = this;
  27. this.nodes = {};
  28. this.state.appInitialized = false;
  29. if (typeof options == "object") {
  30. this.rootSelector = options["application-root"];
  31. }
  32. else {
  33. this.rootSelector = options;
  34. }
  35. },
  36. createdNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
  37. childSource, childType, childIndex, childName, callback /* ( ready ) */) {
  38. var node = this.state.nodes[childID];
  39. // If the "nodes" object does not have this object in it, it must not be one that
  40. // this driver cares about
  41. if (!node) {
  42. return;
  43. }
  44. if (this.state.scenes[childID]) {
  45. let scene = this.state.scenes[childID];
  46. document.body.append(scene);
  47. createAvatarControl(scene);
  48. createAvatar.call(this, childID);
  49. // this.state.appInitialized = true;
  50. }
  51. if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj) {
  52. this.nodes[childID] = {id:childID,extends:childExtendsID};
  53. }
  54. // if(this.state.nodes[childID]) {
  55. // this.nodes[childID] = {id:childID,extends:childExtendsID};
  56. // }
  57. // else if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj.object3D instanceof THREE.Object3D) {
  58. // this.nodes[childID] = {id:childID,extends:childExtendsID};
  59. // }
  60. },
  61. initializedNode: function( nodeID, childID ) {
  62. var node = this.state.nodes[childID];
  63. if (!node) {
  64. return;
  65. }
  66. },
  67. createdProperty: function (nodeId, propertyName, propertyValue) {
  68. return this.satProperty(nodeId, propertyName, propertyValue);
  69. },
  70. initializedProperty: function (nodeId, propertyName, propertyValue) {
  71. return this.satProperty(nodeId, propertyName, propertyValue);
  72. },
  73. satProperty: function (nodeId, propertyName, propertyValue) {
  74. var selfs = this;
  75. var node = this.state.nodes[ nodeId ];
  76. if ( !( node && node.aframeObj ) ) {
  77. return;
  78. }
  79. var aframeObject = node.aframeObj;
  80. switch (propertyName) {
  81. case "clickable":
  82. if (propertyValue) {
  83. aframeObject.addEventListener('click', function (evt) {
  84. let cursorID = 'cursor-avatar-'+selfs.kernel.moniker();
  85. if (evt.detail.cursorEl.id == cursorID) {
  86. vwf_view.kernel.fireEvent(nodeId, "clickEvent")
  87. }
  88. });
  89. }
  90. break;
  91. }
  92. },
  93. firedEvent: function (nodeID, eventName, eventParameters) {
  94. //var avatarID = vwf_view.kernel.find("", avatarName)
  95. var avatarName = 'avatar-' + self.kernel.moniker();
  96. if (eventName == "createAvatar") {
  97. console.log("!!!!");
  98. let avatarID = self.kernel.moniker();
  99. var nodeName = 'avatar-' + avatarID;
  100. var newNode = {
  101. "id": avatarName,
  102. "uri": avatarName,
  103. "extends": "http://vwf.example.com/aframe/avatar.vwf",
  104. "properties":{}
  105. }
  106. if (!self.state.nodes[avatarName]) {
  107. this.kernel.createChild(nodeID, avatarName, newNode, undefined, undefined);
  108. this.kernel.addChild(nodeID, avatarName, avatarName);
  109. this.kernel.callMethod(avatarName, "createAvatarBody");
  110. }
  111. }
  112. if (eventName == "setAvatarRotation") {
  113. vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
  114. }
  115. if (eventName == "setAvatarPosition") {
  116. vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
  117. }
  118. },
  119. ticked: function (vwfTime) {
  120. updateAvatarPosition();
  121. //lerpTick ()
  122. }
  123. });
  124. function updateAvatarPosition() {
  125. let avatarName = 'avatar-' + self.kernel.moniker();
  126. let el = document.querySelector('#avatarControl');
  127. if (el) {
  128. let postion = el.getAttribute('position');
  129. let rotation = el.getAttribute('rotation');
  130. if ( postion && rotation) {
  131. vwf_view.kernel.setProperty(avatarName, "position", [postion.x, postion.y, postion.z]);
  132. vwf_view.kernel.setProperty(avatarName, "rotation", [rotation.x, rotation.y, rotation.z]);
  133. }
  134. }
  135. }
  136. function createAvatarControl(aScene) {
  137. let avatarName = 'avatar-' + self.kernel.moniker();
  138. let controlEl = document.createElement('a-camera');
  139. // controlEl.setAttribute('avatar', '');
  140. controlEl.setAttribute('id', 'avatarControl');
  141. controlEl.setAttribute('wasd-controls', {});
  142. controlEl.setAttribute('look-controls', {});
  143. controlEl.setAttribute('camera', 'active', true);
  144. aScene.appendChild(controlEl);
  145. let cursorEl = document.createElement('a-cursor');
  146. cursorEl.setAttribute('id', 'cursor-'+avatarName);
  147. cursorEl.setAttribute('raycaster', {});
  148. cursorEl.setAttribute('raycaster', 'objects', '.intersectable');
  149. cursorEl.setAttribute('raycaster', 'showLine', false);
  150. // cursorEl.setAttribute('raycaster', {objects: '.intersectable', showLine: true, far: 100});
  151. // cursorEl.setAttribute('raycaster', 'showLine', true);
  152. controlEl.appendChild(cursorEl);
  153. // controlEl.addEventListener('componentchanged', function (evt) {
  154. // if (evt.detail.name === 'position') {
  155. // var eventParameters = evt.detail.newData;
  156. // vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
  157. // }
  158. // if (evt.detail.name === 'rotation') {
  159. // var eventParameters = evt.detail.newData;
  160. // vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
  161. // }
  162. // });
  163. }
  164. function createAvatar(nodeID) {
  165. vwf_view.kernel.fireEvent(nodeID, "createAvatar")
  166. // let avatarID = self.kernel.moniker();
  167. // var nodeName = 'avatar-' + avatarID;
  168. // var newNode = {
  169. // "id": nodeName,
  170. // "uri": nodeName,
  171. // "extends": "http://vwf.example.com/aframe/avatar.vwf"
  172. // }
  173. // vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  174. // vwf_view.kernel.callMethod(nodeName, "createAvatarBody");
  175. }
  176. });