ascene.js 30 KB

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