new cursor laser beam
This commit is contained in:
Kevin Ngo
59
src/components/laser.js
Normal file
59
src/components/laser.js
Normal file
@@ -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;
|
||||
}
|
||||
});
|
||||
22
src/components/sub-object.js
Normal file
22
src/components/sub-object.js
Normal file
@@ -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);
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -27,11 +27,14 @@
|
||||
<a-asset-item id="logofront-obj" src="assets/models/logofront.obj"></a-asset-item>
|
||||
<a-asset-item id="logoback-obj" src="assets/models/logoback.obj"></a-asset-item>
|
||||
<a-asset-item id="logofront-u-obj" src="assets/models/logofront-u.obj"></a-asset-item>
|
||||
<a-asset-item id="logoSparks" src="assets/models/logosparks.json"></a-asset-item>
|
||||
<a-asset-item id="laserObj" src="assets/models/laser/laser.obj"></a-asset-item>
|
||||
|
||||
<audio id="hoverSound" src="assets/sounds/hover.ogg"></audio>
|
||||
<audio id="saberDraw" src="assets/sounds/saberDraw.wav"></audio>
|
||||
|
||||
<img id="backglowTexture" src="assets/img/stage/backglow.png">
|
||||
<img id="cursorMeshImg" src="assets/img/cursor-mesh.png">
|
||||
<img id="cursorMeshImg" src="assets/models/laser/laser.png">
|
||||
<img id="downIconImg" src="assets/img/downIcon.png">
|
||||
<img id="floor" src="assets/img/stage/floor.png">
|
||||
<img id="gridImg" src="assets/img/grid.png">
|
||||
@@ -40,14 +43,14 @@
|
||||
<img id="sliceImg" src="assets/img/slice.png">
|
||||
<img id="smokeTexture" src="assets/img/stage/smoke.png">
|
||||
|
||||
<a-asset-item src="assets/models/logosparks.json" id="logoSparks"></a-asset-item>
|
||||
|
||||
<a-mixin id="laser" laser geometry="height: 300; depth: 0.16; width: 0.16" materials="neon"></a-mixin>
|
||||
<a-mixin id="slice" slice9="color: #050505; transparent: true; opacity: 0.7; src: #sliceImg; left: 50; right: 52; top: 50; bottom: 52; padding: 0.18"></a-mixin>
|
||||
<a-mixin id="stageLaser" geometry="height: 300; depth: 0.16; width: 0.16" materials="neon"></a-mixin>
|
||||
<a-mixin id="font" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>
|
||||
<a-mixin id="textFont" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>
|
||||
</a-assets>
|
||||
|
||||
<a-entity id="cursorLaser" obj-model="obj: #laserObj" visible="false"></a-entity>
|
||||
|
||||
<a-entity id="container">
|
||||
{% include './templates/stage.html' %}
|
||||
{% include './templates/gameUi.html' %}
|
||||
@@ -59,6 +62,10 @@
|
||||
id="raycaster"
|
||||
raycaster="objects: [raycastable]; far: 3"
|
||||
line="opacity: 0.75"></a-mixin>
|
||||
<a-mixin
|
||||
id="cursorMesh"
|
||||
material="shader: flat; transparent: true; src: #cursorMeshImg; depthTest: false"
|
||||
sub-object="from: #cursorLaser; name: glow"></a-mixin>
|
||||
<a-entity id="cameraRig">
|
||||
<a-entity id="camera" position="0 1.6 0.5" camera look-controls wasd-controls></a-entity>
|
||||
|
||||
@@ -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 }}">
|
||||
|
||||
<a-entity
|
||||
id="{{ hand }}Laser"
|
||||
bind__visible="activeHand === '{{ hand }}'"
|
||||
cursor-laser="hand: {{ hand }}"
|
||||
sub-object="from: #cursorLaser; name: beam"
|
||||
material="color: {{ beamColor }}; shader: flat; transparent: true; opacity: 0.04"></a-entity>
|
||||
|
||||
<a-entity class="saberContainer" rotation="90 0 0">
|
||||
<a-entity
|
||||
class="bladeContainer"
|
||||
@@ -109,18 +122,19 @@
|
||||
<a-entity geometry="primitive: cylinder; height: 0.1834; radius: 0.0085" material="color: {{ beamColor }}; shader: flat; opacity: 0.04"></a-entity>
|
||||
</a-entity>
|
||||
</a-entity>
|
||||
|
||||
<a-entity
|
||||
id="{{ hand }}CursorMesh"
|
||||
mixin="cursorMesh"
|
||||
cursor-mesh="cursorEl: #{{ hand }}Hand"
|
||||
material="color: {{ beamColor }}"
|
||||
scale="1.3 1.3 1.3"></a-entity>
|
||||
{% endmacro %}
|
||||
|
||||
{{ saber('left', 'right', '#FFA8A8', 'pink') }}
|
||||
{{ saber('right', 'left', '#78AAFF', 'cyan') }}
|
||||
</a-entity>
|
||||
|
||||
<a-mixin
|
||||
id="cursorMesh"
|
||||
geometry="primitive: plane; width: 0.26; height: 0.26"
|
||||
material="shader: flat; color: white; transparent: true; src: #cursorMeshImg; side: both; depthTest: false"></a-mixin>
|
||||
<a-entity id="leftCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #leftHand"></a-entity>
|
||||
<a-entity id="rightCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #rightHand"></a-entity>
|
||||
{% if not IS_PRODUCTION %}
|
||||
<a-entity id="mouseCursor" mixin="raycaster" cursor="rayOrigin: mouse"
|
||||
bind__raycaster="enabled: !inVR" raycaster="showLine: false"></a-entity>
|
||||
|
||||
@@ -28,14 +28,14 @@
|
||||
<a-entity geometry="height: 0.05; depth: 100; width: 0.05" position="-4.5 0.65 -32" materials="neon"></a-entity>
|
||||
|
||||
<!-- Lasers left. -->
|
||||
<a-entity class="laser" mixin="laser" position=" -6 2.3 -40"></a-entity>
|
||||
<a-entity class="laser" mixin="laser" position="-10 0 -38"></a-entity>
|
||||
<a-entity class="laser" mixin="laser" position="-14 -3 -36"></a-entity>
|
||||
<a-entity class="stageLaser" mixin="stageLaser" position=" -6 2.3 -40"></a-entity>
|
||||
<a-entity class="stageLaser" mixin="stageLaser" position="-10 0 -38"></a-entity>
|
||||
<a-entity class="stageLaser" mixin="stageLaser" position="-14 -3 -36"></a-entity>
|
||||
|
||||
<!-- Lasers right. -->
|
||||
<a-entity class="laser" mixin="laser" position=" 6 4 -40"></a-entity>
|
||||
<a-entity class="laser" mixin="laser" position="10 2 -38"></a-entity>
|
||||
<a-entity class="laser" mixin="laser" position="14 -1.5 -36"></a-entity>
|
||||
<a-entity class="stageLaser" mixin="stageLaser" position=" 6 4 -40"></a-entity>
|
||||
<a-entity class="stageLaser" mixin="stageLaser" position="10 2 -38"></a-entity>
|
||||
<a-entity class="stageLaser" mixin="stageLaser" position="14 -1.5 -36"></a-entity>
|
||||
|
||||
<a-entity id="smoke1" geometry="primitive: cylinder; radius: 10; height: 15; openEnded: true; segmentsHeight: 1; segmentsRadial: 9" additive material="repeat: 2 1; side: double; fog: true; src: #smokeTexture; shader: flat; transparent: true; color: #111" position="0 1.4 0" animation="property: rotation; from: 0 0 0; to: 0 360 0; dur: 200000; easing: linear; loop: true"></a-entity>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user