ascene.js 29 KB

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