ascene.js 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239
  1. this.initialize = function () {
  2. this.future(3).clientWatch();
  3. //this.createDefaultXRCostume();
  4. };
  5. this.clientWatch = function () {
  6. var self = this;
  7. if (this.children.length !== 0) {
  8. var clients = this.find("doc('http://vwf.example.com/clients.vwf')")[0];
  9. if (clients !== undefined) {
  10. //console.log(clients.children);
  11. let clientsArray = [];
  12. clients.children.forEach(function (element) {
  13. clientsArray.push(element.name);
  14. });
  15. this.children.forEach(function (node) {
  16. if (node.id.indexOf('avatar-') != -1) {
  17. if (clientsArray.includes(node.id.slice(7))) {
  18. //console.log(node.id + 'is here!');
  19. } else {
  20. //console.log(node.id + " needed to delete!");
  21. let idToDelete = node.id.slice(7);
  22. let nodes = self.children.filter(el=>
  23. (el.id.includes(idToDelete) &&
  24. ( el.id.includes('avatar') ||
  25. el.id.includes('xrcontroller') ||
  26. el.id.includes('gearvr')))
  27. );
  28. nodes.forEach(el => {
  29. self.children.delete(self.children[el.id])
  30. })
  31. // self.children.delete(self.children[node.id]);
  32. // //'gearvr-'
  33. // let controllerVR = self.children['gearvr-' + node.id.slice(7)];
  34. // if (controllerVR) {
  35. // self.children.delete(controllerVR);
  36. // }
  37. // let wmrvR = self.children['wmrvr-right-' + node.id.slice(7)];
  38. // if (wmrvR) {
  39. // self.children.delete(wmrvR);
  40. // }
  41. // let wmrvL = self.children['wmrvr-left-' + node.id.slice(7)];
  42. // if (wmrvL) {
  43. // self.children.delete(wmrvL);
  44. // }
  45. }
  46. }
  47. });
  48. }
  49. }
  50. this.future(5).clientWatch();
  51. };
  52. this.sphereProto = function () {
  53. let node = {
  54. "extends": "http://vwf.example.com/aframe/asphere.vwf",
  55. "properties": {
  56. "displayName": "sphere",
  57. "radius": 1,
  58. "class": "intersectable"
  59. },
  60. children: {
  61. "material": {
  62. "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
  63. "type": "component",
  64. "properties":{
  65. "color": "white"
  66. }
  67. },
  68. "interpolation":
  69. {
  70. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  71. "type": "component",
  72. "properties": {
  73. "enabled": true
  74. }
  75. },
  76. "cursor-listener": {
  77. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  78. "type": "component"
  79. }
  80. },
  81. events: {
  82. "clickEvent": {
  83. "body": ""
  84. }
  85. }
  86. }
  87. return node
  88. }
  89. this.cylinderProto = function () {
  90. let node = {
  91. "extends": "http://vwf.example.com/aframe/acylinder.vwf",
  92. "properties": {
  93. "displayName": "cylinder",
  94. "radius": 1,
  95. "height": 1,
  96. "class": "clickable"
  97. },
  98. children: {
  99. "material": {
  100. "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
  101. "type": "component",
  102. "properties":{
  103. "color": "white"
  104. }
  105. },
  106. "interpolation":
  107. {
  108. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  109. "type": "component",
  110. "properties": {
  111. "enabled": true
  112. }
  113. },
  114. "cursor-listener": {
  115. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  116. "type": "component"
  117. }
  118. },
  119. events: {
  120. "clickEvent": {
  121. "body": ""
  122. }
  123. }
  124. }
  125. return node
  126. }
  127. this.coneProto = function () {
  128. let node = {
  129. "extends": "http://vwf.example.com/aframe/acone.vwf",
  130. "properties": {
  131. "displayName": "cone",
  132. "radius-bottom": 1,
  133. "radius-top": 0.01,
  134. "height": 1,
  135. "class": "clickable"
  136. },
  137. children: {
  138. "material": {
  139. "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
  140. "type": "component",
  141. "properties":{
  142. "color": "white"
  143. }
  144. },
  145. "interpolation":
  146. {
  147. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  148. "type": "component",
  149. "properties": {
  150. "enabled": true
  151. }
  152. },
  153. "cursor-listener": {
  154. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  155. "type": "component"
  156. }
  157. },
  158. events: {
  159. "clickEvent": {
  160. "body": ""
  161. }
  162. }
  163. }
  164. return node
  165. }
  166. this.textProto = function () {
  167. let node = {
  168. "extends": "http://vwf.example.com/aframe/atext.vwf",
  169. "properties": {
  170. "displayName": "text",
  171. "color": "white",
  172. "value": "Text",
  173. "side": "double",
  174. "class": "clickable",
  175. //"font": "/vwf/model/aframe/fonts/custom-msdf.json",
  176. "negate": false
  177. },
  178. children: {
  179. "interpolation":
  180. {
  181. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  182. "type": "component",
  183. "properties": {
  184. "enabled": true
  185. }
  186. },
  187. "cursor-listener": {
  188. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  189. "type": "component"
  190. }
  191. },
  192. events: {
  193. "clickEvent": {
  194. "body": ""
  195. }
  196. }
  197. }
  198. return node
  199. }
  200. this.cubeProto = function () {
  201. let node = {
  202. "extends": "http://vwf.example.com/aframe/abox.vwf",
  203. "properties": {
  204. "displayName": "cube",
  205. "height": 1,
  206. "width": 1,
  207. "depth": 1,
  208. "class": "clickable"
  209. },
  210. children: {
  211. "interpolation":
  212. {
  213. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  214. "type": "component",
  215. "properties": {
  216. "enabled": true
  217. }
  218. },
  219. "cursor-listener": {
  220. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  221. "type": "component"
  222. },
  223. "material": {
  224. "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
  225. "type": "component",
  226. "properties":{
  227. "color": "white"
  228. }
  229. }
  230. },
  231. events: {
  232. "clickEvent": {
  233. "body": ""
  234. }
  235. }
  236. }
  237. return node
  238. }
  239. this.lightProto = function (lightType) {
  240. var newLightType = lightType
  241. if (!newLightType){
  242. newLightType = "directional"
  243. }
  244. let node = {
  245. "extends": "http://vwf.example.com/aframe/alight.vwf",
  246. "properties": {
  247. "displayName": newLightType,
  248. "type": newLightType,
  249. "class": "clickable"
  250. },
  251. children: {
  252. "interpolation":
  253. {
  254. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  255. "type": "component",
  256. "properties": {
  257. "enabled": true
  258. }
  259. },
  260. "cursor-listener": {
  261. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  262. "type": "component"
  263. }
  264. },
  265. events: {
  266. "clickEvent": {
  267. "body": ""
  268. }
  269. }
  270. }
  271. return node
  272. }
  273. this.mirrorProto = function () {
  274. let newNode = this.cubeProto();
  275. newNode.properties.width = 3;
  276. newNode.properties.height = 4;
  277. newNode.properties.depth= 0.1;
  278. newNode.children.material.properties.color = "white";
  279. newNode.children.mirrorComponent = {
  280. "extends": "http://vwf.example.com/aframe/a-mirror-component.vwf",
  281. "type": "component",
  282. "properties": {
  283. "camera": "avatarControl"
  284. }
  285. }
  286. return newNode
  287. }
  288. this.cameraProto = function () {
  289. let newNode = this.cubeProto();
  290. newNode.properties.width = 0.3;
  291. newNode.properties.height = 0.3;
  292. newNode.properties.depth= 0.5;
  293. newNode.children.material.properties.opacity = 0.5;
  294. newNode.children.material.properties.color = "red";
  295. newNode.children.camera = {
  296. "extends": "http://vwf.example.com/aframe/acamera.vwf",
  297. "properties": {
  298. "look-controls-enabled": false,
  299. "wasd-controls-enabled": false,
  300. "user-height": 0
  301. }
  302. }
  303. return newNode
  304. }
  305. this.cameraProtoWithOffset = function () {
  306. let newNode = this.cubeProto();
  307. newNode.properties.width = 0.3;
  308. newNode.properties.height = 0.3;
  309. newNode.properties.depth= 0.5;
  310. newNode.children.material.properties.opacity = 0.5;
  311. newNode.children.material.properties.color = "red";
  312. newNode.children.camera = {
  313. "extends": "http://vwf.example.com/aframe/acamera.vwf",
  314. "properties": {
  315. "look-controls-enabled": false,
  316. "wasd-controls-enabled": false,
  317. "user-height": 0
  318. },
  319. children: {
  320. viewoffset: {
  321. extends: "http://vwf.example.com/aframe/viewOffsetCamera-component.vwf",
  322. properties: {
  323. }
  324. }
  325. }
  326. }
  327. return newNode
  328. }
  329. this.planeProto = function () {
  330. let node = {
  331. "extends": "http://vwf.example.com/aframe/aplane.vwf",
  332. "properties": {
  333. "displayName": "plane",
  334. "height": 1,
  335. "width": 1,
  336. "class": "clickable"
  337. },
  338. children: {
  339. "material": {
  340. "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
  341. "type": "component",
  342. "properties": {
  343. "side": "double",
  344. "color": "white"
  345. }
  346. },
  347. "interpolation":
  348. {
  349. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  350. "type": "component",
  351. "properties": {
  352. "enabled": true
  353. }
  354. },
  355. "cursor-listener": {
  356. "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
  357. "type": "component"
  358. }
  359. },
  360. events: {
  361. "clickEvent": {
  362. "body": ""
  363. }
  364. }
  365. }
  366. return node
  367. }
  368. this.createModelObj = function (mtlSrc, objSrc, name, avatar) {
  369. var self = this;
  370. var position = "0 0 0";
  371. var nodeName = this.GUID();
  372. if (avatar) {
  373. let myAvatar = this.children[avatar];
  374. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  375. if (cursorNode) {
  376. position = cursorNode.worldPosition();
  377. //console.log(position);
  378. }
  379. }
  380. let modelNode = {
  381. "extends": "http://vwf.example.com/aframe/aobjmodel.vwf",
  382. "properties": {
  383. "src": '#' + objSrc,
  384. "mtl": '#' + mtlSrc,
  385. "position": position
  386. },
  387. children:{
  388. "interpolation":
  389. {
  390. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  391. "type": "component",
  392. "properties": {
  393. "enabled": true
  394. }
  395. }
  396. }
  397. }
  398. if (name) {
  399. modelNode.properties.displayName = name;
  400. }
  401. self.children.create(nodeName, modelNode, function( child ) {
  402. if (avatar) child.lookAt(self.children[avatar].worldPosition())
  403. });
  404. }
  405. this.createModel = function (modelType, modelSrc, avatar) {
  406. var self = this;
  407. let tagName = modelType + '-ASSET-'+ this.GUID();
  408. let tagNode = {
  409. "extends": "http://vwf.example.com/aframe/a-asset-item.vwf",
  410. "properties": {
  411. "itemID": tagName,
  412. "itemSrc": modelSrc
  413. }
  414. }
  415. this.children.create(tagName, tagNode, function( child ) {
  416. let nodeName = modelType + '-MODEL-'+self.GUID();
  417. var position = "0 0 0";
  418. if (avatar) {
  419. let myAvatar = self.children[avatar];
  420. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  421. if (cursorNode) {
  422. position = cursorNode.worldPosition();
  423. //console.log(position);
  424. }
  425. }
  426. const protos = {
  427. DAE: "http://vwf.example.com/aframe/acolladamodel.vwf",
  428. OBJ: "http://vwf.example.com/aframe/aobjmodel.vwf",
  429. GLTF: "http://vwf.example.com/aframe/agltfmodel.vwf"
  430. }
  431. let extendsName = Object.entries(protos).filter(el => el[0] == modelType)[0];
  432. let modelNode = {
  433. "extends": extendsName[1],
  434. "properties": {
  435. "src": '#' + child.itemID,
  436. "position": position
  437. },
  438. children:{
  439. "interpolation":
  440. {
  441. "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
  442. "type": "component",
  443. "properties": {
  444. "enabled": true
  445. }
  446. }
  447. }
  448. }
  449. self.children.create(nodeName, modelNode, function( child ) {
  450. if (avatar) child.lookAt(self.children[avatar].worldPosition())
  451. });
  452. });
  453. }
  454. this.createAssetResource = function(resType, resSrc){
  455. var self = this;
  456. const protos = {
  457. IMG: "http://vwf.example.com/aframe/a-asset-image-item.vwf",
  458. AUDIO: "http://vwf.example.com/aframe/a-asset-audio-item.vwf",
  459. VIDEO: "http://vwf.example.com/aframe/a-asset-video-item.vwf",
  460. ITEM: "http://vwf.example.com/aframe/a-asset-item.vwf"
  461. };
  462. let extendsName = Object.entries(protos).filter(el => el[0] == resType)[0];
  463. let tagName = resType + '-ASSET-'+ this.GUID();
  464. let tagNode = {
  465. "extends": extendsName[1],
  466. "properties": {
  467. "itemID": tagName,
  468. "itemSrc": resSrc
  469. }
  470. }
  471. this.children.create(tagName, tagNode);
  472. }
  473. this.createDrawNode = function(node, name, color, width, pos) {
  474. let newNode = {
  475. extends: "http://vwf.example.com/aframe/aentity.vwf",
  476. properties: {
  477. position: pos
  478. },
  479. children: {
  480. linepath: {
  481. extends: "http://vwf.example.com/aframe/linepath.vwf",
  482. properties: {
  483. color: color,
  484. path: [],
  485. width: width
  486. }
  487. }
  488. }
  489. }
  490. node.children.create(name, newNode);
  491. }
  492. this.createPrimitive = function (type, params, name, node, avatar) {
  493. var position = "0 0 0";
  494. var displayName = name;
  495. let nodeName = this.GUID();
  496. // if (!nodeName) {
  497. // nodeName = this.GUID();
  498. // }
  499. if (avatar) {
  500. let myAvatar = this.children[avatar];
  501. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  502. if (cursorNode) {
  503. position = cursorNode.worldPosition();
  504. //console.log(position);
  505. }
  506. }
  507. var newNode = {};
  508. switch (type) {
  509. case "cube":
  510. newNode = this.cubeProto();
  511. break;
  512. case "sphere":
  513. newNode = this.sphereProto();
  514. break;
  515. case "plane":
  516. newNode = this.planeProto();
  517. break;
  518. case "light":
  519. newNode = this.lightProto(params);
  520. break;
  521. case "text":
  522. newNode = this.textProto(params);
  523. break;
  524. case "cylinder":
  525. newNode = this.cylinderProto();
  526. break;
  527. case "cone":
  528. newNode = this.coneProto();
  529. break;
  530. default:
  531. newNode = undefined;
  532. break;
  533. }
  534. var self = this;
  535. if (newNode) {
  536. newNode.properties.position = position;
  537. if (displayName) {
  538. newNode.properties.displayName = displayName;
  539. }
  540. this.children.create(nodeName, newNode, function( child ) {
  541. if (avatar) child.lookAt(self.children[avatar].worldPosition());
  542. if (type == "text"){
  543. child.properties.font = "/vwf/model/aframe/fonts/custom-msdf.json"
  544. }
  545. });
  546. }
  547. }
  548. this.createMirror = function (name, node, avatar) {
  549. var position = "0 0 0";
  550. var nodeName = name;
  551. if (!nodeName) {
  552. nodeName = this.GUID();
  553. }
  554. if (avatar) {
  555. let myAvatar = this.children[avatar];
  556. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  557. if (cursorNode) {
  558. position = cursorNode.worldPosition();
  559. //console.log(position);
  560. }
  561. }
  562. var newNode = this.mirrorProto();
  563. newNode.properties.displayName = "mirror";
  564. var self = this;
  565. if (newNode) {
  566. newNode.properties.position = position;
  567. this.children.create(nodeName, newNode, function( child ) {
  568. if (avatar) child.lookAt(self.children[avatar].worldPosition());
  569. });
  570. }
  571. }
  572. this.createCamera = function (name, node, avatar) {
  573. var position = "0 0 0";
  574. var nodeName = name;
  575. if (!nodeName) {
  576. nodeName = this.GUID();
  577. }
  578. if (avatar) {
  579. let myAvatar = this.children[avatar];
  580. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  581. if (cursorNode) {
  582. position = cursorNode.worldPosition();
  583. //console.log(position);
  584. }
  585. }
  586. var newNode = this.cameraProto();
  587. newNode.properties.displayName = "camera";
  588. var self = this;
  589. if (newNode) {
  590. newNode.properties.position = position;
  591. this.children.create(nodeName, newNode, function( child ) {
  592. if (avatar) child.lookAt(self.children[avatar].worldPosition());
  593. });
  594. }
  595. }
  596. this.createCameraWithOffset = function (name, node, avatar) {
  597. var position = "0 0 0";
  598. var nodeName = name;
  599. if (!nodeName) {
  600. nodeName = this.GUID();
  601. }
  602. if (avatar) {
  603. let myAvatar = this.children[avatar];
  604. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  605. if (cursorNode) {
  606. position = cursorNode.worldPosition();
  607. //console.log(position);
  608. }
  609. }
  610. var newNode = this.cameraProtoWithOffset();
  611. newNode.properties.displayName = "cameraWithOffset";
  612. var self = this;
  613. if (newNode) {
  614. newNode.properties.position = position;
  615. this.children.create(nodeName, newNode, function( child ) {
  616. if (avatar) child.lookAt(self.children[avatar].worldPosition());
  617. });
  618. }
  619. }
  620. this.createImage = function (imgSrc, name, node, avatar) {
  621. var self = this;
  622. var position = "0 0 0";
  623. var nodeName = name;
  624. if (!nodeName) {
  625. nodeName = this.GUID();
  626. }
  627. if (avatar) {
  628. let myAvatar = this.children[avatar];
  629. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  630. if (cursorNode) {
  631. position = cursorNode.worldPosition();
  632. //console.log(position);
  633. }
  634. }
  635. let tagName = 'IMG-ASSET-'+ this.GUID();
  636. let tagNode = {
  637. "extends": "http://vwf.example.com/aframe/a-asset-image-item.vwf",
  638. "properties": {
  639. "itemID": tagName,
  640. "itemSrc": imgSrc
  641. }
  642. }
  643. this.children.create(tagName, tagNode, function( child ) {
  644. var nodeName = 'IMAGE-'+self.GUID();
  645. var position = "0 0 0";
  646. if (avatar) {
  647. let myAvatar = self.children[avatar];
  648. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  649. if (cursorNode) {
  650. position = cursorNode.worldPosition();
  651. //console.log(position);
  652. }
  653. }
  654. let newNode = self.planeProto();
  655. newNode.properties.displayName = "image";
  656. newNode.children.material.properties.src = '#' + child.itemID;
  657. newNode.properties.position = position;
  658. newNode.properties.scale = [0.003, 0.003, 0.003];
  659. if(child.width && child.height){
  660. newNode.properties.width = child.width;
  661. newNode.properties.height = child.height;
  662. self.children.create(nodeName, newNode, function( child ) {
  663. if (avatar) child.lookAt(self.children[avatar].worldPosition())
  664. });
  665. } else {
  666. let allNodes = vwf.models["vwf/model/aframe"].model.state.nodes;
  667. let imgAssetNode = allNodes[child.id];
  668. imgAssetNode.aframeObj.onload = function(){
  669. // console.log(imgAssetNode);
  670. newNode.properties.width = child.width;
  671. newNode.properties.height = child.height;
  672. self.children.create(nodeName, newNode, function( child ) {
  673. if (avatar) child.lookAt(self.children[avatar].worldPosition())
  674. });
  675. }
  676. }
  677. });
  678. }
  679. this.createVideo = function (vidSrc, name, node, avatar) {
  680. var self = this;
  681. var position = "0 0 0";
  682. var nodeName = name;
  683. if (!nodeName) {
  684. nodeName = this.GUID();
  685. }
  686. if (avatar) {
  687. let myAvatar = this.children[avatar];
  688. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  689. if (cursorNode) {
  690. position = cursorNode.worldPosition();
  691. //console.log(position);
  692. }
  693. }
  694. let tagName = 'VIDEO-ASSET-'+ this.GUID();
  695. let tagNode = {
  696. "extends": "http://vwf.example.com/aframe/a-asset-video-item.vwf",
  697. "properties": {
  698. "itemID": tagName,
  699. "itemSrc": vidSrc
  700. }
  701. }
  702. this.children.create(tagName, tagNode, function( child ) {
  703. let nodeName = 'VIDEO-'+self.GUID();
  704. var position = "0 0 0";
  705. if (avatar) {
  706. let myAvatar = self.children[avatar];
  707. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  708. if (cursorNode) {
  709. position = cursorNode.worldPosition();
  710. //console.log(position);
  711. }
  712. }
  713. let newNode = self.planeProto();
  714. newNode.properties.displayName = "video";
  715. newNode.children.material.properties.src = '#' + child.itemID;
  716. newNode.properties.position = position;
  717. // newNode.properties.width = 3;
  718. // newNode.properties.height = 1.75;
  719. newNode.properties.scale = [0.003, 0.003, 0.003];
  720. if (child.videoWidth && child.videoHeight) {
  721. newNode.properties.width = child.videoWidth;
  722. newNode.properties.height = child.videoHeight;
  723. self.children.create(nodeName, newNode, function( child ) {
  724. if (avatar) child.lookAt(self.children[avatar].worldPosition())
  725. });
  726. } else {
  727. let allNodes = vwf.models["vwf/model/aframe"].model.state.nodes;
  728. let imgAssetNode = allNodes[child.id];
  729. imgAssetNode.aframeObj.onloadeddata = function(){
  730. newNode.properties.width = child.videoWidth;
  731. newNode.properties.height = child.videoHeight;
  732. self.children.create(nodeName, newNode, function( child ) {
  733. if (avatar) child.lookAt(self.children[avatar].worldPosition())
  734. });
  735. }
  736. }
  737. });
  738. }
  739. this.createAudio = function (itemSrc, name, node, avatar) {
  740. var self = this;
  741. var position = "0 0 0";
  742. var nodeName = name;
  743. if (!nodeName) {
  744. nodeName = this.GUID();
  745. }
  746. if (avatar) {
  747. let myAvatar = this.children[avatar];
  748. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  749. if (cursorNode) {
  750. position = cursorNode.worldPosition();
  751. //console.log(position);
  752. }
  753. }
  754. let tagName = 'AUDIO-ASSET-'+ this.GUID();
  755. let tagNode = {
  756. "extends": "http://vwf.example.com/aframe/a-asset-audio-item.vwf",
  757. "properties": {
  758. "itemID": tagName,
  759. "itemSrc": itemSrc
  760. }
  761. }
  762. this.children.create(tagName, tagNode, function( child ) {
  763. // let allNodes = vwf.models["vwf/model/aframe"].model.state.nodes;
  764. // let itemAssetNode = allNodes[child.id];
  765. // itemAssetNode.aframeObj.onload = function(){
  766. // console.log(itemAssetNode);
  767. let nodeName = 'AUDIO-'+self.GUID();
  768. var position = "0 0 0";
  769. if (avatar) {
  770. let myAvatar = self.children[avatar];
  771. let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
  772. if (cursorNode) {
  773. position = cursorNode.worldPosition();
  774. //console.log(position);
  775. }
  776. }
  777. let newNode = self.cubeProto();
  778. newNode.properties.displayName = "audio";
  779. newNode.properties.position = position;
  780. newNode.properties.width = 0.3;
  781. newNode.properties.height = 0.3;
  782. newNode.properties.depth= 0.3;
  783. newNode.children.material.properties.opacity = 0.5;
  784. newNode.children.material.properties.color = "yellow";
  785. newNode.children.sound = {
  786. "extends": "http://vwf.example.com/aframe/a-sound-component.vwf",
  787. "type": "component",
  788. "properties": {
  789. "autoplay": false,
  790. "loop": true,
  791. "isPlaying": false,
  792. "src": '#' + child.itemID
  793. }
  794. };
  795. self.children.create(nodeName, newNode, function( child ) {
  796. if (avatar) child.lookAt(self.children[avatar].worldPosition())
  797. });
  798. // }
  799. });
  800. }
  801. this.createGooglePoly = function(polyID, name, node, avatar){
  802. // all done in aframe view driver
  803. let params = [polyID, name, node, avatar];
  804. this.loadGooglePolyAsset(params)
  805. }
  806. this.loadGooglePolyAsset = function( params ) {
  807. var self = this;
  808. const API_KEY = "AIzaSyCGx2_idlUJ88yW5GBkOllIkyxJyKbEgDk";
  809. const id = params[0];
  810. const avatarID = params[3];
  811. var url = `https://poly.googleapis.com/v1/assets/${id}/?key=${API_KEY}`;
  812. var request = new XMLHttpRequest();
  813. request.open( 'GET', url, true );
  814. request.addEventListener( 'load', function ( event ) {
  815. var asset = JSON.parse( event.target.response );
  816. // asset_name.textContent = asset.displayName;
  817. // asset_author.textContent = asset.authorName;
  818. var format = asset.formats.find( format => { return format.formatType === 'OBJ'; } );
  819. if ( format !== undefined ) {
  820. var obj = format.root;
  821. var mtl = format.resources.find( resource => { return resource.url.endsWith( 'mtl' ) } );
  822. var path = obj.url.slice( 0, obj.url.indexOf( obj.relativePath ) );
  823. //const createOnNodeID = vwf.application();
  824. let mtlName = 'MTL-ASSET-'+ self.GUID();
  825. let mtlNode = {
  826. "extends": "http://vwf.example.com/aframe/a-asset-item.vwf",
  827. "properties": {
  828. "itemID": mtlName,
  829. "itemSrc": mtl.url
  830. }
  831. }
  832. self.children.create(mtlName, mtlNode, function( mtlChild ) {
  833. let objName = 'OBJ-ASSET-'+ self.GUID();
  834. let objNode = {
  835. "extends": "http://vwf.example.com/aframe/a-asset-item.vwf",
  836. "properties": {
  837. "itemID": objName,
  838. "itemSrc": obj.url
  839. }
  840. }
  841. self.children.create(objName, objNode, function( objChild ) {
  842. self.createModelObj(mtlChild.itemID, objChild.itemID, asset.displayName, avatarID);
  843. })
  844. })
  845. }
  846. } );
  847. request.send( null );
  848. }
  849. this.GUID = function () {
  850. var self = this;
  851. var S4 = function () {
  852. return Math.floor(
  853. self.random() * 0x10000 /* 65536 */
  854. ).toString(16);
  855. };
  856. return (
  857. S4() + S4() + "-" +
  858. S4() + "-" +
  859. S4() + "-" +
  860. S4() + "-" +
  861. S4() + S4() + S4()
  862. );
  863. }
  864. this.smallRandomId = function() {
  865. return '_' + this.random().toString(36).substr(2, 9);
  866. }
  867. this.assetImgProto = function () {
  868. let node = {
  869. "extends": "http://vwf.example.com/aframe/a-asset-image-item.vwf",
  870. "properties": {
  871. },
  872. }
  873. return node
  874. }
  875. this.createAssetItemImg = function(){
  876. console.log("create new asset item for img");
  877. let nodeName = "asset-item-img-" + this.smallRandomId();
  878. let newNode = {
  879. "extends": "http://vwf.example.com/aframe/a-asset-image-item.vwf",
  880. "properties": {
  881. itemID: nodeName,
  882. itemSrc: ""
  883. }
  884. }
  885. this.children.create(nodeName, newNode);
  886. }
  887. this.deleteNode = function(nodeName){
  888. let node = this.children[nodeName];
  889. if (node) this.children.delete(node);
  890. }
  891. this.enterVR = function(){
  892. console.log("ENTER VR");
  893. }
  894. this.exitVR = function(){
  895. console.log("EXIT VR");
  896. }
  897. this.getChildByName = function (name) {
  898. let nodes = this.children.filter(el => el.displayName == name);
  899. return nodes[0]
  900. }
  901. this.getAllChildsByName = function (name) {
  902. let nodes = this.children.filter(el => el.displayName == name);
  903. return nodes
  904. }
  905. this.getDefaultXRCostume = function(){
  906. let defaultXRCostume = {
  907. "extends": "http://vwf.example.com/aframe/abox.vwf",
  908. "properties": {
  909. displayName: "defaultXRCostume",
  910. "position": "0 0 0",
  911. "height": 0.01,
  912. "width": 0.01,
  913. "depth": 1
  914. },
  915. "methods":{
  916. triggerdown:{
  917. body:'\/\/do on trigger down \n this.pointer.material.color = "red"',
  918. type: "application/javascript"
  919. },
  920. triggerup:{
  921. body:'\/\/do on trigger up \n this.pointer.material.color = "green"',
  922. type: "application/javascript"
  923. },
  924. onMove:{
  925. body:'\/\/do on move \n ',
  926. type: "application/javascript"
  927. }
  928. },
  929. children: {
  930. "material": {
  931. "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
  932. "type": "component",
  933. "properties":{
  934. "color": "white"
  935. }
  936. },
  937. "pointer": {
  938. "extends": "http://vwf.example.com/aframe/abox.vwf",
  939. "properties": {
  940. "position": "0 0 -0.7",
  941. "height": 0.1,
  942. "width": 0.1,
  943. "depth": 0.1
  944. },
  945. children: {
  946. "material": {
  947. "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
  948. "type": "component",
  949. "properties":{
  950. "color": "green"
  951. }
  952. }
  953. }
  954. }
  955. }
  956. }
  957. return defaultXRCostume
  958. }