avatar.js 15 KB

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