aframe.js 35 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025
  1. "use strict";
  2. /*
  3. The MIT License (MIT)
  4. Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contributors. (https://github.com/NikolaySuslov/livecodingspace/blob/master/LICENSE.md)
  5. Virtual World Framework Apache 2.0 license (https://github.com/NikolaySuslov/livecodingspace/blob/master/licenses/LICENSE_VWF.md)
  6. */
  7. // VWF & A-Frame view driver
  8. define(["module", "vwf/view"], function (module, view) {
  9. var self;
  10. return view.load(module, {
  11. // == Module Definition ====================================================================
  12. initialize: function (options) {
  13. self = this;
  14. this.nodes = {};
  15. // this.tickTime = 0;
  16. // this.realTickDif = 50;
  17. // this.lastrealTickDif = 50;
  18. // this.lastRealTick = performance.now();
  19. this.state.appInitialized = false;
  20. this.state.showMobileJoystick = function(){
  21. let controlEl = document.querySelector('#avatarControl');
  22. if(controlEl){
  23. controlEl.setAttribute("virtual-gamepad-controls", {});
  24. controlEl.addEventListener("move", setJoystickMoveInput);
  25. }
  26. }
  27. this.state.hideMobileJoystick = function(){
  28. let controlEl = document.querySelector('#avatarControl');
  29. if(controlEl){
  30. controlEl.removeAttribute("virtual-gamepad-controls");
  31. controlEl.removeEventListener("move", setJoystickMoveInput);
  32. }
  33. }
  34. if (options === undefined) { options = {}; }
  35. if (typeof options == "object") {
  36. this.rootSelector = options["application-root"];
  37. }
  38. else {
  39. this.rootSelector = options;
  40. }
  41. this.gearvr = options.gearvr !== undefined ? options.gearvr : false;
  42. this.wmrright = options.wmrright !== undefined ? options.wmrright : false;
  43. this.wmrleft = options.wmrleft !== undefined ? options.wmrleft : false;
  44. },
  45. createdNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
  46. childSource, childType, childIndex, childName, callback /* ( ready ) */) {
  47. var node = this.state.nodes[childID];
  48. // If the "nodes" object does not have this object in it, it must not be one that
  49. // this driver cares about
  50. if (!node) {
  51. return;
  52. }
  53. if (this.state.scenes[childID]) {
  54. let scene = this.state.scenes[childID];
  55. let prepairAvatar = new Promise((resolve, reject) => {
  56. function cb() {
  57. resolve("ok");
  58. }
  59. createAvatarControl(scene, cb);
  60. });
  61. prepairAvatar.then(res => {
  62. // console.log(res);
  63. createAvatar.call(self, childID);
  64. postLoadAction.call(self, childID);
  65. if (this.gearvr == true) {
  66. console.log("CREATE GEARVR HERE!!");
  67. if (AFRAME.utils.device.isGearVR()) {
  68. let nodeName = 'gearvr-' + self.kernel.moniker();
  69. createGearVRControls();
  70. createGearVRController.call(self, childID, nodeName);
  71. }
  72. }
  73. if (this.wmrright == true) {
  74. console.log("CREATE WMR RIGHT HERE!!");
  75. if (AFRAME.utils.device.checkHasPositionalTracking()) {
  76. let nodeName = 'wmrvr-right-' + self.kernel.moniker();
  77. createWMRVRControls('right');
  78. createWMRVR.call(this, childID, nodeName);
  79. }
  80. }
  81. if (this.wmrleft == true) {
  82. console.log("CREATE WMR LEFT HERE!!");
  83. if (AFRAME.utils.device.checkHasPositionalTracking()) {
  84. let nodeName = 'wmrvr-left-' + self.kernel.moniker();
  85. createWMRVRControls('left');
  86. createWMRVR.call(this, childID, nodeName);
  87. }
  88. }
  89. })
  90. // this.state.appInitialized = true;
  91. document.body.appendChild(scene); //append is not working in Edge browser
  92. }
  93. if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj) {
  94. this.nodes[childID] = {
  95. id: childID,
  96. extends: childExtendsID,
  97. liveBindings: {}
  98. // lastTransformStep: 0,
  99. // lastAnimationStep: 0
  100. };
  101. }
  102. // if(this.state.nodes[childID]) {
  103. // this.nodes[childID] = {id:childID,extends:childExtendsID};
  104. // }
  105. // else if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj.object3D instanceof THREE.Object3D) {
  106. // this.nodes[childID] = {id:childID,extends:childExtendsID};
  107. // }
  108. },
  109. executed: function (nodeID, scriptText, scriptType) {
  110. var node = this.state.nodes[nodeID];
  111. if (!(node)) {
  112. return;
  113. }
  114. if (scriptText.includes('var print')) {
  115. let print = self.nodes[nodeID].liveBindings.print;
  116. let me = self.kernel.moniker();
  117. let sender = self.nodes[nodeID].liveBindings.sender;
  118. if (me == sender) {
  119. let data = JSON.stringify(print); //lively.lang.obj.inspect(print);
  120. self.kernel.fireEvent(nodeID, "printEvent", [data]);
  121. }
  122. }
  123. },
  124. initializedNode: function (nodeID, childID) {
  125. var node = this.state.nodes[childID];
  126. if (!node) {
  127. return;
  128. }
  129. if (node.extendsID == "http://vwf.example.com/aframe/gearvrcontroller.vwf") {
  130. console.log("gearVR controller initialized")
  131. }
  132. if (node.prototypes.includes("http://vwf.example.com/aframe/aentity.vwf")) {
  133. var clientThatSatProperty = self.kernel.client();
  134. var me = self.kernel.moniker();
  135. // If the transform property was initially updated by this view....
  136. if (clientThatSatProperty == me) {
  137. self.kernel.callMethod(childID, "setOwner", [me]);
  138. }
  139. }
  140. // if (propertyName == 'ownedBy')
  141. // {
  142. // // if (!node.aframeObj.el.getAttribute('ownedBy')){
  143. // // }
  144. // }
  145. },
  146. createdProperty: function (nodeId, propertyName, propertyValue) {
  147. return this.satProperty(nodeId, propertyName, propertyValue);
  148. },
  149. initializedProperty: function (nodeId, propertyName, propertyValue) {
  150. return this.satProperty(nodeId, propertyName, propertyValue);
  151. },
  152. gotProperty: function (nodeId, propertyName, propertyValue) {
  153. var selfs = this;
  154. var node = this.state.nodes[nodeId];
  155. if (!(node && node.aframeObj)) {
  156. return;
  157. }
  158. },
  159. satProperty: function (nodeId, propertyName, propertyValue) {
  160. //var selfs = this;
  161. var node = this.state.nodes[nodeId];
  162. if (!(node && node.aframeObj)) {
  163. return;
  164. }
  165. if (propertyName == 'position') {
  166. receiveModelTransformChanges(nodeId, 'position', propertyValue);
  167. }
  168. if (propertyName == 'rotation') {
  169. receiveModelTransformChanges(nodeId, 'rotation', propertyValue);
  170. }
  171. if (propertyName == 'scale') {
  172. receiveModelTransformChanges(nodeId, 'scale', propertyValue);
  173. }
  174. // if (node.aframeObj.nodeName == "AUDIO" && propertyName == 'itemSrc') {
  175. // //console.log("sat new item");
  176. // let elID = '#' + node.aframeObj.getAttribute('id');
  177. // Object.entries(this.state.nodes).forEach(el => {
  178. // let src = el[1].aframeObj.getAttribute('src');
  179. // if (src){
  180. // // console.log("my: " + src);
  181. // if (src == elID)
  182. // self.kernel.callMethod(el[0], "updateSrc", [elID])
  183. // }
  184. // })
  185. // }
  186. // if ( propertyName == "position" ) {
  187. // receiveModelTransformChanges( nodeId, propertyValue );
  188. // }
  189. if (node.aframeObj.nodeName == "AUDIO" && propertyName == 'itemSrc') {
  190. //console.log("sat new item");
  191. let elID = '#' + node.aframeObj.getAttribute('id');
  192. Object.entries(this.state.nodes).forEach(el => {
  193. let sound = el[1].aframeObj.getAttribute('sound');
  194. if (sound) {
  195. let soundID = vwf.find(el[0], 'sound');
  196. self.kernel.callMethod(soundID, "refreshSrc", [elID])
  197. // if (sound.src !== ""){
  198. // let src = '#' + sound.src.id;
  199. // if (src == elID){
  200. // let soundID = vwf.find(el[0], 'sound');
  201. // self.kernel.callMethod(soundID, "updateSrc", [elID])
  202. // }
  203. // }
  204. }
  205. })
  206. }
  207. if (node.aframeObj.nodeName == "IMG" && propertyName == 'itemSrc') {
  208. updateMaterial(node);
  209. }
  210. if (node.aframeObj.nodeName == "VIDEO" && propertyName == 'itemSrc') {
  211. updateMaterial(node);
  212. }
  213. if (node.aframeObj.nodeName == "A-ASSET-ITEM" && propertyName == 'itemSrc') {
  214. //console.log("sat new item");
  215. let elID = '#' + node.aframeObj.getAttribute('id');
  216. Object.entries(this.state.nodes).forEach(el => {
  217. let src = el[1].aframeObj.getAttribute('src');
  218. let mtl = el[1].aframeObj.getAttribute('mtl');
  219. if (src) {
  220. // console.log("my: " + src);
  221. if (src == elID)
  222. self.kernel.callMethod(el[0], "updateModel", [elID])
  223. }
  224. if (mtl) {
  225. // console.log("my: " + mtl);
  226. if (mtl == elID)
  227. self.kernel.callMethod(el[0], "updateModelMtl", [elID])
  228. }
  229. })
  230. }
  231. // var aframeObject = node.aframeObj;
  232. // switch (propertyName) {
  233. // case "clickable":
  234. // if (propertyValue) {
  235. // aframeObject.addEventListener('click', function (evt) {
  236. // let cursorID = 'cursor-avatar-'+selfs.kernel.moniker();
  237. // if (evt.detail.cursorEl.id == cursorID) {
  238. // vwf_view.kernel.fireEvent(nodeId, "clickEvent")
  239. // }
  240. // });
  241. // }
  242. // break;
  243. // }
  244. },
  245. deletedNode: function (childID) {
  246. delete this.nodes[childID];
  247. },
  248. firedEvent: function (nodeID, eventName, eventParameters) {
  249. var node = this.state.nodes[nodeID];
  250. if (!(node)) {
  251. return;
  252. }
  253. if (eventName == "printIt") {
  254. var clientThatSatProperty = self.kernel.client();
  255. var me = self.kernel.moniker();
  256. // If the transform property was initially updated by this view....
  257. if (clientThatSatProperty == me) {
  258. let selectedText = eventParameters[0];
  259. let printText = _app.helpers.replaceSubStringALL(selectedText, 'this', 'me');
  260. if (!self.nodes[nodeID].liveBindings) {
  261. self.nodes[nodeID].liveBindings = {}
  262. }
  263. //let bindObject = self.nodes[nodeID].liveBindings;
  264. let bindString = 'vwf.views["vwf/view/aframe"].nodes["' + nodeID + '"].liveBindings';
  265. let sender = JSON.stringify(eventParameters[1]);
  266. let scriptText = 'let binding = ' + bindString + '; binding.me = this; binding.sender = ' + sender + '; lively.vm.syncEval("var print = ' + printText + '",{topLevelVarRecorder: binding});';
  267. vwf_view.kernel.execute(nodeID, scriptText);
  268. }
  269. }
  270. if (eventName == "changingTransformFromView") {
  271. var clientThatSatProperty = self.kernel.client();
  272. var me = self.kernel.moniker();
  273. // If the transform property was initially updated by this view....
  274. if (clientThatSatProperty == me) {
  275. var node = this.state.nodes[nodeID];
  276. node.ignoreNextTransformUpdate = true;
  277. }
  278. }
  279. //var avatarID = vwf_view.kernel.find("", avatarName)
  280. if (eventName == "postLoadAction") {
  281. Object.entries(self.state.nodes).forEach(el => {
  282. if (el[1].prototypes.includes("http://vwf.example.com/aframe/aentity.vwf")) {
  283. vwf_view.kernel.callMethod(el[0], "setOwner", [self.kernel.moniker()]);
  284. }
  285. });
  286. }
  287. var avatarName = 'avatar-' + self.kernel.moniker();
  288. if (eventName == "createAvatar") {
  289. console.log("creating avatar...");
  290. // let avatarID = self.kernel.moniker();
  291. // var nodeName = 'avatar-' + avatarID;
  292. var newNode = {
  293. "id": avatarName,
  294. "uri": avatarName,
  295. "extends": "http://vwf.example.com/aframe/avatar.vwf",
  296. "properties": {
  297. "localUrl": '',
  298. "remoteUrl": '',
  299. "displayName": 'Avatar ' + randId(),
  300. "sharing": { audio: true, video: true },
  301. "selectMode": false,
  302. "position": [0, 1.6, 0]
  303. }
  304. }
  305. if (!self.state.nodes[avatarName]) {
  306. if (_LCSUSER.is) {
  307. _LCSUSER.get('profile').once(res => {
  308. var myNode = null;
  309. if (res.avatarNode) {
  310. myNode = JSON.parse(res.avatarNode);
  311. }
  312. newNode.properties.displayName = res.alias;
  313. vwf_view.kernel.createChild(nodeID, avatarName, newNode);
  314. vwf_view.kernel.callMethod(avatarName, "createAvatarBody", [myNode, null]);
  315. //"/../assets/avatars/male/avatar1.gltf"
  316. //vwf_view.kernel.callMethod(avatarName, 'setUserAvatar', [res] );
  317. })
  318. } else {
  319. vwf_view.kernel.createChild(nodeID, avatarName, newNode);
  320. vwf_view.kernel.callMethod(avatarName, "createAvatarBody", []);
  321. //"/../assets/avatars/male/avatar1.gltf"
  322. }
  323. //
  324. }
  325. // if(_LCSUSER.is){
  326. // _LCSUSER.get('profile').get('alias').once(res => {
  327. // vwf_view.kernel.callMethod(avatarName, 'setUserAvatar', [res] );
  328. // })
  329. // }
  330. }
  331. if (eventName == "intersectEvent") {
  332. var clientThatSatProperty = self.kernel.client();
  333. var me = self.kernel.moniker();
  334. // If the transform property was initially updated by this view....
  335. if (clientThatSatProperty == me) {
  336. if (me == eventParameters[0]) {
  337. vwf_view.kernel.callMethod(nodeID, "intersectEventMethod", [])
  338. }
  339. }
  340. }
  341. if (eventName == "clearIntersectEvent") {
  342. var clientThatSatProperty = self.kernel.client();
  343. var me = self.kernel.moniker();
  344. // If the transform property was initially updated by this view....
  345. if (clientThatSatProperty == me) {
  346. if (me == eventParameters[0]) {
  347. vwf_view.kernel.callMethod(nodeID, "clearIntersectEventMethod", [])
  348. }
  349. }
  350. }
  351. if (eventName == "clickEvent") {
  352. if (self.kernel.moniker() == eventParameters[0]) {
  353. let avatar = self.nodes[avatarName];
  354. let mode = vwf.getProperty(avatarName, 'selectMode');
  355. if (mode) {
  356. console.log("allow to click!!!")
  357. vwf_view.kernel.setProperty(avatarName, 'selectMode', false);
  358. let editorDriver = vwf.views["vwf/view/editor-new"];
  359. if (editorDriver) {
  360. let selectSwitch = document.querySelector('#selectNodeSwitch');
  361. const selectSwitchComp = new mdc.iconToggle.MDCIconToggle(selectSwitch); //new mdc.select.MDCIconToggle
  362. selectSwitchComp.on = false;
  363. let currentNodeDIV = document.querySelector('#currentNode');
  364. if (currentNodeDIV) currentNodeDIV._setNode(nodeID);
  365. }
  366. }
  367. }
  368. }
  369. },
  370. ticked: function (vwfTime) {
  371. updateAvatarPosition();
  372. //update vr controllers
  373. if (this.gearvr == true) {
  374. updateHandControllerVR('gearvr-', '#gearvrcontrol');
  375. }
  376. if (this.wmrright == true) {
  377. updateHandControllerVR('wmrvr-right-', '#wmrvrcontrolright');
  378. }
  379. if (this.wmrleft == true) {
  380. updateHandControllerVR('wmrvr-left-', '#wmrvrcontrolleft');
  381. }
  382. //lerpTick ();
  383. },
  384. calledMethod: function (nodeID, methodName, methodParameters, methodValue) {
  385. var node = this.state.nodes[nodeID];
  386. if (!(node && node.aframeObj)) {
  387. return;
  388. }
  389. switch (methodName) {
  390. case "translateBy":
  391. case "translateTo":
  392. //resetInterpolationFromViewDriver(nodeID, methodParameters, 'position')
  393. break;
  394. // No need for rotateBy or rotateTo because they call the quaternion methods
  395. case "quaterniateBy":
  396. case "quaterniateTo":
  397. //resetInterpolationFromViewDriver(nodeID, methodParameters, 'rotation')
  398. break;
  399. case "scaleBy":
  400. case "scaleTo":
  401. // No need for transformBy or worldTransformBy because they call transformTo and worldTransformTo
  402. case "transformTo":
  403. case "worldTransformTo":
  404. //resetInterpolationFromViewDriver(nodeID, methodParameters, 'rotation')
  405. break;
  406. }
  407. if (this.nodes[nodeID].extends == "http://vwf.example.com/aframe/acamera.vwf") {
  408. if (methodName == "setCameraToActive") {
  409. if (methodParameters[0] == vwf.moniker_) {
  410. console.log("set active");
  411. let offsetComp = node.aframeObj.getAttribute('viewoffset');
  412. if (offsetComp) {
  413. let offsetCompID = vwf.find(nodeID, 'viewoffset');
  414. self.kernel.callMethod(offsetCompID, "setParams", []);
  415. }
  416. node.aframeObj.setAttribute('camera', 'active', true);
  417. }
  418. }
  419. }
  420. // if (methodName == "createGooglePoly") {
  421. // }
  422. }
  423. });
  424. function resetInterpolationFromViewDriver(nodeID, methodParameters, propertyName) {
  425. if (methodParameters.length < 2 || methodParameters[1] == 0) {
  426. let viewNode = self.nodes[nodeID];
  427. if (viewNode.components.interpolation) {
  428. let interID = viewNode.components.interpolation;
  429. let viewComponentDriver = vwf.views["vwf/view/aframeComponent"];
  430. viewComponentDriver.resetInterpolation(interID, propertyName);
  431. }
  432. }
  433. }
  434. // Receive Model Transform Changes algorithm
  435. // 1.0 If (own view changes) then IGNORE (only if no external changes have occurred since the user’s view
  436. // requested this change – otherwise, will need to treat like 1.1 or 1.2)
  437. // 1.1 Elseif (other external changes and no outstanding own view changes) then ADOPT
  438. // 1.2 Else Interpolate to the model’s transform (conflict b/w own view and external sourced model changes)
  439. function receiveModelTransformChanges(nodeID, propertyName, propertyValue) {
  440. var node = self.state.nodes[nodeID];
  441. // If the node does not exist in the state's list of nodes, then this update is from a prototype and we
  442. // should ignore it
  443. if (!node) {
  444. return;
  445. }
  446. // If the transform property was initially updated by this view....
  447. if (node.ignoreNextTransformUpdate) {
  448. node.outstandingTransformRequests.shift();
  449. node.ignoreNextTransformUpdate = false;
  450. } else {
  451. // adoptTransform( node, transformMatrix );
  452. let prop = self.state.setFromValue(propertyValue);
  453. if (propertyName == 'position') {
  454. let pos = goog.vec.Vec3.clone(prop);
  455. node.aframeObj.object3D.position.set(pos[0], pos[1], pos[2]);
  456. } else if (propertyName == 'rotation') {
  457. let rot = goog.vec.Vec3.clone(prop);
  458. node.aframeObj.object3D.rotation.set(
  459. THREE.Math.degToRad(rot[0]),
  460. THREE.Math.degToRad(rot[1]),
  461. THREE.Math.degToRad(rot[2])
  462. )
  463. //node.aframeObj.object3D.rotation.set(rot[0], rot[1], rot[2]);
  464. } else if (propertyName == 'scale') {
  465. let scale = goog.vec.Vec3.clone(prop);
  466. node.aframeObj.object3D.scale.set(scale[0], scale[1], scale[2]);
  467. }
  468. }
  469. }
  470. function compareCoordinates(a, b, delta) {
  471. return Math.abs(a.x - b.x) > delta || Math.abs(a.y - b.y) > delta || Math.abs(a.z - b.z) > delta
  472. }
  473. function getWorldRotation(el, order) {
  474. var worldQuat = new THREE.Quaternion();
  475. el.object3D.getWorldQuaternion(worldQuat);
  476. //console.log(worldQuat);
  477. let angle = (new THREE.Euler()).setFromQuaternion(worldQuat, order);
  478. let rotation = (new THREE.Vector3(THREE.Math.radToDeg(angle.x),
  479. THREE.Math.radToDeg(angle.y), THREE.Math.radToDeg(angle.z)));
  480. return rotation
  481. }
  482. // function updateAvatarPosition() {
  483. // let avatarName = 'avatar-' + self.kernel.moniker();
  484. // var node = self.state.nodes[avatarName];
  485. // if (!node) return;
  486. // if (!node.aframeObj) return;
  487. // let el = document.querySelector('#avatarControl');
  488. // if (el) {
  489. // //let position = el.object3D.getWorldPosition(); //el.getAttribute('position');
  490. // let position = new THREE.Vector3();
  491. // el.object3D.getWorldPosition(position);
  492. // let rotation = getWorldRotation(el);
  493. // vwf_view.kernel.callMethod(avatarName, "followAvatarControl", [position, rotation]);
  494. // }
  495. // }
  496. function updateAvatarPosition() {
  497. let delta = 0.0001;
  498. let avatarName = 'avatar-' + self.kernel.moniker();
  499. var node = self.state.nodes[avatarName];
  500. if (!node) return;
  501. if (!node.aframeObj) return;
  502. let el = document.querySelector('#avatarControl');
  503. if (el) {
  504. //let position = el.object3D.getWorldPosition(); //el.getAttribute('position');
  505. let position = new THREE.Vector3();
  506. el.object3D.getWorldPosition(position);
  507. let rotation = el.getAttribute('rotation'); //getWorldRotation(el, 'YXZ');
  508. let lastRotation = self.nodes[avatarName].selfTickRotation;
  509. let lastPosition = self.nodes[avatarName].selfTickPosition;
  510. // let currentPosition = node.aframeObj.getAttribute('position');
  511. // let currentRotation = node.aframeObj.getAttribute('rotation');
  512. if (position && rotation && lastPosition && lastRotation) {
  513. if (compareCoordinates(position, lastPosition, delta) || Math.abs(rotation.y - lastRotation.y) > delta) {
  514. console.log("not equal!!")
  515. vwf_view.kernel.callMethod(avatarName, "followAvatarControl", [position, rotation]);
  516. }
  517. }
  518. self.nodes[avatarName].selfTickRotation = Object.assign({}, rotation);
  519. self.nodes[avatarName].selfTickPosition = Object.assign({}, position);
  520. }
  521. }
  522. function updateHandControllerVR(aName, aSelector) {
  523. //let avatarName = 'avatar-' + self.kernel.moniker();
  524. let delta = 0.0001
  525. let avatarName = aName + self.kernel.moniker();
  526. var node = self.state.nodes[avatarName];
  527. if (!node) return;
  528. if (!node.aframeObj) return;
  529. let el = document.querySelector(aSelector);
  530. if (el) {
  531. //let position = el.object3D.getWorldPosition() //el.getAttribute('position');
  532. let position = new THREE.Vector3();
  533. el.object3D.getWorldPosition(position);
  534. let rotation = getWorldRotation(el, 'XYZ');
  535. //let rotation = el.getAttribute('rotation');
  536. let lastRotation = self.nodes[avatarName].selfTickRotation;
  537. let lastPosition = self.nodes[avatarName].selfTickPosition;
  538. // let currentPosition = node.aframeObj.getAttribute('position');
  539. //let currentRotation = node.aframeObj.getAttribute('rotation');
  540. if (position && rotation && lastRotation && lastPosition) {
  541. if (compareCoordinates(position, lastPosition, delta) || compareCoordinates(rotation, lastRotation, delta)) {
  542. console.log("not equal!!");
  543. vwf_view.kernel.callMethod(avatarName, "updateVRControl", [position, rotation]);
  544. }
  545. }
  546. //vwf_view.kernel.callMethod(avatarName, "updateVRControl", [position, rotation]);
  547. self.nodes[avatarName].selfTickPosition = Object.assign({}, position);
  548. self.nodes[avatarName].selfTickRotation = Object.assign({}, rotation);
  549. }
  550. }
  551. function getMovementVector(el, vel) {
  552. var directionVector = new THREE.Vector3(0, 0, 0);
  553. var rotationEuler = new THREE.Euler(0, 0, 0, 'YXZ');
  554. var rotation = el.getAttribute('rotation');
  555. var velocity = vel;
  556. directionVector.copy(velocity);
  557. directionVector.multiplyScalar(0.05);
  558. // Absolute.
  559. if (!rotation) { return directionVector; }
  560. //xRotation = this.data.fly ? rotation.x : 0;
  561. // Transform direction relative to heading.
  562. rotationEuler.set(THREE.Math.degToRad(0), THREE.Math.degToRad(rotation.y), 0);
  563. directionVector.applyEuler(rotationEuler);
  564. return directionVector;
  565. }
  566. function setJoystickMoveInput (event) {
  567. const axes = event.detail.axis;
  568. //console.log(axes);
  569. let el = document.querySelector('#avatarControl');
  570. let position = new THREE.Vector3();
  571. el.object3D.getWorldPosition(position);
  572. let vel = new THREE.Vector3(axes[0], 0, -axes[1]);
  573. el.object3D.position.add(getMovementVector(el,vel));
  574. }
  575. function setJoystickRotateY (event) {
  576. const val = event.detail.value;
  577. //console.log(val);
  578. let el = document.querySelector('#avatarControl');
  579. let rotation = el.object3D.rotation;
  580. el.object3D.rotation.y += (-val)+rotation.y;
  581. //el.object3D.rotation.set(rotation.x,-val+rotation.y, rotation.z)
  582. }
  583. function setJoystickRotateX (event) {
  584. const val = event.detail.value;
  585. //console.log(val);
  586. let el = document.querySelector('#avatarControl');
  587. let rotation = el.object3D.rotation;
  588. el.object3D.rotation.x += val+rotation.x;
  589. //el.object3D.rotation.set(val+rotation.x, rotation.y, rotation.z)
  590. }
  591. function createAvatarControl(aScene, cb) {
  592. let avatarName = 'avatar-' + self.kernel.moniker();
  593. let avatarEl = document.createElement('a-entity');
  594. avatarEl.setAttribute('id', 'avatarControlParent');
  595. if (AFRAME.utils.device.isGearVR()) {
  596. avatarEl.setAttribute('movement-controls', {});//{'controls': 'gamepad'});
  597. //avatarEl.setAttribute('position', '0 0 0');
  598. }
  599. //avatarEl.setAttribute('position', '0 1.6 0');
  600. let controlEl = document.createElement('a-camera');
  601. controlEl.setAttribute('id', 'avatarControl');
  602. //controlEl.setAttribute('wasd-controls', {});
  603. controlEl.setAttribute('look-controls', { pointerLockEnabled: false });
  604. //controlEl.setAttribute('gamepad-controls', {'controller': 0});
  605. if (AFRAME.utils.device.isMobile()) {
  606. //self.state.showMobileJoystick()
  607. controlEl.setAttribute("virtual-gamepad-controls", {});
  608. controlEl.addEventListener("move", setJoystickMoveInput);
  609. }
  610. //controlEl.addEventListener("rotateY", setJoystickRotateY);
  611. //controlEl.addEventListener("rotateX", setJoystickRotateX);
  612. //controlEl.setAttribute('gearvr-controls',{});
  613. // controlEl.setAttribute('camera', 'near', 0.51);
  614. //controlEl.setAttribute('position', '0 0 0');
  615. let cursorEl = document.createElement('a-cursor');
  616. cursorEl.setAttribute('id', 'cursor-' + avatarName);
  617. cursorEl.setAttribute('raycaster', {});
  618. cursorEl.setAttribute('raycaster', 'objects', '.intersectable');
  619. cursorEl.setAttribute('raycaster', 'showLine', false);
  620. if (AFRAME.utils.device.isGearVR()) { }
  621. // cursorEl.setAttribute('raycaster', {objects: '.intersectable', showLine: true, far: 100});
  622. // cursorEl.setAttribute('raycaster', 'showLine', true);
  623. controlEl.appendChild(cursorEl);
  624. avatarEl.appendChild(controlEl);
  625. aScene.appendChild(avatarEl);
  626. controlEl.setAttribute('camera', 'active', true);
  627. cb();
  628. // let gearVRControlsEl = document.createElement('a-entity');
  629. // gearVRControlsEl.setAttribute('id', 'gearvr-'+avatarName);
  630. // gearVRControlsEl.setAttribute('gearvr-controls', {});
  631. // aScene.appendChild(gearVRControlsEl);
  632. // controlEl.addEventListener('componentchanged', function (evt) {
  633. // if (evt.detail.name === 'position') {
  634. // var eventParameters = evt.detail.newData;
  635. // vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
  636. // }
  637. // if (evt.detail.name === 'rotation') {
  638. // var eventParameters = evt.detail.newData;
  639. // vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
  640. // }
  641. // });
  642. }
  643. function createWMRVR(nodeID, nodeName) {
  644. var newNode = {
  645. "id": nodeName,
  646. "uri": nodeName,
  647. "extends": "http://vwf.example.com/aframe/wmrvrcontroller.vwf",
  648. "properties": {
  649. }
  650. }
  651. if (!self.state.nodes[nodeName]) {
  652. vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  653. vwf_view.kernel.callMethod(nodeName, "createController", []);
  654. //"/../assets/controller/wmrvr.gltf"
  655. }
  656. }
  657. function createGearVRController(nodeID, nodeName) {
  658. var newNode = {
  659. "id": nodeName,
  660. "uri": nodeName,
  661. "extends": "http://vwf.example.com/aframe/gearvrcontroller.vwf",
  662. "properties": {
  663. }
  664. }
  665. if (!self.state.nodes[nodeName]) {
  666. vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  667. vwf_view.kernel.callMethod(nodeName, "createController", []);
  668. //"/../assets/controller/gearvr.gltf"
  669. }
  670. }
  671. function postLoadAction(nodeID) {
  672. vwf_view.kernel.fireEvent(nodeID, "postLoadAction")
  673. }
  674. function createAvatar(nodeID) {
  675. vwf_view.kernel.fireEvent(nodeID, "createAvatar")
  676. // let avatarID = self.kernel.moniker();
  677. // var nodeName = 'avatar-' + avatarID;
  678. // var newNode = {
  679. // "id": nodeName,
  680. // "uri": nodeName,
  681. // "extends": "http://vwf.example.com/aframe/avatar.vwf"
  682. // }
  683. // vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  684. // vwf_view.kernel.callMethod(nodeName, "createAvatarBody");
  685. }
  686. function randId() {
  687. return '_' + Math.random().toString(36).substr(2, 9);
  688. }
  689. function createGearVRControls() {
  690. let sceneEl = document.querySelector('a-scene');
  691. let avatarControl = document.querySelector('#avatarControlParent');
  692. let gearvr = document.createElement('a-entity');
  693. gearvr.setAttribute('id', 'gearvrcontrol');
  694. gearvr.setAttribute('gearvr-controls', {
  695. 'hand': 'right',
  696. 'model': true
  697. });
  698. // gearvr.setAttribute('gearvr-controls', 'hand', 'right');
  699. gearvr.setAttribute('gearvrcontrol', {});
  700. avatarControl.appendChild(gearvr);
  701. }
  702. function createWMRVRControls(hand) {
  703. let sceneEl = document.querySelector('a-scene');
  704. let avatarControl = document.querySelector('#avatarControlParent');
  705. let wmrvr = document.createElement('a-entity');
  706. wmrvr.setAttribute('id', 'wmrvrcontrol' + hand);
  707. wmrvr.setAttribute('windows-motion-controls', '');
  708. wmrvr.setAttribute('windows-motion-controls', 'hand', hand);
  709. wmrvr.setAttribute('wmrvrcontrol', { 'hand': hand });
  710. avatarControl.appendChild(wmrvr);
  711. }
  712. function updateMaterial(node) {
  713. let elID = '#' + node.aframeObj.getAttribute('id');
  714. Object.entries(self.state.nodes).forEach(el => {
  715. let material = el[1].aframeObj.getAttribute('material');
  716. if (material) {
  717. if (!material.src) {
  718. let materialID = vwf.find(el[0], 'material');
  719. self.kernel.callMethod(materialID, "refreshSrc", []);
  720. }
  721. else if (material.src) {
  722. if (material.src !== "") {
  723. let src = '#' + material.src.id;
  724. if (src == elID) {
  725. let materialID = vwf.find(el[0], 'material');
  726. self.kernel.callMethod(materialID, "updateSrc", [elID])
  727. }
  728. }
  729. }
  730. }
  731. })
  732. }
  733. });