Skip to content

Commit

Permalink
Exampels: Refine FPS demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mugen87
Mugen87 committed Oct 12, 2018
1 parent 0283aed commit 1463bdf
Show file tree
Hide file tree
Showing 7 changed files with 227 additions and 80 deletions.
97 changes: 66 additions & 31 deletions examples/entity/shooter/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
display: flex;
align-items: center;
justify-content: center;

}
#crosshairs.hidden {
display: none;
Expand All @@ -44,16 +43,21 @@
border: 2px solid #992129;
opacity: 0.5;
}
#hit {
position: absolute;
top: 0;
left: 48%;
}
#hit.hidden {
display: none;
}
#hit>div {
padding: 16px;
}
#hud {
position: absolute;
bottom: 5%;
right: 5%;
background-color: #282828;
font-size: 28px;
color: #ffffff;
width: 128px;
text-align: center;
line-height: 20px;
bottom: 4%;
right: 4%;
}
#hud>div {
padding: 16px;
Expand All @@ -70,7 +74,13 @@
opacity: 0.5;
width: 32px;
}

.ui-container {
background-color: #282828;
font-size: 28px;
color: #ffffff;
text-align: center;
line-height: 20px;
}
</style>
</head>
<body>
Expand All @@ -83,7 +93,11 @@
<div></div>
</section>

<section id="hud">
<section id="hit" class="hidden ui-container">
<div>HIT!</div>
</section>

<section id="hud" class="ui-container">
<div>
<span id="roundsLeft"></span>
<span>|</span>
Expand All @@ -99,6 +113,8 @@

import { FirstPersonControls } from './src/FirstPersonControls.js';
import { Player } from './src/Player.js';
import { Ground } from './src/Ground.js';
import { Target } from './src/Target.js';
import world from './src/World.js';

let camera, scene, renderer, mixer;
Expand All @@ -121,28 +137,17 @@

//

const groundGeometry = new THREE.PlaneBufferGeometry( 200, 200 );
groundGeometry.rotateX( - Math.PI / 2 );
const groundMaterial = new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } );

const ground = new THREE.Mesh( groundGeometry, groundMaterial );
ground.matrixAutoUpdate = false;
scene.add( ground );

const grid = new THREE.GridHelper( 50, 25, 0x000000, 0x000000 );
grid.matrixAutoUpdate = false;
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add( grid );

//

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.8 );
hemiLight.position.set( 0, 100, 0 );
scene.add( hemiLight );

const dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
dirLight.position.set( 0, 20, 10 );
dirLight.castShadow = true;
dirLight.shadow.camera.top = 20;
dirLight.shadow.camera.bottom = 10;
dirLight.shadow.camera.left = - 5;
dirLight.shadow.camera.right = 5;
dirLight.position.set( 0, 30, 30 );
scene.add( dirLight );

//
Expand All @@ -167,6 +172,26 @@

} );

gltfLoader.load( 'model/target.glb', ( gltf ) => {

const targetMesh = gltf.scene.getObjectByName( 'target' );
targetMesh.matrixAutoUpdate = false;
targetMesh.castShadow = true;

const vertices = targetMesh.geometry.attributes.position.array;
const indices = targetMesh.geometry.index.array;

const geometry = new YUKA.MeshGeometry( vertices, indices );
const target = new Target( geometry );

target.setRenderComponent( targetMesh, sync );
target.position.set( 0, 1, - 20 );
target.rotation.fromEuler( Math.PI, Math.PI * 0.5, 0 );

world.add( target );

} );

//

const audioLoader = new THREE.AudioLoader();
Expand All @@ -182,7 +207,7 @@
const impact3 = new THREE.PositionalAudio( listener );

shot.setVolume( 0.3 );
reload.setVolume( 0.3 );
reload.setVolume( 0.1 );

audioLoader.load( 'audio/step1.ogg', ( buffer ) => { step1.setBuffer( buffer ) } );
audioLoader.load( 'audio/step2.ogg', ( buffer ) => { step2.setBuffer( buffer ) } );
Expand All @@ -196,6 +221,7 @@

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.gammaOutput = true;
document.body.appendChild( renderer.domElement );

Expand Down Expand Up @@ -252,13 +278,22 @@

//

const groundGeometry = new THREE.PlaneBufferGeometry( 200, 200 );
groundGeometry.rotateX( - Math.PI / 2 );
const groundMaterial = new THREE.MeshPhongMaterial( { color: 0x999999 } );

const groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
groundMesh.matrixAutoUpdate = false;
groundMesh.receiveShadow = true;

const vertices = groundGeometry.attributes.position.array;
const indices = groundGeometry.index.array;

const geometry = new YUKA.MeshGeometry( vertices, indices );
const obstalce = new YUKA.Obstacle( geometry );
const ground = new Ground( geometry );
ground.setRenderComponent( groundMesh, sync );

world.add( obstalce );
world.add( ground );

}

Expand Down
Binary file added examples/entity/shooter/model/target.glb
View file
Binary file not shown.
115 changes: 74 additions & 41 deletions examples/entity/shooter/src/Blaster.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,17 @@ class Blaster extends Weapon {
this.roundsPerClip = 12;
this.ammo = 48;
this.maxAmmo = 96;

// times are in seconds

this.shotTime = 0.2;
this.reloadTime = 1.5;
this.muzzleFireTime = 0.1;

this.currentTime = 0;
this.endTimeShot = Infinity;
this.endTimeReload = Infinity;
this.endTimeMuzzleFire = Infinity;

this.animations = new Map();
this.sounds = new Map();
Expand All @@ -34,6 +43,68 @@ class Blaster extends Weapon {

}

update( delta ) {

this.currentTime += delta;

// check reload

if ( this.currentTime >= this.endTimeReload ) {

const toReload = this.roundsPerClip - this.roundsLeft;

if ( this.ammo >= toReload ) {

this.roundsLeft = this.roundsPerClip;
this.ammo -= toReload;

} else {

this.roundsLeft = this.ammo;
this.ammo = 0;

}

this.status = Weapon.STATUS.READY;

this.updateUI();

this.endTimeReload = Infinity;

}

// check muzzle fire

if ( this.currentTime >= this.endTimeMuzzleFire ) {

this.muzzleSprite.visible = false;

this.endTimeMuzzleFire = Infinity;

}

// check shoot

if ( this.currentTime >= this.endTimeShot ) {

if ( this.roundsLeft === 0 ) {

this.status = Weapon.STATUS.EMPTY;

} else {

this.status = Weapon.STATUS.READY;

}

this.endTimeShot = Infinity;

}

return this;

}

reload() {

if ( ( this.status === Weapon.STATUS.READY || this.status === Weapon.STATUS.EMPTY ) && this.ammo > 0 ) {
Expand All @@ -56,27 +127,7 @@ class Blaster extends Weapon {

//

setTimeout( () => {

const toReload = this.roundsPerClip - this.roundsLeft;

if ( this.ammo >= toReload ) {

this.roundsLeft = this.roundsPerClip;
this.ammo -= toReload;

} else {

this.roundsLeft = this.ammo;
this.ammo = 0;

}

this.status = Weapon.STATUS.READY;

this.updateUI();

}, this.reloadTime * 1000 );
this.endTimeReload = this.currentTime + this.reloadTime;

}

Expand Down Expand Up @@ -107,11 +158,7 @@ class Blaster extends Weapon {
this.muzzleSprite.visible = true;
this.muzzleSprite.material.rotation = Math.random() * Math.PI;

setTimeout( () => {

this.muzzleSprite.visible = false;

}, 100 );
this.endTimeMuzzleFire = this.currentTime + this.muzzleFireTime;

// adjust ammo

Expand Down Expand Up @@ -145,21 +192,7 @@ class Blaster extends Weapon {
world.addBullet( owner, ray );
this.roundsLeft --;

//

setTimeout( () => {

if ( this.roundsLeft === 0 ) {

this.status = Weapon.STATUS.EMPTY;

} else {

this.status = Weapon.STATUS.READY;

}

}, ( this.shotTime * 1000 ) );
this.endTimeShot = this.currentTime + this.shotTime;

this.updateUI();

Expand Down
18 changes: 12 additions & 6 deletions examples/entity/shooter/src/Bullet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ class Bullet extends Projectile {

super( owner, ray );

this.maxSpeed = 300;
this.maxSpeed = 400; // 400 m/s

this.position.copy( ray.origin );
this.velocity.copy( ray.direction ).multiplyScalar( this.maxSpeed );

const s = 0.5 + ( Math.random() * 2 ); // scale the shot line a bit
const s = 1 + ( Math.random() * 3 ); // scale the shot line a bit

this.scale.set( s, s, s );

Expand All @@ -44,7 +44,9 @@ class Bullet extends Projectile {

super.update( delta );

if ( world.intersectRay( ray, intersectionPoint, normal ) !== null ) {
const obstacle = world.intersectRay( ray, intersectionPoint, normal );

if ( obstacle !== null ) {

// calculate distance from origin to intersection point

Expand All @@ -53,16 +55,20 @@ class Bullet extends Projectile {

if ( distanceToIntersction <= validDistance ) {

// hit!

const audio = this.owner.weapon.sounds.get( 'impact' + MathUtils.randInt( 1, 3 ) );

if ( audio.isPlaying === true ) audio.stop();
audio.play();

// hit!
// inform game entity about hit

world.addBulletHole( intersectionPoint, normal, audio );
this.owner.sendMessage( obstacle, 'hit' );

// add visual feedback

// TODO: inform game entity about hit. need referene to game entity
world.addBulletHole( intersectionPoint, normal, audio );

// remove bullet from world

Expand Down
Loading

0 comments on commit 1463bdf

Please sign in to comment.