avatar.js 16 KB

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