From 0061a781a440dcc2ad2cecf5d9626b5f782616fd Mon Sep 17 00:00:00 2001 From: Kevin Ngo Date: Tue, 25 Sep 2018 05:40:08 -0700 Subject: [PATCH] new cursor laser beam --- assets/models/laser/laser.jpg | Bin 0 -> 1522 bytes assets/models/laser/laser.obj | 240 ++++++++++++++++++++++++++++++++++ assets/models/laser/laser.png | Bin 0 -> 2474 bytes package-lock.json | 5 + package.json | 2 +- src/components/laser.js | 59 +++++++++ src/components/sub-object.js | 22 ++++ src/index.html | 38 ++++-- src/templates/stage.html | 12 +- 9 files changed, 359 insertions(+), 19 deletions(-) create mode 100644 assets/models/laser/laser.jpg create mode 100644 assets/models/laser/laser.obj create mode 100644 assets/models/laser/laser.png create mode 100644 src/components/laser.js create mode 100644 src/components/sub-object.js diff --git a/assets/models/laser/laser.jpg b/assets/models/laser/laser.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e758a4f06afb6e2658a5892ad2afc4978ec9a53d GIT binary patch literal 1522 zcmb7?e>~H99LK*u%!Zg%rc1R>rEv6+>qHm2i$^<`!z_hF=m%|+8kI*jcO-5*9hIDi z$d9(BQLzmZ<5CTsYolo`^CPaV5i>P8c2kemJ?q5Q$3Qv&8i4d3 z1nI5byaR?{J$hp_4~%#Vavqd{`F4FZ0)`Ptgc0H|8AHjxJ30}7K>>7t4uco~!hkRa z)ZGSXdfA{641ymvf{hTyC=f!Ln&`j$5Ps`{mH-6ml_C&ENRxLt5W>uNeC)DtYhV-- zb>v3N1KTvoB9rmU8@?#Lxj5+CTtc*TwG|cfk7*!ACkGb5pk57(0lWY$RZVE0MRqb2 zjUrAro~PlC>`QoK7UT~vZ(siS**K?yVSh;ZaXP~MZ84ohYCiQ<8F?HAa*LQ z&5G*RMnP%i zH1(gMl?(RDQ{~lXExT}~RlMz}H$ma_fi{A$5hZ7ly!*}TG_1V1zUG2`iRHu2?Db=- zjo*;BS7nt~ZhK}dByV3|)i@JBD4Jk~T9QxUkINe9QSL4osTX~nk^)TK>o~KY@3kva zL$W-(!MUF}O_!Ew6IAeWaoKaqcPj5NXWtDK#J!e2{L$cH|BZ)D4|#ZKdbBI;s~UJM z6@% ze9l$}bV+3Dp_ML*Vzy@?Bk6kKDq;lCFTCalQyy>Q{R7yiODS?ezZZi9Fa! zIF`+}3T$cKNW@81ko#btAcCFXO`scEO-NzMYkWFt(SGtUSI5w1GWKx&6z_r6{WSjL z5Gl6)+P=z%nvT2|%(xQy@SyRkrr9m=VJAC>X%+!HrKC-@GB0$((!%P4$(jx+V?ZjA zYttBp>4+hGZIzN|{WAw2jPAzaSA-0axygPvlDfhv{$@Fh{8}{MYa8tXR<2BOL=(Hm zo!AjPY+*K)^9sC*D_{+aOQ*jnI}o>PNdS}G>hJ7=_gsNvqrcDb`i#jn3-78y9n-Yq z6Ic$-^rg(yE!O)Rz0bVg%$kc;^L{khD3&z+>b2{X&5115D7U3tDXzCNbIl}>h#psv zeZ?iT&P5%hTf-y9`IW!P1)H%Yg^B5Vf=?T zc0xcKIEATK#oJ^C2;=Z~2*u70Ox^_i^-J+rstW7i8IeK5!bf$Z;f%cDPIPRqaK@4R zba#>P7YFlAwKKQqlq+|qGV3%8P|-ub*YHd75pKR$M~N^r>DOZ?6p|FD{mT+x?>TW_ zFgjwKHMXZEh1i^^8QaNyz}Kc_xP=6~-xC1W2y6H+tY3i%0?yONJM4K8!I3^G0nH~l ZL8K&N+L!k39^#(=eLIHnZyluW(Vqw0M~eUe literal 0 HcmV?d00001 diff --git a/assets/models/laser/laser.obj b/assets/models/laser/laser.obj new file mode 100644 index 0000000..552386a --- /dev/null +++ b/assets/models/laser/laser.obj @@ -0,0 +1,240 @@ +# Blender v2.78 (sub 0) OBJ File: '' +# www.blender.org +o beam +v 0.000000 0.006935 -0.006970 +v 0.000000 0.002125 0.964190 +v 0.005422 0.004324 -0.006970 +v 0.001662 0.001325 0.964190 +v 0.006761 -0.001543 -0.006970 +v 0.002072 -0.000473 0.964190 +v 0.003009 -0.006248 -0.006970 +v 0.000922 -0.001915 0.964190 +v -0.003009 -0.006248 -0.006970 +v -0.000922 -0.001915 0.964190 +v -0.006761 -0.001543 -0.006970 +v -0.002072 -0.000473 0.964190 +v -0.005422 0.004324 -0.006970 +v -0.001662 0.001325 0.964190 +v 0.000000 0.008160 -0.006357 +v 0.000000 0.005860 0.703495 +v 0.006380 0.005088 -0.006357 +v 0.004582 0.003654 0.703495 +v 0.007956 -0.001816 -0.006357 +v 0.005713 -0.001304 0.703495 +v 0.003541 -0.007352 -0.006357 +v 0.002543 -0.005280 0.703495 +v -0.003541 -0.007352 -0.006357 +v -0.002543 -0.005280 0.703495 +v -0.007956 -0.001816 -0.006357 +v -0.005713 -0.001304 0.703495 +v -0.006380 0.005088 -0.006357 +v -0.004582 0.003654 0.703495 +v -0.003177 0.003391 0.012037 +v -0.000974 0.001039 0.157890 +v 0.000670 0.004598 0.012037 +v 0.000205 0.001409 0.157890 +v 0.004013 0.002343 0.012037 +v 0.001230 0.000718 0.157890 +v 0.004334 -0.001677 0.012037 +v 0.001328 -0.000514 0.157890 +v 0.001391 -0.004434 0.012037 +v 0.000426 -0.001359 0.157890 +v -0.002599 -0.003852 0.012037 +v -0.000797 -0.001180 0.157890 +v -0.004632 -0.000369 0.012037 +v -0.001420 -0.000113 0.157890 +v 0.000000 0.004484 -0.007003 +v -0.000000 0.001374 0.449267 +v 0.003506 0.002796 -0.007003 +v 0.001074 0.000857 0.449267 +v 0.004372 -0.000998 -0.007003 +v 0.001340 -0.000306 0.449267 +v 0.001946 -0.004040 -0.007003 +v 0.000596 -0.001238 0.449267 +v -0.001946 -0.004040 -0.007003 +v -0.000596 -0.001238 0.449267 +v -0.004372 -0.000998 -0.007003 +v -0.001340 -0.000306 0.449267 +v -0.003506 0.002796 -0.007003 +v -0.001074 0.000857 0.449267 +vt 0.9512 0.8812 +vt 0.0114 0.8659 +vt 0.0114 0.8812 +vt 0.9512 0.8964 +vt 0.0114 0.8812 +vt 0.0114 0.8964 +vt 0.9512 0.9117 +vt 0.0114 0.8964 +vt 0.0114 0.9117 +vt 0.9512 0.9270 +vt 0.0114 0.9117 +vt 0.0114 0.9270 +vt 0.0114 0.9422 +vt 0.9512 0.9270 +vt 0.0114 0.9270 +vt 0.0114 0.9575 +vt 0.9512 0.9422 +vt 0.0114 0.9422 +vt 0.9512 0.9728 +vt 0.0114 0.9575 +vt 0.0114 0.9728 +vt 0.9512 0.8812 +vt 0.0114 0.8659 +vt 0.0114 0.8812 +vt 0.9512 0.8964 +vt 0.0114 0.8812 +vt 0.0114 0.8964 +vt 0.9512 0.9117 +vt 0.0114 0.8964 +vt 0.0114 0.9117 +vt 0.9512 0.9270 +vt 0.0114 0.9117 +vt 0.0114 0.9270 +vt 0.9512 0.9422 +vt 0.0114 0.9270 +vt 0.0114 0.9422 +vt 0.0114 0.9575 +vt 0.9512 0.9422 +vt 0.0114 0.9422 +vt 0.9512 0.9728 +vt 0.0114 0.9575 +vt 0.0114 0.9728 +vt 0.9512 0.8812 +vt 0.0114 0.8659 +vt 0.0114 0.8812 +vt 0.9512 0.8964 +vt 0.0114 0.8812 +vt 0.0114 0.8964 +vt 0.0114 0.9117 +vt 0.9512 0.8964 +vt 0.0114 0.8964 +vt 0.9512 0.9270 +vt 0.0114 0.9117 +vt 0.0114 0.9270 +vt 0.9512 0.9422 +vt 0.0114 0.9270 +vt 0.0114 0.9422 +vt 0.9512 0.9575 +vt 0.0114 0.9422 +vt 0.0114 0.9575 +vt 0.9512 0.9728 +vt 0.0114 0.9575 +vt 0.0114 0.9728 +vt 0.9512 0.8812 +vt 0.0114 0.8659 +vt 0.0114 0.8812 +vt 0.9512 0.8964 +vt 0.0114 0.8812 +vt 0.0114 0.8964 +vt 0.9512 0.9117 +vt 0.0114 0.8964 +vt 0.0114 0.9117 +vt 0.9512 0.9270 +vt 0.0114 0.9117 +vt 0.0114 0.9270 +vt 0.9512 0.9422 +vt 0.0114 0.9270 +vt 0.0114 0.9422 +vt 0.9512 0.9575 +vt 0.0114 0.9422 +vt 0.0114 0.9575 +vt 0.0114 0.9728 +vt 0.9512 0.9575 +vt 0.0114 0.9575 +vt 0.9512 0.8659 +vt 0.9512 0.8812 +vt 0.9512 0.8964 +vt 0.9512 0.9117 +vt 0.9512 0.9422 +vt 0.9512 0.9575 +vt 0.9512 0.9575 +vt 0.9512 0.8659 +vt 0.9512 0.8812 +vt 0.9512 0.8964 +vt 0.9512 0.9117 +vt 0.9512 0.9270 +vt 0.9512 0.9575 +vt 0.9512 0.9575 +vt 0.9512 0.8659 +vt 0.9512 0.8812 +vt 0.9512 0.9117 +vt 0.9512 0.9117 +vt 0.9512 0.9270 +vt 0.9512 0.9422 +vt 0.9512 0.9575 +vt 0.9512 0.8659 +vt 0.9512 0.8812 +vt 0.9512 0.8964 +vt 0.9512 0.9117 +vt 0.9512 0.9270 +vt 0.9512 0.9422 +vt 0.9512 0.9728 +s off +f 2/1 3/2 1/3 +f 4/4 5/5 3/6 +f 6/7 7/8 5/9 +f 8/10 9/11 7/12 +f 9/13 12/14 11/15 +f 11/16 14/17 13/18 +f 14/19 1/20 13/21 +f 16/22 17/23 15/24 +f 18/25 19/26 17/27 +f 20/28 21/29 19/30 +f 22/31 23/32 21/33 +f 24/34 25/35 23/36 +f 25/37 28/38 27/39 +f 28/40 15/41 27/42 +f 30/43 31/44 29/45 +f 32/46 33/47 31/48 +f 33/49 36/50 35/51 +f 36/52 37/53 35/54 +f 38/55 39/56 37/57 +f 40/58 41/59 39/60 +f 42/61 29/62 41/63 +f 44/64 45/65 43/66 +f 46/67 47/68 45/69 +f 48/70 49/71 47/72 +f 50/73 51/74 49/75 +f 52/76 53/77 51/78 +f 54/79 55/80 53/81 +f 55/82 44/83 43/84 +f 2/1 4/85 3/2 +f 4/4 6/86 5/5 +f 6/7 8/87 7/8 +f 8/10 10/88 9/11 +f 9/13 10/89 12/14 +f 11/16 12/90 14/17 +f 14/19 2/91 1/20 +f 16/22 18/92 17/23 +f 18/25 20/93 19/26 +f 20/28 22/94 21/29 +f 22/31 24/95 23/32 +f 24/34 26/96 25/35 +f 25/37 26/97 28/38 +f 28/40 16/98 15/41 +f 30/43 32/99 31/44 +f 32/46 34/100 33/47 +f 33/49 34/101 36/50 +f 36/52 38/102 37/53 +f 38/55 40/103 39/56 +f 40/58 42/104 41/59 +f 42/61 30/105 29/62 +f 44/64 46/106 45/65 +f 46/67 48/107 47/68 +f 48/70 50/108 49/71 +f 50/73 52/109 51/74 +f 52/76 54/110 53/77 +f 54/79 56/111 55/80 +f 55/82 56/112 44/83 +o glow +v -0.087472 -0.087472 0.003930 +v 0.087472 -0.087472 0.003930 +v -0.087472 0.087472 0.003930 +v 0.087472 0.087472 0.003930 +vt 0.8261 0.8360 +vt 0.0459 0.0558 +vt 0.8261 0.0558 +vt 0.0459 0.8360 +s off +f 58/113 59/114 57/115 +f 58/113 60/116 59/114 diff --git a/assets/models/laser/laser.png b/assets/models/laser/laser.png new file mode 100644 index 0000000000000000000000000000000000000000..a7f858872c78f7c59e84b4478bc26bb8b3c45162 GIT binary patch literal 2474 zcmbW3`8(8$0>-~zGh-)*vdzdoQG+a(mT>-` zh5i#!;eYxK?n*xZh}|R-tS>}-zXqrh!`S;2VN4WL||FRfZ zXP?BM$7yfbQgYq(w(Kk{P%CIV3Id9&b)cqfyu~mzHeS!BuSb8ZZS5DMgn=ZqGASL^ z#e8=)HR>&^sP5ofvkawP;X8t@4GjZ0aI#rg-!DL+)~q97tp$t7PD1tuf4sgkTND;dwi9mmf^@T36)F>^8@r#~oP@j05zte|cl>n8Me3ko=E-+u z&q_XU>254(9glbp9dLyyXvoR`OGytqA*)Dt>bBLqYoQ3>@U9D&jn@J=F?YhVus3Uz zxxPf4y&7Kj%_iYkOnO<^k`5K-bAO16j-MP@Jj2=05YC95&8zPsH@jl3H6F}`phFg^ zhQeb{nx2p?)L|#GiC=eWADC6pFfakrz@pSi=S1>vC0PzhDg^$ha!G0A*}b8_NH-(T$kLT8)Pcp6u z^&lFUk6Cw~72#bWm5#$4URnC#nZ+zQj`1Mi$cV@%mFop=Zv4w@A)RF-63P-8{hBxx z%62D{bYAG?STmS%hOVJe{ax+DLeOgK)G=*uF;;1K4bOUuBbP1UZ7>;On3xyjRp{iKpIQJh2T)+{o9u2tgg1kdgF&Cr2$f6K12*VPm@ zd>u$b&WHnbVTfH{?@>NGnvF*;0WhcKL}VlyEUbaQXN?zmh*eawkj4jqqXSd;A0GY)!<%9g3s{A7 z>*iCp|q-K6Gl|&ddd~U(w^S$046iiik?)z7dTlTIIV8PPAZ8^2IED# z22R!lp$JwtwvK}}mg;Y5S&n)tf`Y*nZDG;mUCcFD=QaT|Gwgx}kr52W8z6ejb=jeh zZgh{6xOU^5TjI?fT#%`)BKVhoj5yxvinY>{M z-D}qWE8MCnTNYS7w?FgBaZX^yHSAco^Xxb|%aK`aX*MpotgtcX5v$VsL~<<_BZIhw zWOC1OuhlLWe53KA=g+fMpw+OZiXQG!c+}v|_2Zg>C#{f5;F|b&!I2P*TwvaY)j}0@ z_|vb{+)A>C>wy%s%s4|zsolBO2Tw}{BXNfm#;C&n7h@1}*MaC4{S?IObKS3Ig}Cmo zrUE-%vg&$1Jhq1K4jhBCPZvY&-LpdN$>jqEl-&-1d&e{SIo`joy`o>>6sY!xp2gVD zG(|=Rh;vz=>KYs0)06PHD8rYWQw5@7Yr}i{$>hzTup`Ji&JaAIMa>mBdP#i;&gS(9 zIcBJE73a#`_pbv7lw9xSRlP?orhTnH>d!wB6Tg$?`K`(5wIQfRZ?lazt_B$;cTzzX zve8H%KM*woUIdmmSK!dk5K z*BYO2GjxN+AhVxff~KDInbw@1n2LVq!L7>#L2q%SH^`Ts>o5^*eg2r;MikU4k&B*B zE5X|{Uk8P=aHSV9g+qPT6rNZu=Gr@@cEy~&$dgB*Y69ubp_pHAl>G= zvs#3w;JZq?V`p2iw-Ng^@umq>>c)FCu3t8jUH-16d{H7-8u!TQ86q_towF9qo&eqf zs)zR-Gq#CrcdEK@!h!+p`M(t0}-?S&W9vnS!J7~r213Qkp8_n~r62T`+tbB)E zJ=_wqv@o`8 z9V*xa$;XQX50iKG5j}5><(U4 z?5})*X#^GxRejG@`}0CqRaPdLrgOCVeuL%X%-LLaK4B|bP&N_m96a~1TV%1#K(Ue* zSm^S;_M#x>7XUcg(Oe&j@xlh=#n?qs9>#nFAPLEz8T>eA)$MFRvLf46MVr;Ak!kLS zmmSNlKO8ZX5BiPT^YURf`AV>qQG55@*!E2n>nZF^)g#dV>j~QbA<+L~+`Kxzs-sK% VLd_bC^UntZh;}Z77dAh|{Tsq=aa#ZY literal 0 HcmV?d00001 diff --git a/package-lock.json b/package-lock.json index b248e07..909a0fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -157,6 +157,11 @@ "resolved": "https://registry.npmjs.org/aframe-slice9-component/-/aframe-slice9-component-1.0.0.tgz", "integrity": "sha1-+w+EQdrdHosRzCRRK6eqaS1iK+E=" }, + "aframe-state-component": { + "version": "5.0.0-beta6", + "resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-5.0.0-beta6.tgz", + "integrity": "sha512-2N4V1Atq4xHEfaiEJD+ryQPBZmCA4gZGV2bbYPWImGAuFiEthaqvXp64TI0K82JjWaIEMeUTSKF1FTeCtyLq3w==" + }, "aframe-super-keyboard": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/aframe-super-keyboard/-/aframe-super-keyboard-2.0.2.tgz", diff --git a/package.json b/package.json index 862b5f0..d3efd5a 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "aframe-particleplayer-component": "github:supermedium/aframe-particleplayer-component#master", "aframe-proxy-event-component": "^1.1.1", "aframe-slice9-component": "^1.0.0", - "aframe-state-component": "5.0.0-beta6", + "aframe-state-component": "^5.0.0-beta6", "aframe-super-keyboard": "2.0.2", "algoliasearch": "^3.29.0", "ansi-html": "0.0.7", diff --git a/src/components/laser.js b/src/components/laser.js new file mode 100644 index 0000000..03d24d5 --- /dev/null +++ b/src/components/laser.js @@ -0,0 +1,59 @@ +/** + * Laser beam. + * Automatically set length on intersection. + */ +AFRAME.registerComponent('cursor-laser', { + dependencies: ['sub-object'], + + schema: { + hand: {type: 'string'} + }, + + init: function () { + const el = this.el; + const box = new THREE.Box3(); + const size = new THREE.Vector3(); + + this.currentLength = undefined; + this.originalSize = undefined; + + // Calculate size to position beam at tip of controller. + el.addEventListener('subobjectloaded', () => { + box.setFromObject(el.getObject3D('mesh')); + box.getSize(size); + el.object3D.position.z -= size.z; + this.originalSize = size.z; + this.currentLength = size.z; + }); + }, + + tick: function () { + const el = this.el; + + // Not yet ready. + if (this.currentLength === undefined) { return; } + + const cursor = el.parentNode.components.cursor; + if (!cursor) { return; } + + // Toggle beam. + const intersectedEl = cursor.intersectedEl; + + if (!intersectedEl) { + // Retract the beam if not intersecting. + el.object3D.position.z = this.originalSize * -0.35; + el.object3D.scale.x = 0.25; + el.object3D.scale.z = this.originalSize * 0.35; + this.currentLength = this.originalSize * 0.35; + return; + } + + // Set appropriate length of beam on intersection. + const intersection = el.parentNode.components.raycaster.intersections[0]; + const ratio = intersection.distance / this.currentLength; + el.object3D.scale.x = 1; + el.object3D.position.z *= ratio; + el.object3D.scale.z *= ratio; + this.currentLength = el.object3D.scale.z; + } +}); diff --git a/src/components/sub-object.js b/src/components/sub-object.js new file mode 100644 index 0000000..7b7d5ee --- /dev/null +++ b/src/components/sub-object.js @@ -0,0 +1,22 @@ +/** + * Pull a submesh out of a model file. + */ +AFRAME.registerComponent('sub-object', { + schema: { + from: {type: 'selector'}, + name: {type: 'string'} + }, + + init: function () { + var el = this.el; + var data = this.data; + + data.from.addEventListener('model-loaded', evt => { + const model = evt.detail.model; + const subset = model.getObjectByName(data.name); + el.setObject3D('mesh', subset.clone()); + el.setAttribute('material', 'shader', 'flat'); + el.emit('subobjectloaded', null, false); + }); + } +}); diff --git a/src/index.html b/src/index.html index 3099966..20b778b 100644 --- a/src/index.html +++ b/src/index.html @@ -27,11 +27,14 @@ + + + - + @@ -40,14 +43,14 @@ - - - + + + {% include './templates/stage.html' %} {% include './templates/gameUi.html' %} @@ -59,6 +62,10 @@ id="raycaster" raycaster="objects: [raycastable]; far: 3" line="opacity: 0.75"> + @@ -67,11 +74,17 @@ mixin="raycaster" bind__hand-swapper="enabled: {{ otherHand }}RaycasterActive" bind__pauser="enabled: !menu.active" - bind__raycaster="enabled: {{ hand }}RaycasterActive; showLine: {{ hand }}RaycasterActive" + bind__raycaster="enabled: {{ hand }}RaycasterActive" haptics="events: mouseenter; dur: 35; force: 0.075" - line="color: {{ color }}" saber-controls="hand: {{ hand }}"> + + + + {% endmacro %} {{ saber('left', 'right', '#FFA8A8', 'pink') }} {{ saber('right', 'left', '#78AAFF', 'cyan') }} - - - {% if not IS_PRODUCTION %} diff --git a/src/templates/stage.html b/src/templates/stage.html index 9af0014..0e75552 100644 --- a/src/templates/stage.html +++ b/src/templates/stage.html @@ -28,14 +28,14 @@ - - - + + + - - - + + +