avatar.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. this.simpleBodyDef = {
  2. "extends": "http://vwf.example.com/aframe/abox.vwf",
  3. "properties": {
  4. "color": "white",
  5. "position": "0 0.66 0",
  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",
  45. "visible": true
  46. },
  47. children: {
  48. "interpolation":
  49. {
  50. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  51. "type": "component",
  52. "properties": {
  53. "enabled": true,
  54. "duration": 50,
  55. "deltaPos": 0,
  56. "deltaRot": 0
  57. }
  58. },
  59. "visual": {
  60. "extends": "http://vwf.example.com/aframe/abox.vwf",
  61. "properties": {
  62. "color": myColor,
  63. "height": 0.5,
  64. "width": 0.5,
  65. "depth": 0.1,
  66. "visible": true
  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",
  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. "vis": {
  87. "extends": "http://vwf.example.com/aframe/abox.vwf",
  88. "properties": {
  89. "color": myColor,
  90. "position": "0 0 -3",
  91. "height": 0.05,
  92. "width": 0.05,
  93. "depth": 0.01,
  94. "visible": true
  95. }
  96. },
  97. "line": {
  98. "extends": "http://vwf.example.com/aframe/lineComponent.vwf",
  99. "type": "component",
  100. "properties": {
  101. "start": "0 0 -1",
  102. "end": "0 0 -3",
  103. "color": myColor
  104. }
  105. },
  106. // "realCursor":{
  107. // "extends": "http://vwf.example.com/aframe/acursor.vwf",
  108. // "properties": {
  109. // visible: false
  110. // },
  111. // "children": {
  112. // "raycaster": {
  113. // "extends": "http://vwf.example.com/aframe/raycasterComponent.vwf",
  114. // "type": "component",
  115. // "properties": {
  116. // //recursive: false,
  117. // //interval: 1000,
  118. // far: 100,
  119. // //objects: ".intersectable"
  120. // }
  121. // }
  122. // }
  123. // },
  124. "myRayCaster": {
  125. "extends": "http://vwf.example.com/aframe/aentity.vwf",
  126. "properties": {},
  127. "children": {
  128. "raycaster": {
  129. "extends": "http://vwf.example.com/aframe/raycasterComponent.vwf",
  130. "type": "component",
  131. "properties": {
  132. recursive: false,
  133. interval: 1000,
  134. far: 3,
  135. objects: ".intersectable"
  136. }
  137. }
  138. }
  139. },
  140. // "raycaster-listener": {
  141. // "extends": "http://vwf.example.com/aframe/app-raycaster-listener-component.vwf",
  142. // "type": "component"
  143. // }
  144. }
  145. }
  146. }
  147. },
  148. "myName": {
  149. "extends": "http://vwf.example.com/aframe/atext.vwf",
  150. "properties": {
  151. "color": myColor,
  152. "value": this.id,
  153. "side": "double",
  154. "rotation": "0 180 0",
  155. "position": "0.3 2.05 0.5"
  156. }
  157. }
  158. }
  159. }
  160. if (modelSrc) {
  161. let myBodyDef = this.modelBodyDef;
  162. myBodyDef.properties.src = modelSrc;
  163. newNode.children.myBody = myBodyDef;
  164. newNode.children.myHead.children.visual.properties.visible = false;
  165. newNode.children.myHead.children.myCursor.properties.visible = true;
  166. }
  167. //let cursor =
  168. //{
  169. // "id": 'cursor-' + this.id,
  170. // "extends": "http://vwf.example.com/aframe/acursor.vwf",
  171. //}
  172. let interpolation = {
  173. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  174. "type": "component",
  175. "properties": {
  176. "enabled": true,
  177. "duration": 50,
  178. "deltaPos": 0,
  179. "deltaRot": 0
  180. }
  181. }
  182. this.children.create( "interpolation", interpolation );
  183. //this.children.create( "myCursor", myCursor );
  184. //this.children.create( "avatarCamera", camera );
  185. // this.children.create( "avatarNameNode", avatarNameNode );
  186. this.children.create("avatarNode", newNode);
  187. // this.children.create("avatarNode", newNode);
  188. // this.children.create( "avatarBodyModel", newNodeModel );
  189. //this.interpolation = "50ms";
  190. //vwf_view.kernel.createChild(this.id, "avatarCursor", cursorVis);
  191. }
  192. this.getRandomColor = function () {
  193. var letters = '0123456789ABCDEF';
  194. var color = '#';
  195. for (var i = 0; i < 6; i++) {
  196. color += letters[Math.floor(this.random() * 16)];
  197. }
  198. return color;
  199. }
  200. this.followAvatarControl = function (position, rotation) {
  201. // this.position = AFRAME.utils.coordinates.stringify(position);
  202. // this.rotation = AFRAME.utils.coordinates.stringify(rotation);
  203. this.position = AFRAME.utils.coordinates.stringify(position);
  204. let myRot = AFRAME.utils.coordinates.parse(this.rotation);
  205. let myHeadRot = AFRAME.utils.coordinates.parse(this.avatarNode.myHead.rotation);
  206. let myBodyRot = AFRAME.utils.coordinates.parse(this.avatarNode.myBody.rotation);
  207. this.rotation = [myRot.x, rotation.y, myRot.z];
  208. // let myRot = this.avatarBodyModel.rotation;
  209. // this.avatarBodyModel.rotation = [myRot.x, -rotation.y, myRot.z];
  210. //this.avatarBody.rotation = [rotation.x, myRot.y, rotation.z];
  211. //this.avatarNameNode.rotation = [myRot.x, myRot.y, rotation.z];
  212. this.avatarNode.myHead.rotation = [rotation.x, myHeadRot.y, rotation.z];
  213. // this.avatarNode.myCursor.rotation = [rotation.x, myHeadRot.y, rotation.z];
  214. // this.avatarCamera.rotation = [rotation.x, myHeadRot.y, rotation.z];
  215. }
  216. this.createSimpleAvatar = function(){
  217. if (this.avatarNode.myBody) {
  218. this.avatarNode.children.delete(this.avatarNode.myBody);
  219. var myColor = this.getRandomColor();
  220. if (this.avatarNode.myHead){
  221. myColor = this.avatarNode.myHead.visual.properties.color;
  222. }
  223. let myBodyDef = this.simpleBodyDef;
  224. myBodyDef.properties.color = myColor;
  225. this.avatarNode.children.create("myBody", myBodyDef);
  226. this.avatarNode.myHead.visual.properties.visible = true;
  227. }
  228. }
  229. this.createAvatarFromGLTF = function(modelSrc){
  230. if (this.avatarNode.myBody) {
  231. this.avatarNode.children.delete(this.avatarNode.myBody);
  232. let myBodyDef = this.modelBodyDef;
  233. myBodyDef.properties.src = modelSrc;
  234. this.avatarNode.children.create("myBody", myBodyDef);
  235. this.avatarNode.myHead.visual.properties.visible = false;
  236. this.avatarNode.myHead.myCursor.properties.visible = true;
  237. }
  238. }
  239. this.showHideCursor = function(bool){
  240. this.avatarNode.myHead.myCursor.properties.visible = bool;
  241. }