juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use raycaster over aabb-collider for saber collisions

Browse Source
This commit is contained in:
Kevin Ngo
2018-11-04 19:28:10 +08:00
parent 0139133dc3
commit 36b7032418
7 changed files with 45 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets.html
View File

@@ -60,8 +60,6 @@
<a-mixin id="gameoverAnimation" animation__gameover="dur: 1000; easing: easeOutQuad"></a-mixin>
<a-mixin id="mine" mixin="beat" beat="type: mine"></a-mixin>
<a-mixin id="wall" geometry wall material="shader: wall-shader; tex: #noiseTexture; env: #envmapWallTexture; repeat: 2 2; transparent: true; side: double">
<a-mixin
id="beatScore"
mixin="font"
@@ -70,7 +68,13 @@
animation__opacityout="property: components.text.material.uniforms.opacity.value; from: 1; to: 0; dur: 500; delay: 700; startEvents: startanim"
animation__motionz="property: object3D.position.z; from: -2; to: -6; dur: 500; easing: easeOutQuart; startEvents: startanim"
animation__motiony="property: object3D.position.y; to: 0.1; dur: 500; easing: easeOutQuart; startEvents: startanim"
></a-mixin>
></a-mixin>
<a-mixin
id="wall"
geometry
material="shader: wall-shader; tex: #noiseTexture; env: #envmapWallTexture; repeat: 2 2; transparent: true; side: double"
wall>
<a-mixin
id="beatWrong"

10
src/components/cursor-laser.js
View File

@@ -5,6 +5,10 @@
AFRAME.registerComponent('cursor-laser', {
dependencies: ['geometry'],
schema: {
enabled: {default: true}
},
init: function () {
const el = this.el;
const box = new THREE.Box3();
@@ -21,9 +25,15 @@ AFRAME.registerComponent('cursor-laser', {
this.currentLength = size.y;
},
update: function () {
this.el.object3D.visible = this.data.enabled;
},
tick: function () {
const el = this.el;
if (!this.data.enabled) { return; }
const cursor = el.parentNode.components.cursor;
if (!cursor) { return; }

11
src/components/haptics-saber.js
View File

@@ -2,15 +2,16 @@
* Haptics when sabers collide.
*/
AFRAME.registerComponent('haptics-saber', {
dependencies: ['aabb-collider'],
init: function () {
const el = this.el;
el.setAttribute('haptics__saber', {dur: 100, force: 0.025});
el.addEventListener('hitclosest', evt => {
if (!evt.detail || !evt.detail.el.classList.contains('saber') ||
evt.detail.el === el) { return; }
el.addEventListener('mouseenter', evt => {
if (!evt.detail || !evt.detail.intersectedEl) { return; }
const intersectedEl = evt.detail.intersectedEl;
if (!intersectedEl.classList.contains('blade') || intersectedEl === el) { return; }
this.el.components.haptics__saber.pulse();
});
}

8
src/components/haptics-wall.js
View File

@@ -2,16 +2,14 @@
* Listen to aabb-collider event for wall haptics.
*/
AFRAME.registerComponent('haptics-wall', {
dependencies: ['aabb-collider'],
init: function () {
const el = this.el;
this.isHittingWall = false;
el.setAttribute('haptics__wall', {dur: 50, force: 0.025});
this.checkIfHittingWall = this.checkIfHittingWall.bind(this);
el.addEventListener('hitstart', this.checkIfHittingWall);
el.addEventListener('hitend', this.checkIfHittingWall);
el.addEventListener('mouseenter', this.checkIfHittingWall);
el.addEventListener('mouseleave', this.checkIfHittingWall);
this.tick = AFRAME.utils.throttleTick(this.tick.bind(this), 50);
},
@@ -20,7 +18,7 @@ AFRAME.registerComponent('haptics-wall', {
* On aabb-collider event, check if we are still hitting a wall.
*/
checkIfHittingWall: function () {
const intersectedEls = this.el.components['aabb-collider'].intersectedEls;
const intersectedEls = this.el.components.raycaster__game.intersectedEls;
this.isHittingWall = false;
for (let i = 0; i < intersectedEls.length; i++) {
if (intersectedEls[i].components.wall) {

1
src/components/raycastable.js
View File

@@ -1 +0,0 @@
AFRAME.registerComponent('raycastable', {});

6
src/components/wall.js
View File

@@ -13,13 +13,13 @@ AFRAME.registerComponent('wall', {
pause: function () {
this.el.object3D.visible = false;
this.el.removeAttribute('data-collidable-head');
this.el.removeAttribute('data-collidable-saber');
this.el.removeAttribute('raycastable-game');
},
play: function () {
this.el.object3D.visible = true;
this.el.setAttribute('data-collidable-head', '');
this.el.setAttribute('data-collidable-saber', '');
this.el.setAttribute('raycastable-game', '');
},
tock: function (time, delta) {
@@ -35,6 +35,6 @@ AFRAME.registerComponent('wall', {
this.el.object3D.position.z = 9999;
this.el.pause();
this.el.removeAttribute('data-collidable-head');
this.el.removeAttribute('data-collidable-saber');
this.el.removeAttribute('raycastable-game');
}
});

32
src/index.html
View File

@@ -86,10 +86,6 @@
particleplayer="src: #mineParticlesJSON; pscale: 0.5; scale: 1.4; loop: false; on: explode; img: #sparkImg; count: 20%; animateScale: true; initialScale: 3 1 1; finalScale: 0.2 0.2 1"></a-entity>
<!-- Player. -->
<a-mixin
id="raycaster"
raycaster="objects: [raycastable]; far: 3; showLine: false"
line="opacity: 0.75"></a-mixin>
<a-mixin
id="cursorMesh"
material="shader: flat; transparent: true; src: #cursorMeshImg; depthTest: false"
@@ -114,19 +110,23 @@
bind__menu-controls="page: search.page; selectedChallengeId: menuSelectedChallenge.id"
bind__pauser="enabled: isPlaying"
bind__raycaster="enabled: {{ hand }}RaycasterActive"
bind__raycaster-game="enabled: isPlaying"
bind__saber-controls="bladeEnabled: isPlaying; isPaused: isPaused"
bind__trail="enabled: isPlaying"
haptics="events: mouseenter; dur: 35; force: 0.075"
haptics__beat="eventsFrom: #beatContainer; events: beatcollide{{ hand }}; dur: 80; force: 0.2"
haptics__draw="events: drawblade; dur: 750; force: 0.025"
haptics-saber
haptics-wall
raycaster="objects: [raycastable]; far: 5"
raycaster__game="objects: [raycastable-game]:not(.blade{{ hand }}); far: 1; interval: 50"
saber-controls="hand: {{ hand }}"
thumb-controls
thumb-controls-debug="enabled: false; hand: {{ hand }}; controllerType: vive-controls"
trail="color: {{ bladeColor }}; hand: {{ hand }}">
<a-entity
id="{{ hand }}Laser"
bind__visible="menuActive && activeHand === '{{ hand }}'"
cursor-laser
bind__cursor-laser="enabled: menuActive && activeHand === '{{ hand }}'"
geometry="primitive: cylinder; height: 1; radius: 0.005"
material="color: {{ beamColor }}; shader: flat"
rotation="-90 0 0"></a-entity>
@@ -138,14 +138,10 @@
animation="property: scale; from: 0 0 0; to: 1 1 1; dur: 750; easing: linear; startEvents: drawblade"
scale="0.001 0.001 0.001">
<a-entity
class="blade"
bind__aabb-collider="enabled: isPlaying"
bind-toggle__data-collidable-saber="isPlaying"
aabb-collider="objects: [data-collidable-saber]; interval: 50; collideNonVisible: false"
class="blade blade{{ hand }}"
geometry="primitive: box; height: 0.9; depth: 0.02; width: 0.02"
haptics-saber
haptics-wall
material="shader: flat; color: {{ bladeColor }}"
raycastable-game
position="0 -0.55 0"></a-entity>
</a-entity>
<a-entity
@@ -177,8 +173,8 @@
<a-entity
id="{{ hand }}CursorMesh"
mixin="cursorMesh"
bind__cursor-mesh="active: {{ hand }}RaycasterActive"
cursor-mesh="active: {{ hand }}RaycasterActive; cursorEl: #{{ hand }}Hand"
bind__cursor-mesh="active: {{ hand }}RaycasterActive && !isPLaying"
cursor-mesh="cursorEl: #{{ hand }}Hand"
material="color: {{ beamColor }}"
scale="1.3 1.3 1.3"></a-entity>
{% endmacro %}
@@ -195,8 +191,12 @@
material="shader: flat; src: #stepbackImg; transparent: true; opacity: 0"></a-entity>
{% if not IS_PRODUCTION %}
<a-entity id="mouseCursor" mixin="raycaster" cursor="rayOrigin: mouse"
bind__raycaster="enabled: !inVR"></a-entity>
<a-entity
id="mouseCursor"
bind__raycaster="enabled: !inVR"
mixin="raycaster"
cursor="rayOrigin: mouse"
raycaster="objects: [raycastable]"></a-entity>
<a-entity id="mouseCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #mouseCursor"
bind__cursor-mesh="active: menuActive"></a-entity>
{% endif %}