avatar.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511
  1. this.simpleBodyDef = {
  2. "extends": "proxy/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": "proxy/aframe/aMaterialComponent.vwf",
  12. "type": "component",
  13. "properties":{
  14. "color": "white"
  15. }
  16. }
  17. }
  18. }
  19. this.modelBodyDef = {
  20. "extends": "proxy/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": "proxy/aframe/anim-mixer-component.vwf",
  29. "properties": {
  30. "clip": "*",
  31. "duration": 1
  32. }
  33. }
  34. }
  35. }
  36. this.findWorldAvatarCostume = function () {
  37. let scene = this.getScene();
  38. let def = scene.defaultAvatarCostume;
  39. let allChilds = this.find("//element(*,'proxy/aframe/aentity.vwf')"); //this.children
  40. let costumes = allChilds.filter(el => (el.meta == 'avatarCostume'));
  41. let avatarCostume = costumes ? costumes[0]: null;
  42. if (def || avatarCostume) {
  43. var defID;
  44. if (def) {
  45. defID = def.id;
  46. } else if (avatarCostume) {
  47. defID = avatarCostume.id;
  48. }
  49. let avatarNode = _app.helpers.getNodeDef(defID);
  50. return avatarNode
  51. }
  52. return null
  53. }
  54. this.updateYPositionForXR = function(height){
  55. if(this.avatarNode) {
  56. let position = goog.vec.Vec3.clone(this.avatarNode.position);
  57. this.avatarNode.position = [position[0], height, position[2]]
  58. }
  59. }
  60. this.createAvatarBody = function (nodeDef, modelSrc) {
  61. var userHeight = -1.6;
  62. let myColor = "white"; //this.getRandomColor();
  63. let myBodyDef = this.simpleBodyDef;
  64. //let myHandDef = this.simpleVrControllerDef;
  65. if(!this.displayName)
  66. this.displayName = 'Avatar ' + this.random().toString(36).substr(2, 9);
  67. myBodyDef.children.material.properties.color = myColor;
  68. var defaultNode = {
  69. "extends": "proxy/aframe/aentity.vwf",
  70. "properties": {
  71. "position": [0, userHeight, 0], //-userHeight
  72. "meta": "avatarCostume"
  73. },
  74. "methods": {
  75. "randomize":{
  76. "body":"let myColor = this.getRandomColor(); \n this.myName.color = myColor; \n this.myBody.material.color = myColor; \n this.myHead.visual.material.color = myColor; \n this.myHead.myCursor.vis.material.color = myColor; \n this.myHead.myCursor.line.color = myColor;"
  77. }
  78. },
  79. children: {
  80. "myBody": myBodyDef,
  81. //"myHand": myHandDef,
  82. "myHead": {
  83. "extends": "proxy/aframe/aentity.vwf",
  84. "properties": {
  85. "position": [0, 1.6, 0.7],
  86. "visible": true
  87. },
  88. children: {
  89. "interpolation":
  90. {
  91. "extends": "proxy/aframe/interpolation-component.vwf",
  92. "type": "component",
  93. "properties": {
  94. "enabled": true
  95. }
  96. },
  97. "visual": {
  98. "extends": "proxy/aframe/abox.vwf",
  99. "properties": {
  100. "height": 0.5,
  101. "width": 0.5,
  102. "depth": 0.1,
  103. "visible": true
  104. },
  105. "children": {
  106. "material": {
  107. "extends": "proxy/aframe/aMaterialComponent.vwf",
  108. "type": "component",
  109. "properties":{
  110. "color": myColor
  111. }
  112. }
  113. }
  114. },
  115. "myCamera":
  116. {
  117. //"id": 'camera-' + this.id,
  118. "extends": "proxy/aframe/acamera.vwf",
  119. "properties": {
  120. "position": [0, 0, -0.7],
  121. "look-controls-enabled": false,
  122. "wasd-controls-enabled": false,
  123. "user-height": 0
  124. }
  125. },
  126. "myCursor":
  127. {
  128. //"id": 'myCursor-' + this.id,
  129. "extends": "proxy/aframe/aentity.vwf",
  130. "properties": {},
  131. "children": {
  132. "vis": {
  133. "extends": "proxy/aframe/abox.vwf",
  134. "properties": {
  135. "position": [0, 0, -3],
  136. "height": 0.05,
  137. "width": 0.05,
  138. "depth": 0.01,
  139. "visible": true
  140. },
  141. "children": {
  142. "material": {
  143. "extends": "proxy/aframe/aMaterialComponent.vwf",
  144. "type": "component",
  145. "properties":{
  146. "color": myColor
  147. }
  148. },
  149. "aabb-collider": {
  150. "extends": "proxy/aframe/aabb-collider-component.vwf",
  151. "type": "component",
  152. "properties": {
  153. debug: false,
  154. interval: 10,
  155. objects: ".hit"
  156. }
  157. }
  158. }
  159. },
  160. "line": {
  161. "extends": "proxy/aframe/lineComponent.vwf",
  162. "type": "component",
  163. "properties": {
  164. "start": "0 0 -1",
  165. "end": "0 0 -3",
  166. "color": myColor
  167. }
  168. },
  169. // "realCursor":{
  170. // "extends": "proxy/aframe/acursor.vwf",
  171. // "properties": {
  172. // visible: false
  173. // },
  174. // "children": {
  175. // "raycaster": {
  176. // "extends": "proxy/aframe/raycasterComponent.vwf",
  177. // "type": "component",
  178. // "properties": {
  179. // //recursive: false,
  180. // //interval: 1000,
  181. // far: 100,
  182. // //objects: ".intersectable"
  183. // }
  184. // }
  185. // }
  186. // },
  187. "myRayCaster": {
  188. "extends": "proxy/aframe/aentity.vwf",
  189. "properties": {},
  190. "children": {
  191. "raycaster": {
  192. "extends": "proxy/aframe/raycasterComponent.vwf",
  193. "type": "component",
  194. "properties": {
  195. recursive: false,
  196. interval: 100,
  197. far: 3,
  198. objects: ".intersectable"
  199. }
  200. }
  201. }
  202. },
  203. // "raycaster-listener": {
  204. // "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
  205. // "type": "component"
  206. // }
  207. }
  208. }
  209. }
  210. },
  211. "myName": {
  212. "extends": "proxy/aframe/atext.vwf",
  213. "properties": {
  214. "color": myColor,
  215. "value": this.displayName,
  216. "side": "double",
  217. "rotation": [0, 180, 0],
  218. "position": [0.3, 2.05, 0.5]
  219. }
  220. }
  221. }
  222. }
  223. var newNode = Object.assign({}, defaultNode);
  224. //1. check for default user saved avatar...
  225. if (nodeDef){
  226. newNode = Object.assign({}, nodeDef);
  227. newNode.properties.position = [0, userHeight, 0];
  228. //newNode.children.myName.properties.value = this.displayName;
  229. //newNode = Object.assign(defaultNode, nodeDef);
  230. }
  231. //2. check for default avatar costume in world...
  232. // let defaultWorldCostume = this.findWorldAvatarCostume();
  233. // if(defaultWorldCostume) {
  234. // newNode = Object.assign({}, defaultWorldCostume);
  235. // newNode.properties.visible = true;
  236. // newNode.properties.position = [0, userHeight, 0];
  237. // newNode.children.myName.properties.value = this.displayName;
  238. // }
  239. //3. check for model...
  240. if (modelSrc) {
  241. let myBodyDef = this.modelBodyDef;
  242. myBodyDef.properties.src = modelSrc;
  243. newNode.children.myBody = myBodyDef;
  244. newNode.children.myHead.children.visual.properties.visible = false;
  245. newNode.children.myHead.children.myCursor.properties.visible = true;
  246. }
  247. //let cursor =
  248. //{
  249. // "id": 'cursor-' + this.id,
  250. // "extends": "proxy/aframe/acursor.vwf",
  251. //}
  252. let interpolation = {
  253. "extends": "proxy/aframe/interpolation-component.vwf",
  254. "type": "component",
  255. "properties": {
  256. "enabled": true
  257. }
  258. }
  259. this.children.create( "interpolation", interpolation );
  260. //this.children.create( "myCursor", myCursor );
  261. //this.children.create( "avatarCamera", camera );
  262. // this.children.create( "avatarNameNode", avatarNameNode );
  263. this.children.create("avatarNode", newNode, function(child){
  264. if (!nodeDef) {
  265. child.randomize();
  266. }
  267. });
  268. // this.localUrl = '';
  269. // this.remoteUrl = '';
  270. // this.displayName = this.id;
  271. // this.sharing = { audio: true, video: true };
  272. // this.children.create("avatarNode", newNode);
  273. // this.children.create( "avatarBodyModel", newNodeModel );
  274. //this.interpolation = "50ms";
  275. //vwf_view.kernel.createChild(this.id, "avatarCursor", cursorVis);
  276. }
  277. this.updateAvatarRotation = function (rotation) {
  278. let myRot = goog.vec.Vec3.clone(this.rotation);
  279. let myHeadRot = goog.vec.Vec3.clone(this.avatarNode.myHead.rotation);
  280. this.rotation = [myRot[0], rotation.y, myRot[2]];
  281. this.avatarNode.myHead.rotation = [rotation.x, myHeadRot[1], rotation.z];
  282. }
  283. this.followAvatarControl = function (position, rotation) {
  284. let myRot = goog.vec.Vec3.clone(this.rotation);
  285. let myHeadRot = goog.vec.Vec3.clone(this.avatarNode.myHead.rotation);
  286. this.rotation = [myRot[0], rotation.y, myRot[2]];
  287. this.avatarNode.myHead.rotation = [rotation.x, myHeadRot[1], rotation.z];
  288. }
  289. this.setUserAvatar = function(aName){
  290. this.displayName = aName;
  291. this.avatarNode.myName.value = aName;
  292. }
  293. this.changeCostume = function(val, restore){
  294. let userHeight = -1.6;
  295. var myNameValue = this.displayName;
  296. if (this.avatarNode) {
  297. myNameValue = this.avatarNode.children.myName.properties.value;
  298. this.children.delete(this.avatarNode);
  299. //this.children.delete(this.interpolation);
  300. }
  301. let newNode = Object.assign({}, val);
  302. newNode.properties.position = [0, userHeight, 0];
  303. newNode.properties.visible = true;
  304. newNode.properties.meta = "avatarCostume";
  305. if(!restore)
  306. newNode.children.myName.properties.value = myNameValue;
  307. this.children.create("avatarNode", newNode);
  308. }
  309. this.resetAvatar = function(){
  310. //TODO: add XR check
  311. if (this.avatarNode) {
  312. //myNameValue = this.avatarNode.children.myName.properties.value;
  313. this.children.delete(this.avatarNode);
  314. this.children.delete(this.interpolation);
  315. }
  316. this.createAvatarBody();
  317. }
  318. this.createSimpleAvatar = function(){
  319. if (this.avatarNode.myBody) {
  320. this.avatarNode.children.delete(this.avatarNode.myBody);
  321. }
  322. var myColor = this.getRandomColor();
  323. if (this.avatarNode.myHead){
  324. myColor = this.avatarNode.myHead.visual.material.color;
  325. }
  326. let myBodyDef = this.simpleBodyDef;
  327. myBodyDef.children.material.properties.color = myColor;
  328. this.avatarNode.children.create("myBody", myBodyDef);
  329. this.avatarNode.myHead.visual.properties.visible = true;
  330. }
  331. this.createAvatarFromGLTF = function(modelSrc){
  332. if (this.avatarNode.myBody) {
  333. this.avatarNode.children.delete(this.avatarNode.myBody);
  334. let myBodyDef = this.modelBodyDef;
  335. myBodyDef.properties.src = modelSrc;
  336. this.avatarNode.children.create("myBody", myBodyDef);
  337. this.avatarNode.myHead.visual.properties.visible = false;
  338. this.avatarNode.myHead.myCursor.properties.visible = true;
  339. }
  340. }
  341. this.showHideCursor = function(bool){
  342. this.avatarNode.myHead.myCursor.properties.visible = bool;
  343. }
  344. this.showHideAvatar = function(bool){
  345. this.properties.visible = bool;
  346. }
  347. this.setBigVideoHead = function(val){
  348. this.avatarNode.myHead.visual.height = 4;
  349. this.avatarNode.myHead.visual.width = 3;
  350. this.avatarNode.myBody.visible = false;
  351. }
  352. this.setSmallVideoHead = function(val){
  353. this.avatarNode.myHead.visual.height = 0.5;
  354. this.avatarNode.myHead.visual.width = 0.5;
  355. this.avatarNode.myBody.visible = true;
  356. }
  357. this.setVideoTexture = function(val){
  358. console.log(val);
  359. // this.setSmallVideoHead();
  360. this.avatarNode.myHead.visual.material.color = "white";
  361. this.avatarNode.myHead.visual.material.src = '#temp';
  362. this.avatarNode.myHead.visual.material.src = '#'+val;
  363. }
  364. this.removeVideoTexture = function(){
  365. // this.setSmallVideoHead();
  366. this.avatarNode.myHead.visual.material.color = this.avatarNode.myBody.material.color;
  367. this.avatarNode.myHead.visual.material.src = "";
  368. // this.avatarNode.myHead.visual.src = '#'+val;
  369. }
  370. this.removeSoundWebRTC = function(){
  371. if (this.avatarNode.audio)
  372. this.avatarNode.children.delete(this.avatarNode.audio);
  373. }
  374. this.setSoundWebRTC = function(val){
  375. console.log(val);
  376. if (this.avatarNode.audio) this.removeSoundWebRTC();
  377. var soundNode = {
  378. "extends": "proxy/aframe/aentity.vwf",
  379. "properties": {
  380. },
  381. "children":{
  382. "streamsound":{
  383. "extends": "proxy/aframe/streamSoundComponent.vwf",
  384. "type": "component",
  385. "properties": {
  386. }
  387. }
  388. }
  389. }
  390. this.avatarNode.children.create("audio", soundNode );
  391. // this.setSmallVideoHead();
  392. //this.avatarNode.audio.src = '#tempAudio';
  393. //this.avatarNode.audio.src = '#'+val;
  394. }
  395. this.webrtcTurnOnOff = function(val){
  396. console.log('WEBRTC is ', val);
  397. }
  398. this.webrtcMuteAudio = function(val){
  399. console.log('WEBRTC Audio is ', val);
  400. }
  401. this.webrtcMuteVideo = function(val){
  402. console.log('WEBRTC Video is ', val);
  403. }
  404. this.initialize = function() {
  405. // this.future(0).updateAvatar();
  406. };
  407. this.setMyName = function(val){
  408. this.avatarNode.myName.value = val
  409. }
  410. this.randomizeAvatar = function() {
  411. this.avatarNode.randomize();
  412. }