aframe-components.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601
  1. /*
  2. The MIT License (MIT)
  3. Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contributors. (https://github.com/NikolaySuslov/livecodingspace/blob/master/LICENSE.md)
  4. */
  5. if (typeof AFRAME === 'undefined') {
  6. throw new Error('Component attempted to register before AFRAME was available.');
  7. }
  8. AFRAME.registerComponent('scene-utils', {
  9. init: function () {
  10. const sceneEnterVR = (e) => {
  11. //vwf_view.kernel.callMethod(vwf.application(), "enterVR");
  12. }
  13. const sceneExitVR = (e) => {
  14. //vwf_view.kernel.callMethod(vwf.application(), "exitVR");
  15. }
  16. this.el.sceneEl.addEventListener('enter-vr', sceneEnterVR);
  17. this.el.sceneEl.addEventListener('exit-vr', sceneExitVR);
  18. },
  19. update: function () {
  20. },
  21. tick: function (t) {
  22. }
  23. })
  24. AFRAME.registerComponent('linepath', {
  25. schema: {
  26. color: { default: '#000' },
  27. width: { default: 0.01 },
  28. path: {
  29. default: [
  30. { x: -0.5, y: 0, z: 0 },
  31. { x: 0.5, y: 0, z: 0 }
  32. ]
  33. // Deserialize path in the form of comma-separated vec3s: `0 0 0, 1 1 1, 2 0 3`.
  34. // parse: function (value) {
  35. // return value.split(',').map(coordinates.parse);
  36. // },
  37. // Serialize array of vec3s in case someone does setAttribute('line', 'path', [...]).
  38. // stringify: function (data) {
  39. // return data.map(coordinates.stringify).join(',');
  40. // }
  41. }
  42. },
  43. update: function () {
  44. var material = new MeshLineMaterial({
  45. color: new THREE.Color(this.data.color), //this.data.color
  46. lineWidth: this.data.width
  47. });
  48. var geometry = new THREE.Geometry();
  49. this.data.path.forEach(function (vec3) {
  50. geometry.vertices.push(
  51. new THREE.Vector3(vec3.x, vec3.y, vec3.z)
  52. );
  53. });
  54. let line = new MeshLine();
  55. line.setGeometry(geometry);
  56. //new THREE.Line(geometry, material)
  57. this.el.setObject3D('mesh', new THREE.Mesh(line.geometry, material));
  58. },
  59. remove: function () {
  60. this.el.removeObject3D('mesh');
  61. }
  62. });
  63. AFRAME.registerComponent('gizmo', {
  64. schema: {
  65. mode: { default: 'translate' }
  66. },
  67. update: function (old) {
  68. let modes = ['translate', 'rotate', 'scale'];
  69. if (!this.gizmo) {
  70. let newMode = modes.filter(el => {
  71. return el == this.data.mode
  72. })
  73. if (newMode.length !== 0) {
  74. this.mode = this.data.mode
  75. this.transformControls.setMode(this.mode)
  76. }
  77. }
  78. },
  79. init: function () {
  80. let self = this
  81. this.mode = this.data.mode
  82. let activeCamera = document.querySelector('#avatarControl').getObject3D('camera');
  83. let renderer = this.el.sceneEl.renderer;
  84. this.transformControls = new THREE.TransformControls(activeCamera, renderer.domElement);
  85. this.transformControls.attach(this.el.object3D);
  86. this.el.sceneEl.setObject3D('control-' + this.el.id, this.transformControls);
  87. this.transformControls.addEventListener('change', function (evt) {
  88. // console.log('changed');
  89. var object = self.transformControls.object;
  90. if (object === undefined) {
  91. return;
  92. }
  93. var transformMode = self.transformControls.getMode();
  94. switch (transformMode) {
  95. case 'translate':
  96. vwf_view.kernel.setProperty(object.el.id, 'position',
  97. [object.position.x, object.position.y, object.position.z])
  98. break;
  99. case 'rotate':
  100. // let q = (new THREE.Quaternion()).setFromEuler(new THREE.Euler(
  101. // (object.rotation.x),
  102. // (object.rotation.y),
  103. // (object.rotation.z), 'XYZ'
  104. // ));
  105. // let angle = (new THREE.Euler()).setFromQuaternion(q, 'YXZ');
  106. // vwf_view.kernel.setProperty(object.el.id, 'rotation', [THREE.Math.radToDeg(angle.x), THREE.Math.radToDeg(angle.y), THREE.Math.radToDeg(angle.z)])
  107. vwf_view.kernel.setProperty(object.el.id, 'rotation',
  108. [THREE.Math.radToDeg(object.rotation.x), THREE.Math.radToDeg(object.rotation.y), THREE.Math.radToDeg(object.rotation.z)])
  109. break;
  110. case 'scale':
  111. vwf_view.kernel.setProperty(object.el.id, 'scale',
  112. [object.scale.x, object.scale.y, object.scale.z])
  113. break;
  114. }
  115. //vwf_view.kernel.fireEvent(evt.detail.target.id, "clickEvent")
  116. });
  117. },
  118. remove: function () {
  119. this.transformControls.detach();
  120. this.el.sceneEl.removeObject3D('control-' + this.el.id);
  121. },
  122. tick: function (t) {
  123. this.transformControls.update();
  124. }
  125. });
  126. AFRAME.registerComponent('cursor-listener', {
  127. init: function () {
  128. this.el.addEventListener('click', function (evt) {
  129. console.log('I was clicked at: ', evt.detail.intersection.point);
  130. let cursorID = 'cursor-avatar-' + vwf_view.kernel.moniker();
  131. if (evt.detail.cursorEl.id.includes(vwf_view.kernel.moniker())) {
  132. vwf_view.kernel.fireEvent(evt.detail.intersection.object.el.id, "clickEvent", [vwf_view.kernel.moniker()])
  133. }
  134. //vwf_view.kernel.fireEvent(evt.detail.target.id, "clickEvent")
  135. });
  136. }
  137. });
  138. AFRAME.registerComponent('raycaster-listener', {
  139. init: function () {
  140. let self = this;
  141. this.intersected = false;
  142. this.casters = {}
  143. this.el.addEventListener('raycaster-intersected', function (evt) {
  144. if (evt.detail.el.nodeName == 'A-CURSOR') {
  145. //console.log('CURSOR was intersected at: ', evt.detail.intersection.point);
  146. } else {
  147. if (self.intersected) {
  148. } else {
  149. console.log('I was intersected at: ', evt.target);//evt.detail.getIntersection().point);
  150. //evt.detail.intersection.object.el.id
  151. vwf_view.kernel.fireEvent(evt.target.id, "intersectEvent")
  152. }
  153. self.casters[evt.target.id] = evt.target;
  154. self.intersected = true;
  155. }
  156. });
  157. this.el.addEventListener('raycaster-intersected-cleared', function (evt) {
  158. if (evt.detail.el.nodeName == 'A-CURSOR') {
  159. //console.log('CURSOR was intersected at: ', evt.detail.intersection.point);
  160. } else {
  161. if (self.intersected) {
  162. console.log('Clear intersection');
  163. if (Object.entries(self.casters).length == 1 && (self.casters[evt.target.id] !== undefined)) {
  164. vwf_view.kernel.fireEvent(evt.target.id, "clearIntersectEvent")
  165. }
  166. delete self.casters[evt.target.id]
  167. } else { }
  168. self.intersected = false;
  169. }
  170. });
  171. }
  172. });
  173. AFRAME.registerComponent('envmap', {
  174. /**
  175. * Creates a new THREE.ShaderMaterial using the two shaders defined
  176. * in vertex.glsl and fragment.glsl.
  177. */
  178. init: function () {
  179. const data = this.data;
  180. //this.applyToMesh();
  181. this.el.addEventListener('model-loaded', () => this.applyToMesh());
  182. },
  183. /**
  184. * Update the ShaderMaterial when component data changes.
  185. */
  186. update: function () {
  187. },
  188. getEnvMap: function () {
  189. var path = './assets/textures/skybox2/';
  190. var format = '.jpg';
  191. var urls = [
  192. path + 'px' + format, path + 'nx' + format,
  193. path + 'py' + format, path + 'ny' + format,
  194. path + 'pz' + format, path + 'nz' + format
  195. ];
  196. envMap = new THREE.CubeTextureLoader().load(urls);
  197. envMap.format = THREE.RGBFormat;
  198. return envMap;
  199. },
  200. /**
  201. * Apply the material to the current entity.
  202. */
  203. applyToMesh: function () {
  204. const mesh = this.el.getObject3D('mesh');
  205. //var scene = mesh;
  206. var envMap = this.getEnvMap();
  207. mesh.traverse(function (node) {
  208. if (node.material) {
  209. node.material.side = THREE.BackSide;
  210. node.material.needsUpdate = true;
  211. //side = THREE.DoubleSide; break;
  212. }
  213. });
  214. mesh.traverse(function (node) {
  215. if (node.material && (node.material.isMeshStandardMaterial ||
  216. (node.material.isShaderMaterial && node.material.envMap !== undefined))) {
  217. node.material.envMap = envMap;
  218. node.material.needsUpdate = true;
  219. }
  220. });
  221. // const mesh = this.el.getObject3D('mesh');
  222. // if (mesh) {
  223. // mesh.material = this.material;
  224. // }
  225. },
  226. /**
  227. * On each frame, update the 'time' uniform in the shaders.
  228. */
  229. tick: function (t) {
  230. }
  231. })
  232. //https://threejs.org/examples/webgl_shaders_sky.html
  233. AFRAME.registerComponent('skyshader', {
  234. makeSun: function () {
  235. let sunSphere = new THREE.Mesh(
  236. new THREE.SphereBufferGeometry(20000, 16, 8),
  237. new THREE.MeshBasicMaterial({ color: 0xffffff })
  238. );
  239. sunSphere.position.y = - 700000;
  240. sunSphere.visible = true;
  241. let scene = this.el.sceneEl;
  242. this.el.sceneEl.setObject3D('sun', sunSphere);
  243. },
  244. init: function () {
  245. //let sunSphereEl = document.querySelector('a-scene').querySelector('#sun');
  246. //this.sunSphere = sunSphereEl.object3D;
  247. this.makeSun();
  248. this.sunSphere = this.el.sceneEl.getObject3D('sun');
  249. this.sky = new THREE.Sky();
  250. let scene = this.el.sceneEl;
  251. let effectController = {
  252. turbidity: 5,
  253. rayleigh: 2,
  254. mieCoefficient: 0.005,
  255. mieDirectionalG: 0.8,
  256. luminance: 1,
  257. inclination: 0, // elevation / inclination
  258. azimuth: 0.25, // Facing front,
  259. sun: ! true
  260. };
  261. let uniforms = this.sky.uniforms;
  262. uniforms.turbidity.value = effectController.turbidity;
  263. uniforms.rayleigh.value = effectController.rayleigh;
  264. uniforms.luminance.value = effectController.luminance;
  265. uniforms.mieCoefficient.value = effectController.mieCoefficient;
  266. uniforms.mieDirectionalG.value = effectController.mieDirectionalG;
  267. this.el.setObject3D('mesh', this.sky.mesh);
  268. let distance = 400000;
  269. var theta = Math.PI * (effectController.inclination - 0.5);
  270. var phi = 2 * Math.PI * (effectController.azimuth - 0.5);
  271. this.sunSphere.position.x = distance * Math.cos(phi);
  272. this.sunSphere.position.y = distance * Math.sin(phi) * Math.sin(theta);
  273. this.sunSphere.position.z = distance * Math.sin(phi) * Math.cos(theta);
  274. this.sunSphere.visible = effectController.sun;
  275. this.sky.uniforms.sunPosition.value.copy(this.sunSphere.position);
  276. },
  277. update: function () {
  278. },
  279. tick: function (t) {
  280. }
  281. })
  282. AFRAME.registerComponent('sun', {
  283. init: function () {
  284. this.sunSphere = new THREE.Mesh(
  285. new THREE.SphereBufferGeometry(20000, 16, 8),
  286. new THREE.MeshBasicMaterial({ color: 0xffffff })
  287. );
  288. this.sunSphere.position.y = - 700000;
  289. this.sunSphere.visible = true;
  290. this.el.setObject3D('mesh', this.sunSphere);
  291. },
  292. update: function () {
  293. },
  294. tick: function (t) {
  295. }
  296. })
  297. AFRAME.registerComponent('gearvrcontrol', {
  298. init: function () {
  299. var self = this;
  300. var controllerID = 'gearvr-' + vwf_view.kernel.moniker();
  301. this.el.addEventListener('triggerdown', function (event) {
  302. vwf_view.kernel.callMethod(controllerID, "triggerdown", []);
  303. });
  304. this.el.addEventListener('triggerup', function (event) {
  305. vwf_view.kernel.callMethod(controllerID, "triggerup", []);
  306. });
  307. },
  308. update: function () {
  309. },
  310. tick: function (t) {
  311. }
  312. })
  313. AFRAME.registerComponent('wmrvrcontrol', {
  314. schema: {
  315. hand: { default: 'right' }
  316. },
  317. update: function (old) {
  318. this.hand = this.data.hand;
  319. },
  320. init: function () {
  321. var self = this;
  322. this.hand = this.data.hand;
  323. var controllerID = 'wrmr-' + this.hand + '-' + vwf_view.kernel.moniker();
  324. //this.gearel = document.querySelector('#gearvrcontrol');
  325. this.el.addEventListener('triggerdown', function (event) {
  326. vwf_view.kernel.callMethod(controllerID, "triggerdown", []);
  327. });
  328. this.el.addEventListener('triggerup', function (event) {
  329. vwf_view.kernel.callMethod(controllerID, "triggerup", []);
  330. });
  331. },
  332. tick: function (t) {
  333. }
  334. })
  335. AFRAME.registerComponent('streamsound', {
  336. schema: {
  337. positional: { default: true }
  338. },
  339. init: function () {
  340. var self = this;
  341. let driver = vwf.views["vwf/view/webrtc"];
  342. this.listener = null;
  343. this.stream = null;
  344. if (!this.sound) {
  345. this.setupSound();
  346. }
  347. if (driver) {
  348. //let avatarID = 'avatar-' + vwf.moniker();
  349. let avatarID = this.el.id.slice(0, 27); //avatar-0RtnYBBTBU84OCNcAAFY
  350. let client = driver.state.clients[avatarID];
  351. if (client) {
  352. if (client.connection) {
  353. this.stream = client.connection.stream;
  354. if (this.stream) {
  355. this.audioEl = new Audio();
  356. this.audioEl.srcObject = this.stream;
  357. this.sound.setNodeSource(this.sound.context.createMediaStreamSource(this.stream));
  358. }
  359. }
  360. }
  361. }
  362. },
  363. setupSound: function () {
  364. var el = this.el;
  365. var sceneEl = el.sceneEl;
  366. if (this.sound) {
  367. el.removeObject3D(this.attrName);
  368. }
  369. if (!sceneEl.audioListener) {
  370. sceneEl.audioListener = new THREE.AudioListener();
  371. sceneEl.camera && sceneEl.camera.add(sceneEl.audioListener);
  372. sceneEl.addEventListener('camera-set-active', function (evt) {
  373. evt.detail.cameraEl.getObject3D('camera').add(sceneEl.audioListener);
  374. });
  375. }
  376. this.listener = sceneEl.audioListener;
  377. this.sound = this.data.positional
  378. ? new THREE.PositionalAudio(this.listener)
  379. : new THREE.Audio(this.listener);
  380. el.setObject3D(this.attrName, this.sound);
  381. },
  382. remove: function () {
  383. if (!this.sound) return;
  384. this.el.removeObject3D(this.attrName);
  385. if (this.stream) {
  386. this.sound.disconnect();
  387. }
  388. },
  389. update: function (old) {
  390. },
  391. tick: function (t) {
  392. }
  393. })
  394. AFRAME.registerComponent('viewoffset', {
  395. // fullWidth:
  396. // fullHeight:
  397. // xoffset:
  398. // yoffset:
  399. // width:
  400. // height:
  401. schema: {
  402. fullWidth: { default: window.innerWidth },
  403. fullHeight: { default: window.innerHeight },
  404. xoffset: { default: window.innerWidth / 2 },
  405. yoffset: { default: window.innerHeight / 2 },
  406. width: { default: window.innerWidth },
  407. height: { default: window.innerHeight }
  408. },
  409. init: function () {
  410. var self = this;
  411. this.el.sceneEl.addEventListener('loaded', setOffset);
  412. function setOffset() {
  413. this.setNewOffset();
  414. }
  415. },
  416. update: function (old) {
  417. this.fullWidth = this.data.fullWidth;
  418. this.fullHeight = this.data.fullHeight;
  419. this.xoffset = this.data.xoffset;
  420. this.yoffset = this.data.yoffset;
  421. this.width = this.data.width;
  422. this.height = this.data.height;
  423. //console.log(this.data);
  424. this.setNewOffset();
  425. },
  426. setNewOffset: function () {
  427. this.el.object3DMap.camera.setViewOffset(
  428. this.data.fullWidth,
  429. this.data.fullHeight,
  430. this.data.xoffset,
  431. this.data.yoffset,
  432. this.data.width,
  433. this.data.height)
  434. },
  435. tick: function (t) {
  436. }
  437. })