avatar.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. this.simpleBodyDef = {
  2. "extends": "http://vwf.example.com/aframe/abox.vwf",
  3. "properties": {
  4. "color": "white",
  5. "position": "0 0.66 0.5",
  6. "height": 1.3,
  7. "width": 0.65,
  8. "depth": 0.1,
  9. }
  10. }
  11. this.modelBodyDef = {
  12. "extends": "http://vwf.example.com/aframe/agltfmodel.vwf",
  13. "properties": {
  14. "src": "#avatar",
  15. "position": "0 0 0.5",
  16. "rotation": "0 180 0"
  17. },
  18. "children": {
  19. "animation-mixer": {
  20. "extends": "http://vwf.example.com/aframe/anim-mixer-component.vwf",
  21. "properties": {
  22. "clip": "*",
  23. "duration": 1
  24. }
  25. }
  26. }
  27. }
  28. this.createAvatarBody = function (modelSrc) {
  29. let avatarControl = document.querySelector('#avatarControl');
  30. let userHeight = avatarControl.getAttribute('camera').userHeight;
  31. let myColor = this.getRandomColor();
  32. let myBodyDef = this.simpleBodyDef;
  33. myBodyDef.properties.color = myColor;
  34. var newNode = {
  35. "extends": "http://vwf.example.com/aframe/aentity.vwf",
  36. "properties": {
  37. position: [0, -userHeight, 0]
  38. },
  39. children: {
  40. "myBody": myBodyDef,
  41. "myHead": {
  42. "extends": "http://vwf.example.com/aframe/aentity.vwf",
  43. "properties": {
  44. "position": "0 1.6 0.5",
  45. "visible": true
  46. },
  47. children: {
  48. "visual": {
  49. "extends": "http://vwf.example.com/aframe/abox.vwf",
  50. "properties": {
  51. "color": myColor,
  52. "height": 0.5,
  53. "width": 0.5,
  54. "depth": 0.1,
  55. "visible": true
  56. }
  57. },
  58. "interpolation":
  59. {
  60. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  61. "type": "component",
  62. "properties": {
  63. "enabled": true,
  64. "duration": 50,
  65. "deltaPos": 0,
  66. "deltaRot": 0
  67. }
  68. },
  69. "myCamera":
  70. {
  71. "id": 'camera-' + this.id,
  72. "extends": "http://vwf.example.com/aframe/acamera.vwf",
  73. "properties": {
  74. "position": "0 0 -0.5",
  75. "look-controls-enabled": false,
  76. "wasd-controls": false,
  77. "userHeight": 0,
  78. }
  79. },
  80. "myCursor":
  81. {
  82. "id": 'myCursor-' + this.id,
  83. "extends": "http://vwf.example.com/aframe/aentity.vwf",
  84. "properties": {},
  85. "children": {
  86. "line": {
  87. "extends": "http://vwf.example.com/aframe/lineComponent.vwf",
  88. "type": "component",
  89. "properties": {
  90. "start": "0 0 -1",
  91. "end": "0 0 -3",
  92. "color": myColor
  93. }
  94. },
  95. // "realCursor":{
  96. // "extends": "http://vwf.example.com/aframe/acursor.vwf",
  97. // "properties": {
  98. // visible: false
  99. // },
  100. // "children": {
  101. // "raycaster": {
  102. // "extends": "http://vwf.example.com/aframe/raycasterComponent.vwf",
  103. // "type": "component",
  104. // "properties": {
  105. // //recursive: false,
  106. // //interval: 1000,
  107. // far: 100,
  108. // //objects: ".intersectable"
  109. // }
  110. // }
  111. // }
  112. // },
  113. "myRayCaster": {
  114. "extends": "http://vwf.example.com/aframe/aentity.vwf",
  115. "properties": {},
  116. "children": {
  117. "raycaster": {
  118. "extends": "http://vwf.example.com/aframe/raycasterComponent.vwf",
  119. "type": "component",
  120. "properties": {
  121. recursive: false,
  122. interval: 1000,
  123. far: 3,
  124. objects: ".intersectable"
  125. }
  126. }
  127. }
  128. },
  129. // "raycaster-listener": {
  130. // "extends": "http://vwf.example.com/aframe/app-raycaster-listener-component.vwf",
  131. // "type": "component"
  132. // }
  133. }
  134. }
  135. }
  136. },
  137. "myName": {
  138. "extends": "http://vwf.example.com/aframe/atext.vwf",
  139. "properties": {
  140. "color": myColor,
  141. "value": this.id,
  142. "side": "double",
  143. "rotation": "0 180 0",
  144. "position": "0.3 2.05 0.5"
  145. }
  146. }
  147. }
  148. }
  149. if (modelSrc) {
  150. let myBodyDef = this.modelBodyDef;
  151. myBodyDef.properties.src = modelSrc;
  152. newNode.children.myBody = myBodyDef;
  153. newNode.children.myHead.children.visual.properties.visible = false;
  154. newNode.children.myHead.children.myCursor.properties.visible = true;
  155. }
  156. //let cursor =
  157. //{
  158. // "id": 'cursor-' + this.id,
  159. // "extends": "http://vwf.example.com/aframe/acursor.vwf",
  160. //}
  161. let interpolation = {
  162. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  163. "type": "component",
  164. "properties": {
  165. "enabled": true,
  166. "duration": 50,
  167. "deltaPos": 0,
  168. "deltaRot": 0
  169. }
  170. }
  171. this.children.create( "interpolation", interpolation );
  172. //this.children.create( "myCursor", myCursor );
  173. //this.children.create( "avatarCamera", camera );
  174. // this.children.create( "avatarNameNode", avatarNameNode );
  175. this.children.create("avatarNode", newNode);
  176. // this.children.create("avatarNode", newNode);
  177. // this.children.create( "avatarBodyModel", newNodeModel );
  178. //this.interpolation = "50ms";
  179. //vwf_view.kernel.createChild(this.id, "avatarCursor", cursorVis);
  180. }
  181. this.getRandomColor = function () {
  182. var letters = '0123456789ABCDEF';
  183. var color = '#';
  184. for (var i = 0; i < 6; i++) {
  185. color += letters[Math.floor(this.random() * 16)];
  186. }
  187. return color;
  188. }
  189. this.followAvatarControl = function (position, rotation) {
  190. // this.position = AFRAME.utils.coordinates.stringify(position);
  191. // this.rotation = AFRAME.utils.coordinates.stringify(rotation);
  192. this.position = AFRAME.utils.coordinates.stringify(position);
  193. let myRot = AFRAME.utils.coordinates.parse(this.rotation);
  194. let myHeadRot = AFRAME.utils.coordinates.parse(this.avatarNode.myHead.rotation);
  195. let myBodyRot = AFRAME.utils.coordinates.parse(this.avatarNode.myBody.rotation);
  196. this.rotation = [myRot.x, rotation.y, myRot.z];
  197. // let myRot = this.avatarBodyModel.rotation;
  198. // this.avatarBodyModel.rotation = [myRot.x, -rotation.y, myRot.z];
  199. //this.avatarBody.rotation = [rotation.x, myRot.y, rotation.z];
  200. //this.avatarNameNode.rotation = [myRot.x, myRot.y, rotation.z];
  201. this.avatarNode.myHead.rotation = [rotation.x, myHeadRot.y, rotation.z];
  202. // this.avatarNode.myCursor.rotation = [rotation.x, myHeadRot.y, rotation.z];
  203. // this.avatarCamera.rotation = [rotation.x, myHeadRot.y, rotation.z];
  204. }
  205. this.createSimpleAvatar = function(){
  206. if (this.avatarNode.myBody) {
  207. this.avatarNode.children.delete(this.avatarNode.myBody);
  208. var myColor = this.getRandomColor();
  209. if (this.avatarNode.myHead){
  210. myColor = this.avatarNode.myHead.visual.properties.color;
  211. }
  212. let myBodyDef = this.simpleBodyDef;
  213. myBodyDef.properties.color = myColor;
  214. this.avatarNode.children.create("myBody", myBodyDef);
  215. this.avatarNode.myHead.visual.properties.visible = true;
  216. }
  217. }
  218. this.createAvatarFromGLTF = function(modelSrc){
  219. if (this.avatarNode.myBody) {
  220. this.avatarNode.children.delete(this.avatarNode.myBody);
  221. let myBodyDef = this.modelBodyDef;
  222. myBodyDef.properties.src = modelSrc;
  223. this.avatarNode.children.create("myBody", myBodyDef);
  224. this.avatarNode.myHead.visual.properties.visible = false;
  225. this.avatarNode.myHead.myCursor.properties.visible = true;
  226. }
  227. }
  228. this.showHideCursor = function(bool){
  229. this.avatarNode.myHead.myCursor.properties.visible = bool;
  230. }