ascene.js 31 KB

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