avatar.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559
  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 = this.avatarNode.position.clone();
  57. this.avatarNode.position = [position.x, height, position.z]
  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":`
  77. let myColor = this.getRandomColor();
  78. this.myName.color = myColor;
  79. this.myBody.material.color = myColor;
  80. this.myHead.visual.material.color = myColor;
  81. //this.myHead.myCursor.vis.material.color = myColor;
  82. //this.myHead.myCursor.line.color = myColor;
  83. let cursorEl = this.getScene()['mouse-' + this.parent.id.slice(7)];
  84. if(cursorEl){
  85. cursorEl.xrnode.controller.cursorVisual.avatarColor = myColor;
  86. cursorEl.xrnode.controller.cursorVisual.color = myColor;
  87. }
  88. `
  89. }
  90. },
  91. children: {
  92. "myBody": myBodyDef,
  93. //"myHand": myHandDef,
  94. "myHead": {
  95. "extends": "proxy/aframe/aentity.vwf",
  96. "properties": {
  97. "position": [0, 1.6, 0.7],
  98. "visible": true
  99. },
  100. children: {
  101. "interpolation":
  102. {
  103. "extends": "proxy/aframe/interpolation-component.vwf",
  104. "type": "component",
  105. "properties": {
  106. "enabled": true
  107. }
  108. },
  109. "visual": {
  110. "extends": "proxy/aframe/abox.vwf",
  111. "properties": {
  112. "height": 0.5,
  113. "width": 0.5,
  114. "depth": 0.1,
  115. "visible": true
  116. },
  117. "children": {
  118. "material": {
  119. "extends": "proxy/aframe/aMaterialComponent.vwf",
  120. "type": "component",
  121. "properties":{
  122. "color": myColor
  123. }
  124. }
  125. }
  126. },
  127. "myCamera":
  128. {
  129. //"id": 'camera-' + this.id,
  130. "extends": "proxy/aframe/acamera.vwf",
  131. "properties": {
  132. "position": [0, 0, -0.7], //userHeight
  133. "look-controls-enabled": false,
  134. "wasd-controls-enabled": false,
  135. "user-height": 0
  136. }
  137. },
  138. // "myCursor":
  139. // {
  140. // //"id": 'myCursor-' + this.id,
  141. // "extends": "proxy/aframe/aentity.vwf",
  142. // "properties": {},
  143. // "children": {
  144. // "vis": {
  145. // "extends": "proxy/aframe/abox.vwf",
  146. // "properties": {
  147. // "position": [0, 0, -3],
  148. // "height": 0.05,
  149. // "width": 0.05,
  150. // "depth": 0.01,
  151. // "visible": true
  152. // },
  153. // "children": {
  154. // "material": {
  155. // "extends": "proxy/aframe/aMaterialComponent.vwf",
  156. // "type": "component",
  157. // "properties":{
  158. // "color": myColor
  159. // }
  160. // },
  161. // "aabb-collider": {
  162. // "extends": "proxy/aframe/aabb-collider-component.vwf",
  163. // "type": "component",
  164. // "properties": {
  165. // debug: false,
  166. // interval: 10,
  167. // objects: ".hit"
  168. // }
  169. // }
  170. // }
  171. // },
  172. // "line": {
  173. // "extends": "proxy/aframe/lineComponent.vwf",
  174. // "type": "component",
  175. // "properties": {
  176. // "start": "0 0 -1",
  177. // "end": "0 0 -3",
  178. // "color": myColor
  179. // }
  180. // },
  181. // // "realCursor":{
  182. // // "extends": "proxy/aframe/acursor.vwf",
  183. // // "properties": {
  184. // // visible: false
  185. // // },
  186. // // "children": {
  187. // // "raycaster": {
  188. // // "extends": "proxy/aframe/raycasterComponent.vwf",
  189. // // "type": "component",
  190. // // "properties": {
  191. // // //recursive: false,
  192. // // //interval: 1000,
  193. // // far: 100,
  194. // // //objects: ".intersectable"
  195. // // }
  196. // // }
  197. // // }
  198. // // },
  199. // "myRayCaster": {
  200. // "extends": "proxy/aframe/aentity.vwf",
  201. // "properties": {},
  202. // "children": {
  203. // "raycaster": {
  204. // "extends": "proxy/aframe/raycasterComponent.vwf",
  205. // "type": "component",
  206. // "properties": {
  207. // recursive: false,
  208. // interval: 100,
  209. // far: 3,
  210. // objects: ".intersectable"
  211. // }
  212. // }
  213. // }
  214. // },
  215. // // "raycaster-listener": {
  216. // // "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
  217. // // "type": "component"
  218. // // }
  219. // }
  220. // }
  221. }
  222. },
  223. // "myHand":{
  224. // "id": "hand-" + this.id,
  225. // "extends": "proxy/aframe/xrcontroller.vwf",
  226. // "properties": {
  227. // "position": [0, 1.2, -0.3]
  228. // }
  229. // },
  230. "myName": {
  231. "extends": "proxy/aframe/atext.vwf",
  232. "properties": {
  233. "color": myColor,
  234. "value": this.displayName,
  235. "side": "double",
  236. "rotation": [0, 180, 0],
  237. "position": [0.3, 2.05, 0.5]
  238. }
  239. }
  240. }
  241. }
  242. var newNode = Object.assign({}, defaultNode);
  243. //1. check for default user saved avatar...
  244. if (nodeDef){
  245. newNode = Object.assign({}, nodeDef);
  246. newNode.properties.position = [0, userHeight, 0];
  247. //newNode.children.myName.properties.value = this.displayName;
  248. //newNode = Object.assign(defaultNode, nodeDef);
  249. }
  250. //2. check for default avatar costume in world...
  251. // let defaultWorldCostume = this.findWorldAvatarCostume();
  252. // if(defaultWorldCostume) {
  253. // newNode = Object.assign({}, defaultWorldCostume);
  254. // newNode.properties.visible = true;
  255. // newNode.properties.position = [0, userHeight, 0];
  256. // newNode.children.myName.properties.value = this.displayName;
  257. // }
  258. //3. check for model...
  259. if (modelSrc) {
  260. let myBodyDef = this.modelBodyDef;
  261. myBodyDef.properties.src = modelSrc;
  262. newNode.children.myBody = myBodyDef;
  263. newNode.children.myHead.children.visual.properties.visible = false;
  264. //newNode.children.myHead.children.myCursor.properties.visible = true;
  265. }
  266. //let cursor =
  267. //{
  268. // "id": 'cursor-' + this.id,
  269. // "extends": "proxy/aframe/acursor.vwf",
  270. //}
  271. let interpolation = {
  272. "extends": "proxy/aframe/interpolation-component.vwf",
  273. "type": "component",
  274. "properties": {
  275. "enabled": true
  276. }
  277. }
  278. this.children.create( "interpolation", interpolation );
  279. //this.children.create( "myCursor", myCursor );
  280. //this.children.create( "avatarCamera", camera );
  281. // this.children.create( "avatarNameNode", avatarNameNode );
  282. this.children.create("avatarNode", newNode, function(child){
  283. if (!nodeDef) {
  284. child.randomize();
  285. }
  286. //child.myHand.createController();
  287. });
  288. // this.localUrl = '';
  289. // this.remoteUrl = '';
  290. // this.displayName = this.id;
  291. // this.sharing = { audio: true, video: true };
  292. // this.children.create("avatarNode", newNode);
  293. // this.children.create( "avatarBodyModel", newNodeModel );
  294. //this.interpolation = "50ms";
  295. //vwf_view.kernel.createChild(this.id, "avatarCursor", cursorVis);
  296. }
  297. this.moveHand = function (rotation) {
  298. this.avatarNode.myHand.rotation = rotation;
  299. this.moveHead(rotation);
  300. }
  301. this.moveHead = function (rotation) {
  302. let newRotation = this.globalToLocalRotation(rotation);
  303. this.avatarNode.myHead.rotation = newRotation;
  304. //let euler = new THREE.Euler().setFromVector3(rotation);
  305. //let euler = new THREE.Euler().setFromVector3(rotation);
  306. // let q = this.localQuaternion().inverse().multiply(rotation); //new THREE.Quaternion().setFromEuler(euler)
  307. // let localEuler = new THREE.Euler().setFromQuaternion(q, 'YXZ');
  308. // this.avatarNode.myHead.rotation = [
  309. // THREE.Math.radToDeg(localEuler.x),
  310. // THREE.Math.radToDeg(localEuler.y),
  311. // THREE.Math.radToDeg(localEuler.z)
  312. // ];
  313. }
  314. this.updateAvatarBodyRotation = function (rotation) {
  315. let myRot = this.rotation.clone();
  316. this.rotation = [myRot.x, rotation.y, myRot.z];
  317. }
  318. this.updateAvatarRotation = function (rotation) {
  319. let myRot = this.rotation.clone();
  320. let myHeadRot = this.avatarNode.myHead.rotation.clone();
  321. this.rotation = [myRot.x, rotation.y, myRot.z];
  322. this.avatarNode.myHead.rotation = [rotation.x, myHeadRot.y, rotation.z];
  323. }
  324. this.setUserAvatar = function(aName){
  325. this.displayName = aName;
  326. this.avatarNode.myName.value = aName;
  327. }
  328. this.changeCostume = function(val, restore){
  329. let userHeight = -1.6;
  330. var myNameValue = this.displayName;
  331. if (this.avatarNode) {
  332. myNameValue = this.avatarNode.children.myName.properties.value;
  333. this.children.delete(this.avatarNode);
  334. //this.children.delete(this.interpolation);
  335. }
  336. let newNode = Object.assign({}, val);
  337. newNode.properties.position = [0, userHeight, 0];
  338. newNode.properties.visible = true;
  339. newNode.properties.meta = "avatarCostume";
  340. if(!restore)
  341. newNode.children.myName.properties.value = myNameValue;
  342. this.children.create("avatarNode", newNode);
  343. }
  344. this.resetAvatar = function(){
  345. //TODO: add XR check
  346. if (this.avatarNode) {
  347. //myNameValue = this.avatarNode.children.myName.properties.value;
  348. this.children.delete(this.avatarNode);
  349. this.children.delete(this.interpolation);
  350. }
  351. this.createAvatarBody();
  352. }
  353. this.createSimpleAvatar = function(){
  354. if (this.avatarNode.myBody) {
  355. this.avatarNode.children.delete(this.avatarNode.myBody);
  356. }
  357. var myColor = this.getRandomColor();
  358. if (this.avatarNode.myHead){
  359. myColor = this.avatarNode.myHead.visual.material.color;
  360. }
  361. let myBodyDef = this.simpleBodyDef;
  362. myBodyDef.children.material.properties.color = myColor;
  363. this.avatarNode.children.create("myBody", myBodyDef);
  364. this.avatarNode.myHead.visual.properties.visible = true;
  365. }
  366. this.createAvatarFromGLTF = function(modelSrc){
  367. if (this.avatarNode.myBody) {
  368. this.avatarNode.children.delete(this.avatarNode.myBody);
  369. let myBodyDef = this.modelBodyDef;
  370. myBodyDef.properties.src = modelSrc;
  371. this.avatarNode.children.create("myBody", myBodyDef);
  372. this.avatarNode.myHead.visual.properties.visible = false;
  373. //this.avatarNode.myHead.myCursor.properties.visible = true;
  374. }
  375. }
  376. this.showHideCursor = function(bool){
  377. //this.avatarNode.myHead.myCursor.properties.visible = bool;
  378. }
  379. this.showHideAvatar = function(bool){
  380. this.properties.visible = bool;
  381. }
  382. this.setBigVideoHead = function(val){
  383. this.avatarNode.myHead.visual.height = 4;
  384. this.avatarNode.myHead.visual.width = 3;
  385. this.avatarNode.myBody.visible = false;
  386. }
  387. this.setSmallVideoHead = function(val){
  388. this.avatarNode.myHead.visual.height = 0.5;
  389. this.avatarNode.myHead.visual.width = 0.5;
  390. this.avatarNode.myBody.visible = true;
  391. }
  392. this.setVideoTexture = function(val){
  393. console.log(val);
  394. // this.setSmallVideoHead();
  395. this.avatarNode.myHead.visual.material.color = "white";
  396. this.avatarNode.myHead.visual.material.src = '#temp';
  397. this.avatarNode.myHead.visual.material.src = '#'+val;
  398. }
  399. this.removeVideoTexture = function(){
  400. // this.setSmallVideoHead();
  401. this.avatarNode.myHead.visual.material.color = this.avatarNode.myBody.material.color;
  402. this.avatarNode.myHead.visual.material.src = "";
  403. // this.avatarNode.myHead.visual.src = '#'+val;
  404. }
  405. this.removeSoundWebRTC = function(){
  406. if (this.avatarNode.audio)
  407. this.avatarNode.children.delete(this.avatarNode.audio);
  408. }
  409. this.setSoundWebRTC = function(val){
  410. console.log(val);
  411. if (this.avatarNode.audio) this.removeSoundWebRTC();
  412. var soundNode = {
  413. "extends": "proxy/aframe/aentity.vwf",
  414. "properties": {
  415. },
  416. "children":{
  417. "streamsound":{
  418. "extends": "proxy/aframe/streamSoundComponent.vwf",
  419. "type": "component",
  420. "properties": {
  421. }
  422. }
  423. }
  424. }
  425. this.avatarNode.children.create("audio", soundNode );
  426. // this.setSmallVideoHead();
  427. //this.avatarNode.audio.src = '#tempAudio';
  428. //this.avatarNode.audio.src = '#'+val;
  429. }
  430. this.webrtcTurnOnOff = function(val){
  431. console.log('WEBRTC is ', val);
  432. }
  433. this.webrtcMuteAudio = function(val){
  434. console.log('WEBRTC Audio is ', val);
  435. }
  436. this.webrtcMuteVideo = function(val){
  437. console.log('WEBRTC Video is ', val);
  438. }
  439. this.initialize = function() {
  440. // this.future(0).updateAvatar();
  441. };
  442. this.setMyName = function(val){
  443. this.avatarNode.myName.value = val
  444. }
  445. this.randomizeAvatar = function() {
  446. this.avatarNode.randomize();
  447. }