avatar.js 13 KB

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