avatar.js 12 KB

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