aframe.js 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732
  1. "use strict";
  2. // VWF & A-Frame view driver
  3. // Copyright 2017 Krestianstvo.org project
  4. //
  5. // Copyright 2012 United States Government, as represented by the Secretary of Defense, Under
  6. // Secretary of Defense (Personnel & Readiness).
  7. //
  8. // Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
  9. // in compliance with the License. You may obtain a copy of the License at
  10. //
  11. // http://www.apache.org/licenses/LICENSE-2.0
  12. //
  13. // Unless required by applicable law or agreed to in writing, software distributed under the License
  14. // is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  15. // or implied. See the License for the specific language governing permissions and limitations under
  16. // the License.
  17. /// vwf/view/lesson creates a view interface for instruction text.
  18. ///
  19. /// @module vwf/view/aframe
  20. /// @requires vwf/view
  21. define(["module", "vwf/view"], function (module, view) {
  22. var self;
  23. return view.load(module, {
  24. // == Module Definition ====================================================================
  25. initialize: function (options) {
  26. self = this;
  27. this.nodes = {};
  28. // this.tickTime = 0;
  29. // this.realTickDif = 50;
  30. // this.lastrealTickDif = 50;
  31. // this.lastRealTick = performance.now();
  32. this.state.appInitialized = false;
  33. if (options === undefined) { options = {}; }
  34. if (typeof options == "object") {
  35. this.rootSelector = options["application-root"];
  36. }
  37. else {
  38. this.rootSelector = options;
  39. }
  40. this.gearvr = options.gearvr !== undefined ? options.gearvr : false;
  41. this.wmrright = options.wmrright !== undefined ? options.wmrright : false;
  42. this.wmrleft = options.wmrleft !== undefined ? options.wmrleft : false;
  43. },
  44. createdNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
  45. childSource, childType, childIndex, childName, callback /* ( ready ) */) {
  46. var node = this.state.nodes[childID];
  47. // If the "nodes" object does not have this object in it, it must not be one that
  48. // this driver cares about
  49. if (!node) {
  50. return;
  51. }
  52. if (this.state.scenes[childID]) {
  53. let scene = this.state.scenes[childID];
  54. createAvatarControl(scene);
  55. createAvatar.call(this, childID);
  56. // this.state.appInitialized = true;
  57. if (this.gearvr == true) {
  58. console.log("CREATE GEARVR HERE!!");
  59. if (AFRAME.utils.device.isGearVR()) {
  60. let nodeName = 'gearvr-' + self.kernel.moniker();
  61. createGearVRControls();
  62. createGearVRController.call(this, childID, nodeName);
  63. }
  64. }
  65. if (this.wmrright == true) {
  66. console.log("CREATE WMR RIGHT HERE!!");
  67. if (AFRAME.utils.device.checkHasPositionalTracking()) {
  68. let nodeName = 'wmrvr-right-' + self.kernel.moniker();
  69. createWMRVRControls('right');
  70. createWMRVR.call(this, childID, nodeName);
  71. }
  72. }
  73. if (this.wmrleft == true) {
  74. console.log("CREATE WMR LEFT HERE!!");
  75. if (AFRAME.utils.device.checkHasPositionalTracking()) {
  76. let nodeName = 'wmrvr-left-' + self.kernel.moniker();
  77. createWMRVRControls('left');
  78. createWMRVR.call(this, childID, nodeName);
  79. }
  80. }
  81. document.body.appendChild(scene); //append is not working in Edge browser
  82. }
  83. if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj) {
  84. this.nodes[childID] = {
  85. id: childID,
  86. extends: childExtendsID,
  87. // lastTransformStep: 0,
  88. // lastAnimationStep: 0
  89. };
  90. }
  91. // if(this.state.nodes[childID]) {
  92. // this.nodes[childID] = {id:childID,extends:childExtendsID};
  93. // }
  94. // else if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj.object3D instanceof THREE.Object3D) {
  95. // this.nodes[childID] = {id:childID,extends:childExtendsID};
  96. // }
  97. },
  98. initializedNode: function (nodeID, childID) {
  99. var node = this.state.nodes[childID];
  100. if (!node) {
  101. return;
  102. }
  103. if (node.extendsID == "http://vwf.example.com/aframe/gearvrcontroller.vwf"){
  104. console.log("gearVR controller initialized")
  105. }
  106. },
  107. createdProperty: function (nodeId, propertyName, propertyValue) {
  108. return this.satProperty(nodeId, propertyName, propertyValue);
  109. },
  110. initializedProperty: function (nodeId, propertyName, propertyValue) {
  111. return this.satProperty(nodeId, propertyName, propertyValue);
  112. },
  113. gotProperty: function (nodeId, propertyName, propertyValue) {
  114. var selfs = this;
  115. var node = this.state.nodes[nodeId];
  116. if (!(node && node.aframeObj)) {
  117. return;
  118. }
  119. },
  120. satProperty: function (nodeId, propertyName, propertyValue) {
  121. var selfs = this;
  122. var node = this.state.nodes[nodeId];
  123. if (!(node && node.aframeObj)) {
  124. return;
  125. }
  126. // if (node.aframeObj.nodeName == "AUDIO" && propertyName == 'itemSrc') {
  127. // //console.log("sat new item");
  128. // let elID = '#' + node.aframeObj.getAttribute('id');
  129. // Object.entries(this.state.nodes).forEach(el => {
  130. // let src = el[1].aframeObj.getAttribute('src');
  131. // if (src){
  132. // // console.log("my: " + src);
  133. // if (src == elID)
  134. // self.kernel.callMethod(el[0], "updateSrc", [elID])
  135. // }
  136. // })
  137. // }
  138. if (node.aframeObj.nodeName == "AUDIO" && propertyName == 'itemSrc') {
  139. //console.log("sat new item");
  140. let elID = '#' + node.aframeObj.getAttribute('id');
  141. Object.entries(this.state.nodes).forEach(el => {
  142. let sound = el[1].aframeObj.getAttribute('sound');
  143. if(sound) {
  144. let soundID = vwf.find(el[0], 'sound');
  145. self.kernel.callMethod(soundID, "refreshSrc", [elID])
  146. // if (sound.src !== ""){
  147. // let src = '#' + sound.src.id;
  148. // if (src == elID){
  149. // let soundID = vwf.find(el[0], 'sound');
  150. // self.kernel.callMethod(soundID, "updateSrc", [elID])
  151. // }
  152. // }
  153. }
  154. })
  155. }
  156. if (node.aframeObj.nodeName == "IMG" && propertyName == 'itemSrc') {
  157. //console.log("sat new item");
  158. let elID = '#' + node.aframeObj.getAttribute('id');
  159. Object.entries(this.state.nodes).forEach(el => {
  160. let material = el[1].aframeObj.getAttribute('material');
  161. if(material) {
  162. if (material.src !== ""){
  163. // console.log("my: " + src);
  164. let src = '#' + material.src.id;
  165. if (src == elID){
  166. let materialID = vwf.find(el[0], 'material');
  167. self.kernel.callMethod(materialID, "updateSrc", [elID])
  168. }
  169. }
  170. }
  171. })
  172. }
  173. if (node.aframeObj.nodeName == "VIDEO" && propertyName == 'itemSrc') {
  174. //console.log("sat new item");
  175. let elID = '#' + node.aframeObj.getAttribute('id');
  176. Object.entries(this.state.nodes).forEach(el => {
  177. let material = el[1].aframeObj.getAttribute('material');
  178. if(material) {
  179. if (material.src !== ""){
  180. // console.log("my: " + src);
  181. let src = '#' + material.src.id;
  182. if (src == elID){
  183. let materialID = vwf.find(el[0], 'material');
  184. self.kernel.callMethod(materialID, "updateSrc", [elID])
  185. }
  186. }
  187. }
  188. })
  189. }
  190. if (node.aframeObj.nodeName == "A-ASSET-ITEM" && propertyName == 'itemSrc') {
  191. //console.log("sat new item");
  192. let elID = '#' + node.aframeObj.getAttribute('id');
  193. Object.entries(this.state.nodes).forEach(el => {
  194. let src = el[1].aframeObj.getAttribute('src');
  195. let mtl = el[1].aframeObj.getAttribute('mtl');
  196. if (src){
  197. // console.log("my: " + src);
  198. if (src == elID)
  199. self.kernel.callMethod(el[0], "updateModel", [elID])
  200. }
  201. if (mtl){
  202. // console.log("my: " + mtl);
  203. if (mtl == elID)
  204. self.kernel.callMethod(el[0], "updateModelMtl", [elID])
  205. }
  206. })
  207. }
  208. // if (node.aframeObj.nodeName == "A-BOX" && propertyName == 'color') {
  209. // console.log("sat color");
  210. // let materialName = '/' + node.name + '/material';
  211. // let materialID = vwf.find('', materialName)[0];
  212. // if (materialID) {
  213. // vwf.setProperty(materialID, propertyName, propertyValue);
  214. // }
  215. // }
  216. // if (propertyName == 'position') {
  217. // this.nodes[nodeId].lastTransformStep = vwf.time();
  218. // }
  219. // var aframeObject = node.aframeObj;
  220. // switch (propertyName) {
  221. // case "clickable":
  222. // if (propertyValue) {
  223. // aframeObject.addEventListener('click', function (evt) {
  224. // let cursorID = 'cursor-avatar-'+selfs.kernel.moniker();
  225. // if (evt.detail.cursorEl.id == cursorID) {
  226. // vwf_view.kernel.fireEvent(nodeId, "clickEvent")
  227. // }
  228. // });
  229. // }
  230. // break;
  231. // }
  232. },
  233. deletedNode: function(childID)
  234. {
  235. delete this.nodes[childID];
  236. },
  237. firedEvent: function (nodeID, eventName, eventParameters) {
  238. //var avatarID = vwf_view.kernel.find("", avatarName)
  239. var avatarName = 'avatar-' + self.kernel.moniker();
  240. if (eventName == "createAvatar") {
  241. console.log("creating avatar...");
  242. // let avatarID = self.kernel.moniker();
  243. // var nodeName = 'avatar-' + avatarID;
  244. var newNode = {
  245. "id": avatarName,
  246. "uri": avatarName,
  247. "extends": "http://vwf.example.com/aframe/avatar.vwf",
  248. "properties": {
  249. "localUrl": '',
  250. "remoteUrl": '',
  251. "displayName": 'Avatar '+ randId(),
  252. "sharing": { audio: true, video: true },
  253. "selectMode": false,
  254. "position": "0 1.6 0"
  255. }
  256. }
  257. if (!self.state.nodes[avatarName]) {
  258. if(_LCSUSER.is){
  259. _LCSUSER.get('profile').once(res => {
  260. var myNode = null;
  261. if (res.avatarNode) {
  262. myNode = JSON.parse(res.avatarNode);
  263. }
  264. newNode.properties.displayName = res.alias;
  265. vwf_view.kernel.createChild(nodeID, avatarName, newNode);
  266. vwf_view.kernel.callMethod(avatarName, "createAvatarBody", [myNode, null]);
  267. //"/../assets/avatars/male/avatar1.gltf"
  268. //vwf_view.kernel.callMethod(avatarName, 'setUserAvatar', [res] );
  269. })
  270. } else {
  271. vwf_view.kernel.createChild(nodeID, avatarName, newNode);
  272. vwf_view.kernel.callMethod(avatarName, "createAvatarBody", []);
  273. //"/../assets/avatars/male/avatar1.gltf"
  274. }
  275. }
  276. // if(_LCSUSER.is){
  277. // _LCSUSER.get('profile').get('alias').once(res => {
  278. // vwf_view.kernel.callMethod(avatarName, 'setUserAvatar', [res] );
  279. // })
  280. // }
  281. }
  282. // if (eventName == "setAvatarRotation") {
  283. // vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
  284. // }
  285. // if (eventName == "setAvatarPosition") {
  286. // vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
  287. // }
  288. if (eventName == "clickEvent") {
  289. if (self.kernel.moniker() == eventParameters[0]){
  290. let avatar = self.nodes[avatarName];
  291. let mode = vwf.getProperty(avatarName, 'selectMode');
  292. if(mode) {
  293. console.log("allow to click!!!")
  294. vwf_view.kernel.setProperty(avatarName, 'selectMode', false);
  295. let editorDriver = vwf.views["vwf/view/editor-new"];
  296. if (editorDriver){
  297. let selectSwitch = document.querySelector('#selectNodeSwitch');
  298. const selectSwitchComp = new mdc.iconToggle.MDCIconToggle(selectSwitch); //new mdc.select.MDCIconToggle
  299. selectSwitchComp.on = false;
  300. let currentNodeDIV = document.querySelector('#currentNode');
  301. if (currentNodeDIV) currentNodeDIV._setNode(nodeID);
  302. }
  303. }
  304. }
  305. }
  306. },
  307. ticked: function (vwfTime) {
  308. updateAvatarPosition();
  309. //update vr controllers
  310. if (this.gearvr == true) {
  311. updateHandControllerVR('gearvr-', '#gearvrcontrol');
  312. }
  313. if (this.wmrright == true) {
  314. updateHandControllerVR('wmrvr-right-', '#wmrvrcontrolright');
  315. }
  316. if (this.wmrleft == true) {
  317. updateHandControllerVR('wmrvr-left-', '#wmrvrcontrolleft');
  318. }
  319. // console.log(vwfTime);
  320. //lerpTick ();
  321. },
  322. calledMethod: function( nodeID, methodName, methodParameters, methodValue ) {
  323. var node = this.state.nodes[nodeID];
  324. if (!(node && node.aframeObj)) {
  325. return;
  326. }
  327. if (this.nodes[nodeID].extends == "http://vwf.example.com/aframe/acamera.vwf"){
  328. if (methodName == "setCameraToActive"){
  329. if (methodParameters[0] == vwf.moniker_){
  330. console.log("set active");
  331. let offsetComp = node.aframeObj.getAttribute('viewoffset');
  332. if (offsetComp) {
  333. let offsetCompID = vwf.find(nodeID, 'viewoffset');
  334. self.kernel.callMethod(offsetCompID, "setParams", []);
  335. }
  336. node.aframeObj.setAttribute('camera', 'active', true);
  337. }
  338. }
  339. }
  340. if(methodName == "createGooglePoly"){
  341. }
  342. }
  343. });
  344. function compareCoordinates(a, b, delta) {
  345. return Math.abs(a.x - b.x) > delta || Math.abs(a.y - b.y) > delta || Math.abs(a.z - b.z) > delta
  346. }
  347. function getWorldRotation(el) {
  348. var worldQuat = new THREE.Quaternion();
  349. el.object3D.getWorldQuaternion(worldQuat);
  350. //console.log(worldQuat);
  351. let angle = (new THREE.Euler()).setFromQuaternion(worldQuat, 'YXZ');
  352. let rotation = (new THREE.Vector3(THREE.Math.radToDeg(angle.x),
  353. THREE.Math.radToDeg(angle.y), THREE.Math.radToDeg(angle.z) ));
  354. return rotation
  355. }
  356. function updateAvatarPosition() {
  357. let delta = 0.0001;
  358. let avatarName = 'avatar-' + self.kernel.moniker();
  359. var node = self.state.nodes[avatarName];
  360. if (!node) return;
  361. if (!node.aframeObj) return;
  362. let el = document.querySelector('#avatarControl');
  363. if (el) {
  364. //let position = el.object3D.getWorldPosition(); //el.getAttribute('position');
  365. let position = new THREE.Vector3();
  366. el.object3D.getWorldPosition(position);
  367. let rotation = getWorldRotation(el);
  368. // console.log(rotation);
  369. //let rotation = el.getAttribute('rotation');
  370. let lastRotation = self.nodes[avatarName].selfTickRotation;
  371. let lastPosition = self.nodes[avatarName].selfTickPosition;
  372. // let currentPosition = node.aframeObj.getAttribute('position');
  373. // let currentRotation = node.aframeObj.getAttribute('rotation');
  374. if (position && rotation && lastPosition && lastRotation) {
  375. if (compareCoordinates(position, lastPosition, delta) || Math.abs(rotation.y - lastRotation.y) > delta) {
  376. console.log("not equal!!")
  377. vwf_view.kernel.callMethod(avatarName, "followAvatarControl", [position, rotation]);
  378. }
  379. }
  380. self.nodes[avatarName].selfTickRotation = Object.assign({}, rotation);
  381. self.nodes[avatarName].selfTickPosition = Object.assign({}, position);
  382. }
  383. }
  384. function updateHandControllerVR(aName, aSelector) {
  385. //let avatarName = 'avatar-' + self.kernel.moniker();
  386. let delta = 0.0001
  387. let avatarName = aName + self.kernel.moniker();
  388. var node = self.state.nodes[avatarName];
  389. if (!node) return;
  390. if (!node.aframeObj) return;
  391. let el = document.querySelector(aSelector);
  392. if (el) {
  393. //let position = el.object3D.getWorldPosition() //el.getAttribute('position');
  394. let position = new THREE.Vector3();
  395. el.object3D.getWorldPosition(position);
  396. let rotation = getWorldRotation(el);
  397. //let rotation = el.getAttribute('rotation');
  398. let lastRotation = self.nodes[avatarName].selfTickRotation;
  399. let lastPosition = self.nodes[avatarName].selfTickPosition;
  400. // let currentPosition = node.aframeObj.getAttribute('position');
  401. //let currentRotation = node.aframeObj.getAttribute('rotation');
  402. if (position && rotation && lastRotation && lastPosition) {
  403. if (compareCoordinates(position, lastPosition, delta) || compareCoordinates(rotation, lastRotation, delta)) {
  404. console.log("not equal!!");
  405. vwf_view.kernel.callMethod(avatarName, "updateVRControl", [position, rotation]);
  406. }
  407. }
  408. //vwf_view.kernel.callMethod(avatarName, "updateVRControl", [position, rotation]);
  409. self.nodes[avatarName].selfTickPosition = Object.assign({}, position);
  410. self.nodes[avatarName].selfTickRotation = Object.assign({}, rotation);
  411. }
  412. }
  413. function createAvatarControl(aScene) {
  414. let avatarName = 'avatar-' + self.kernel.moniker();
  415. let avatarEl = document.createElement('a-entity');
  416. avatarEl.setAttribute('id', 'avatarControlParent');
  417. if (AFRAME.utils.device.isGearVR()) {
  418. avatarEl.setAttribute('movement-controls', {});//{'controls': 'gamepad'});
  419. //avatarEl.setAttribute('position', '0 0 0');
  420. }
  421. //avatarEl.setAttribute('position', '0 1.6 0');
  422. let controlEl = document.createElement('a-camera');
  423. controlEl.setAttribute('id', 'avatarControl');
  424. //controlEl.setAttribute('wasd-controls', {});
  425. controlEl.setAttribute('look-controls', {pointerLockEnabled: false});
  426. //controlEl.setAttribute('gamepad-controls', {'controller': 0});
  427. //controlEl.setAttribute('gearvr-controls',{});
  428. // controlEl.setAttribute('camera', 'near', 0.51);
  429. //controlEl.setAttribute('position', '0 0 0');
  430. let cursorEl = document.createElement('a-cursor');
  431. cursorEl.setAttribute('id', 'cursor-' + avatarName);
  432. cursorEl.setAttribute('raycaster', {});
  433. cursorEl.setAttribute('raycaster', 'objects', '.intersectable');
  434. cursorEl.setAttribute('raycaster', 'showLine', false);
  435. if (AFRAME.utils.device.isGearVR()) {}
  436. // cursorEl.setAttribute('raycaster', {objects: '.intersectable', showLine: true, far: 100});
  437. // cursorEl.setAttribute('raycaster', 'showLine', true);
  438. controlEl.appendChild(cursorEl);
  439. avatarEl.appendChild(controlEl);
  440. aScene.appendChild(avatarEl);
  441. controlEl.setAttribute('camera', 'active', true);
  442. // let gearVRControlsEl = document.createElement('a-entity');
  443. // gearVRControlsEl.setAttribute('id', 'gearvr-'+avatarName);
  444. // gearVRControlsEl.setAttribute('gearvr-controls', {});
  445. // aScene.appendChild(gearVRControlsEl);
  446. // controlEl.addEventListener('componentchanged', function (evt) {
  447. // if (evt.detail.name === 'position') {
  448. // var eventParameters = evt.detail.newData;
  449. // vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
  450. // }
  451. // if (evt.detail.name === 'rotation') {
  452. // var eventParameters = evt.detail.newData;
  453. // vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
  454. // }
  455. // });
  456. }
  457. function createWMRVR (nodeID, nodeName) {
  458. var newNode = {
  459. "id": nodeName,
  460. "uri": nodeName,
  461. "extends": "http://vwf.example.com/aframe/wmrvrcontroller.vwf",
  462. "properties": {
  463. }
  464. }
  465. if (!self.state.nodes[nodeName]) {
  466. vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  467. vwf_view.kernel.callMethod(nodeName, "createController", []);
  468. //"/../assets/controller/wmrvr.gltf"
  469. }
  470. }
  471. function createGearVRController(nodeID, nodeName) {
  472. var newNode = {
  473. "id": nodeName,
  474. "uri": nodeName,
  475. "extends": "http://vwf.example.com/aframe/gearvrcontroller.vwf",
  476. "properties": {
  477. }
  478. }
  479. if (!self.state.nodes[nodeName]) {
  480. vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  481. vwf_view.kernel.callMethod(nodeName, "createController", []);
  482. //"/../assets/controller/gearvr.gltf"
  483. }
  484. }
  485. function createAvatar(nodeID) {
  486. vwf_view.kernel.fireEvent(nodeID, "createAvatar")
  487. // let avatarID = self.kernel.moniker();
  488. // var nodeName = 'avatar-' + avatarID;
  489. // var newNode = {
  490. // "id": nodeName,
  491. // "uri": nodeName,
  492. // "extends": "http://vwf.example.com/aframe/avatar.vwf"
  493. // }
  494. // vwf_view.kernel.createChild(nodeID, nodeName, newNode);
  495. // vwf_view.kernel.callMethod(nodeName, "createAvatarBody");
  496. }
  497. function randId() {
  498. return '_' + Math.random().toString(36).substr(2, 9);
  499. }
  500. function createGearVRControls() {
  501. let sceneEl = document.querySelector('a-scene');
  502. let avatarControl = document.querySelector('#avatarControlParent');
  503. let gearvr = document.createElement('a-entity');
  504. gearvr.setAttribute('id', 'gearvrcontrol');
  505. gearvr.setAttribute('gearvr-controls', {
  506. 'hand': 'right',
  507. 'model': true });
  508. // gearvr.setAttribute('gearvr-controls', 'hand', 'right');
  509. gearvr.setAttribute('gearvrcontrol', {});
  510. avatarControl.appendChild(gearvr);
  511. }
  512. function createWMRVRControls(hand) {
  513. let sceneEl = document.querySelector('a-scene');
  514. let avatarControl = document.querySelector('#avatarControlParent');
  515. let wmrvr = document.createElement('a-entity');
  516. wmrvr.setAttribute('id', 'wmrvrcontrol' + hand);
  517. wmrvr.setAttribute('windows-motion-controls', '');
  518. wmrvr.setAttribute('windows-motion-controls', 'hand', hand);
  519. wmrvr.setAttribute('wmrvrcontrol', {'hand': hand});
  520. avatarControl.appendChild(wmrvr);
  521. }
  522. });