ascene.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785
  1. this.initialize = function () {
  2. this.future(0).clientWatch();
  3. };
  4. this.clientWatch = function () {
  5. var self = this;
  6. if (this.children.length !== 0) {
  7. var clients = this.find("doc('http://vwf.example.com/clients.vwf')")[0];
  8. if (clients !== undefined) {
  9. //console.log(clients.children);
  10. let clientsArray = [];
  11. clients.children.forEach(function (element) {
  12. clientsArray.push(element.name);
  13. });
  14. this.children.forEach(function (node) {
  15. if (node.id.indexOf('avatar-') != -1) {
  16. if (clientsArray.includes(node.id.slice(7))) {
  17. //console.log(node.id + 'is here!');
  18. } else {
  19. //console.log(node.id + " needed to delete!");
  20. self.children.delete(self.children[node.id]);
  21. //'gearvr-'
  22. let controllerVR = self.children['gearvr-' + node.id.slice(7)];
  23. if (controllerVR) {
  24. self.children.delete(controllerVR);
  25. }
  26. let wmrvR = self.children['wmrvr-right-' + node.id.slice(7)];
  27. if (wmrvR) {
  28. self.children.delete(wmrvR);
  29. }
  30. let wmrvL = self.children['wmrvr-left-' + node.id.slice(7)];
  31. if (wmrvL) {
  32. self.children.delete(wmrvL);
  33. }
  34. }
  35. }
  36. });
  37. }
  38. }
  39. this.future(5).clientWatch();
  40. };
  41. this.sphereProto = function () {
  42. let node = {
  43. "extends": "http://vwf.example.com/aframe/asphere.vwf",
  44. "properties": {
  45. "displayName": "sphere",
  46. "radius": 1,
  47. "clickable": true
  48. },
  49. children: {
  50. "material": {
  51. "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
  52. "type": "component",
  53. "properties":{
  54. "color": "white"
  55. }
  56. },
  57. "interpolation":
  58. {
  59. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  60. "type": "component",
  61. "properties": {
  62. "enabled": true
  63. }
  64. },
  65. "cursor-listener": {
  66. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  67. "type": "component"
  68. }
  69. },
  70. events: {
  71. "clickEvent": {
  72. "body": ""
  73. }
  74. }
  75. }
  76. return node
  77. }
  78. this.cylinderProto = function () {
  79. let node = {
  80. "extends": "http://vwf.example.com/aframe/acylinder.vwf",
  81. "properties": {
  82. "displayName": "cylinder",
  83. "radius": 1,
  84. "height": 1,
  85. "clickable": true
  86. },
  87. children: {
  88. "material": {
  89. "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
  90. "type": "component",
  91. "properties":{
  92. "color": "white"
  93. }
  94. },
  95. "interpolation":
  96. {
  97. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  98. "type": "component",
  99. "properties": {
  100. "enabled": true
  101. }
  102. },
  103. "cursor-listener": {
  104. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  105. "type": "component"
  106. }
  107. },
  108. events: {
  109. "clickEvent": {
  110. "body": ""
  111. }
  112. }
  113. }
  114. return node
  115. }
  116. this.coneProto = function () {
  117. let node = {
  118. "extends": "http://vwf.example.com/aframe/acone.vwf",
  119. "properties": {
  120. "displayName": "cone",
  121. "radius-bottom": 1,
  122. "radius-top": 0.01,
  123. "height": 1,
  124. "clickable": true
  125. },
  126. children: {
  127. "material": {
  128. "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
  129. "type": "component",
  130. "properties":{
  131. "color": "white"
  132. }
  133. },
  134. "interpolation":
  135. {
  136. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  137. "type": "component",
  138. "properties": {
  139. "enabled": true
  140. }
  141. },
  142. "cursor-listener": {
  143. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  144. "type": "component"
  145. }
  146. },
  147. events: {
  148. "clickEvent": {
  149. "body": ""
  150. }
  151. }
  152. }
  153. return node
  154. }
  155. this.textProto = function () {
  156. let node = {
  157. "extends": "http://vwf.example.com/aframe/atext.vwf",
  158. "properties": {
  159. "displayName": "text",
  160. "color": "white",
  161. "value": "Text",
  162. "side": "double",
  163. "clickable": true
  164. },
  165. children: {
  166. "interpolation":
  167. {
  168. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  169. "type": "component",
  170. "properties": {
  171. "enabled": true
  172. }
  173. },
  174. "cursor-listener": {
  175. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  176. "type": "component"
  177. }
  178. },
  179. events: {
  180. "clickEvent": {
  181. "body": ""
  182. }
  183. }
  184. }
  185. return node
  186. }
  187. this.cubeProto = function () {
  188. let node = {
  189. "extends": "http://vwf.example.com/aframe/abox.vwf",
  190. "properties": {
  191. "displayName": "cube",
  192. "height": 1,
  193. "width": 1,
  194. "depth": 1,
  195. "clickable": true
  196. },
  197. children: {
  198. "interpolation":
  199. {
  200. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  201. "type": "component",
  202. "properties": {
  203. "enabled": true
  204. }
  205. },
  206. "cursor-listener": {
  207. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  208. "type": "component"
  209. },
  210. "material": {
  211. "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
  212. "type": "component",
  213. "properties":{
  214. "color": "white"
  215. }
  216. }
  217. },
  218. events: {
  219. "clickEvent": {
  220. "body": ""
  221. }
  222. }
  223. }
  224. return node
  225. }
  226. this.lightProto = function (lightType) {
  227. var newLightType = lightType
  228. if (!newLightType){
  229. newLightType = "directional"
  230. }
  231. let node = {
  232. "extends": "http://vwf.example.com/aframe/alight.vwf",
  233. "properties": {
  234. "displayName": newLightType,
  235. "type": newLightType,
  236. "clickable": true
  237. },
  238. children: {
  239. "interpolation":
  240. {
  241. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  242. "type": "component",
  243. "properties": {
  244. "enabled": true
  245. }
  246. },
  247. "cursor-listener": {
  248. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  249. "type": "component"
  250. }
  251. },
  252. events: {
  253. "clickEvent": {
  254. "body": ""
  255. }
  256. }
  257. }
  258. return node
  259. }
  260. this.planeProto = function () {
  261. let node = {
  262. "extends": "http://vwf.example.com/aframe/aplane.vwf",
  263. "properties": {
  264. "displayName": "plane",
  265. "height": 1,
  266. "width": 1,
  267. "clickable": true
  268. },
  269. children: {
  270. "material": {
  271. "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
  272. "type": "component",
  273. "properties": {
  274. "side": "double",
  275. "color": "white"
  276. }
  277. },
  278. "interpolation":
  279. {
  280. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  281. "type": "component",
  282. "properties": {
  283. "enabled": true
  284. }
  285. },
  286. "cursor-listener": {
  287. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  288. "type": "component"
  289. }
  290. },
  291. events: {
  292. "clickEvent": {
  293. "body": ""
  294. }
  295. }
  296. }
  297. return node
  298. }
  299. this.createModel = function (modelType, modelSrc, avatar) {
  300. var self = this;
  301. let tagName = modelType + '-ASSET-'+ this.GUID();
  302. let tagNode = {
  303. "extends": "http://vwf.example.com/aframe/a-asset-item.vwf",
  304. "properties": {
  305. "itemID": tagName,
  306. "itemSrc": modelSrc
  307. }
  308. }
  309. this.children.create(tagName, tagNode, function( child ) {
  310. let nodeName = modelType + '-MODEL-'+self.GUID();
  311. var position = "0 0 0";
  312. if (avatar) {
  313. let myAvatar = self.children[avatar];
  314. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  315. if (cursorNode) {
  316. position = cursorNode.worldPosition;
  317. //console.log(position);
  318. }
  319. }
  320. const protos = {
  321. DAE: "http://vwf.example.com/aframe/acolladamodel.vwf",
  322. OBJ: "http://vwf.example.com/aframe/aobjmodel.vwf",
  323. GLTF: "http://vwf.example.com/aframe/agltfmodel.vwf"
  324. }
  325. let extendsName = Object.entries(protos).filter(el => el[0] == modelType)[0];
  326. let modelNode = {
  327. "extends": extendsName[1],
  328. "properties": {
  329. "src": '#' + child.itemID,
  330. "position": position
  331. },
  332. children:{
  333. "interpolation":
  334. {
  335. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  336. "type": "component",
  337. "properties": {
  338. "enabled": true
  339. }
  340. }
  341. }
  342. }
  343. self.children.create(nodeName, modelNode, function( child ) {
  344. if (avatar) child.lookAt(self.children[avatar].worldPosition)
  345. });
  346. });
  347. }
  348. this.createAssetResource = function(resType, resSrc){
  349. var self = this;
  350. const protos = {
  351. IMG: "http://vwf.example.com/aframe/a-asset-image-item.vwf",
  352. AUDIO: "http://vwf.example.com/aframe/a-asset-audio-item.vwf",
  353. VIDEO: "http://vwf.example.com/aframe/a-asset-video-item.vwf",
  354. ITEM: "http://vwf.example.com/aframe/a-asset-item.vwf"
  355. };
  356. let extendsName = Object.entries(protos).filter(el => el[0] == resType)[0];
  357. let tagName = resType + '-ASSET-'+ this.GUID();
  358. let tagNode = {
  359. "extends": extendsName[1],
  360. "properties": {
  361. "itemID": tagName,
  362. "itemSrc": resSrc
  363. }
  364. }
  365. this.children.create(tagName, tagNode);
  366. }
  367. this.createPrimitive = function (type, params, name, node, avatar) {
  368. var position = "0 0 0";
  369. var nodeName = name;
  370. if (!nodeName) {
  371. nodeName = this.GUID();
  372. }
  373. if (avatar) {
  374. let myAvatar = this.children[avatar];
  375. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  376. if (cursorNode) {
  377. position = cursorNode.worldPosition;
  378. //console.log(position);
  379. }
  380. }
  381. var newNode = {};
  382. switch (type) {
  383. case "cube":
  384. newNode = this.cubeProto();
  385. break;
  386. case "sphere":
  387. newNode = this.sphereProto();
  388. break;
  389. case "plane":
  390. newNode = this.planeProto();
  391. break;
  392. case "light":
  393. newNode = this.lightProto(params);
  394. break;
  395. case "text":
  396. newNode = this.textProto(params);
  397. break;
  398. case "cylinder":
  399. newNode = this.cylinderProto();
  400. break;
  401. case "cone":
  402. newNode = this.coneProto();
  403. break;
  404. default:
  405. newNode = undefined;
  406. break;
  407. }
  408. var self = this;
  409. if (newNode) {
  410. newNode.properties.position = position;
  411. this.children.create(nodeName, newNode, function( child ) {
  412. if (avatar)child.lookAt(self.children[avatar].worldPosition)
  413. });
  414. }
  415. }
  416. this.createImage = function (imgSrc, name, node, avatar) {
  417. var self = this;
  418. var position = "0 0 0";
  419. var nodeName = name;
  420. if (!nodeName) {
  421. nodeName = this.GUID();
  422. }
  423. if (avatar) {
  424. let myAvatar = this.children[avatar];
  425. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  426. if (cursorNode) {
  427. position = cursorNode.worldPosition;
  428. //console.log(position);
  429. }
  430. }
  431. let tagName = 'IMG-ASSET-'+ this.GUID();
  432. let tagNode = {
  433. "extends": "http://vwf.example.com/aframe/a-asset-image-item.vwf",
  434. "properties": {
  435. "itemID": tagName,
  436. "itemSrc": imgSrc
  437. }
  438. }
  439. this.children.create(tagName, tagNode, function( child ) {
  440. let allNodes = vwf.models["vwf/model/aframe"].model.state.nodes;
  441. let imgAssetNode = allNodes[child.id];
  442. imgAssetNode.aframeObj.onload = function(){
  443. // console.log(imgAssetNode);
  444. let nodeName = 'IMAGE-'+self.GUID();
  445. var position = "0 0 0";
  446. if (avatar) {
  447. let myAvatar = self.children[avatar];
  448. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  449. if (cursorNode) {
  450. position = cursorNode.worldPosition;
  451. //console.log(position);
  452. }
  453. }
  454. let newNode = self.planeProto();
  455. newNode.properties.displayName = "image";
  456. newNode.children.material.properties.src = '#' + child.itemID;
  457. newNode.properties.position = position;
  458. newNode.properties.width = child.width;
  459. newNode.properties.height = child.height;
  460. newNode.properties.scale = [0.003, 0.003, 0.003];
  461. self.children.create(nodeName, newNode, function( child ) {
  462. if (avatar) child.lookAt(self.children[avatar].worldPosition)
  463. });
  464. }
  465. });
  466. }
  467. this.createVideo = function (vidSrc, name, node, avatar) {
  468. var self = this;
  469. var position = "0 0 0";
  470. var nodeName = name;
  471. if (!nodeName) {
  472. nodeName = this.GUID();
  473. }
  474. if (avatar) {
  475. let myAvatar = this.children[avatar];
  476. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  477. if (cursorNode) {
  478. position = cursorNode.worldPosition;
  479. //console.log(position);
  480. }
  481. }
  482. let tagName = 'VIDEO-ASSET-'+ this.GUID();
  483. let tagNode = {
  484. "extends": "http://vwf.example.com/aframe/a-asset-video-item.vwf",
  485. "properties": {
  486. "itemID": tagName,
  487. "itemSrc": vidSrc
  488. }
  489. }
  490. this.children.create(tagName, tagNode, function( child ) {
  491. let allNodes = vwf.models["vwf/model/aframe"].model.state.nodes;
  492. let imgAssetNode = allNodes[child.id];
  493. imgAssetNode.aframeObj.onloadeddata = function(){
  494. //console.log(imgAssetNode);
  495. let nodeName = 'VIDEO-'+self.GUID();
  496. var position = "0 0 0";
  497. if (avatar) {
  498. let myAvatar = self.children[avatar];
  499. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  500. if (cursorNode) {
  501. position = cursorNode.worldPosition;
  502. //console.log(position);
  503. }
  504. }
  505. let newNode = self.planeProto();
  506. newNode.properties.displayName = "video";
  507. newNode.children.material.properties.src = '#' + child.itemID;
  508. newNode.properties.position = position;
  509. // newNode.properties.width = 3;
  510. // newNode.properties.height = 1.75;
  511. newNode.properties.width = child.videoWidth;
  512. newNode.properties.height = child.videoHeight;
  513. newNode.properties.scale = [0.003, 0.003, 0.003];
  514. self.children.create(nodeName, newNode, function( child ) {
  515. if (avatar) child.lookAt(self.children[avatar].worldPosition)
  516. });
  517. }
  518. });
  519. }
  520. this.createAudio = function (itemSrc, name, node, avatar) {
  521. var self = this;
  522. var position = "0 0 0";
  523. var nodeName = name;
  524. if (!nodeName) {
  525. nodeName = this.GUID();
  526. }
  527. if (avatar) {
  528. let myAvatar = this.children[avatar];
  529. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  530. if (cursorNode) {
  531. position = cursorNode.worldPosition;
  532. //console.log(position);
  533. }
  534. }
  535. let tagName = 'AUDIO-ASSET-'+ this.GUID();
  536. let tagNode = {
  537. "extends": "http://vwf.example.com/aframe/a-asset-audio-item.vwf",
  538. "properties": {
  539. "itemID": tagName,
  540. "itemSrc": itemSrc
  541. }
  542. }
  543. this.children.create(tagName, tagNode, function( child ) {
  544. // let allNodes = vwf.models["vwf/model/aframe"].model.state.nodes;
  545. // let itemAssetNode = allNodes[child.id];
  546. // itemAssetNode.aframeObj.onload = function(){
  547. // console.log(itemAssetNode);
  548. let nodeName = 'AUDIO-'+self.GUID();
  549. var position = "0 0 0";
  550. if (avatar) {
  551. let myAvatar = self.children[avatar];
  552. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  553. if (cursorNode) {
  554. position = cursorNode.worldPosition;
  555. //console.log(position);
  556. }
  557. }
  558. let newNode = self.cubeProto();
  559. newNode.properties.displayName = "audio";
  560. newNode.properties.position = position;
  561. newNode.children.sound = {
  562. "extends": "http://vwf.example.com/aframe/a-sound-component.vwf",
  563. "type": "component",
  564. "properties": {
  565. "autoplay": true,
  566. "loop": true,
  567. "src": '#' + child.itemID
  568. }
  569. };
  570. self.children.create(nodeName, newNode, function( child ) {
  571. if (avatar) child.lookAt(self.children[avatar].worldPosition)
  572. });
  573. // }
  574. });
  575. }
  576. this.GUID = function () {
  577. var self = this;
  578. var S4 = function () {
  579. return Math.floor(
  580. self.random() * 0x10000 /* 65536 */
  581. ).toString(16);
  582. };
  583. return (
  584. S4() + S4() + "-" +
  585. S4() + "-" +
  586. S4() + "-" +
  587. S4() + "-" +
  588. S4() + S4() + S4()
  589. );
  590. }
  591. this.smallRandomId = function() {
  592. return '_' + this.random().toString(36).substr(2, 9);
  593. }
  594. this.assetImgProto = function () {
  595. let node = {
  596. "extends": "http://vwf.example.com/aframe/a-asset-image-item.vwf",
  597. "properties": {
  598. },
  599. }
  600. return node
  601. }
  602. this.createAssetItemImg = function(){
  603. console.log("create new asset item for img");
  604. let nodeName = "asset-item-img-" + this.smallRandomId();
  605. let newNode = {
  606. "extends": "http://vwf.example.com/aframe/a-asset-image-item.vwf",
  607. "properties": {
  608. itemID: nodeName,
  609. itemSrc: ""
  610. }
  611. }
  612. this.children.create(nodeName, newNode);
  613. }
  614. this.deleteNode = function(nodeName){
  615. let node = this.children[nodeName];
  616. if (node) this.children.delete(node);
  617. }