alert on escape
This commit is contained in:
parent
c892f91623
commit
a1e75db1c5
49
main.js
49
main.js
@ -82,6 +82,7 @@ const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.inner
|
|||||||
camera.rotation.order = 'YXZ';
|
camera.rotation.order = 'YXZ';
|
||||||
|
|
||||||
const worldOctree = new Octree();
|
const worldOctree = new Octree();
|
||||||
|
const raftOctree = new Octree();
|
||||||
|
|
||||||
const container = document.getElementById( 'container' );
|
const container = document.getElementById( 'container' );
|
||||||
|
|
||||||
@ -109,7 +110,7 @@ const water = new Water(
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
water.rotation.x = - Math.PI / 2;
|
water.rotation.x = - Math.PI / 2;
|
||||||
water.position.y = -.6
|
water.position.y = -.01
|
||||||
scene.add( water );
|
scene.add( water );
|
||||||
|
|
||||||
// Ground
|
// Ground
|
||||||
@ -131,7 +132,7 @@ const groundMaterial = new THREE.MeshPhongMaterial( {
|
|||||||
} )
|
} )
|
||||||
const ground = new THREE.Mesh( groundGeometry, groundMaterial )
|
const ground = new THREE.Mesh( groundGeometry, groundMaterial )
|
||||||
ground.rotation.x = - Math.PI / 2;
|
ground.rotation.x = - Math.PI / 2;
|
||||||
ground.position.set(mazeLength/2, -.5, mazeWidth/2)
|
ground.position.set(mazeLength/2, 0, mazeWidth/2)
|
||||||
ground.receiveShadow = true;
|
ground.receiveShadow = true;
|
||||||
ground.matrixAutoUpdate = false
|
ground.matrixAutoUpdate = false
|
||||||
ground.updateMatrix();
|
ground.updateMatrix();
|
||||||
@ -140,7 +141,7 @@ worldOctree.fromGraphNode( ground )
|
|||||||
|
|
||||||
// Raft
|
// Raft
|
||||||
|
|
||||||
const raftGeometry = new THREE.BoxGeometry( 1.8, .1, .9 )
|
const raftGeometry = new THREE.BoxGeometry( 1.8, .1, .9, 1, 1, 8 )
|
||||||
const raftMaterial = new THREE.MeshPhongMaterial( {
|
const raftMaterial = new THREE.MeshPhongMaterial( {
|
||||||
map : woodTexture,
|
map : woodTexture,
|
||||||
color : 0xFFFFFF,
|
color : 0xFFFFFF,
|
||||||
@ -151,14 +152,17 @@ const raftMaterial = new THREE.MeshPhongMaterial( {
|
|||||||
bumpScale : .1,
|
bumpScale : .1,
|
||||||
depthFunc : 3,
|
depthFunc : 3,
|
||||||
depthTest : true,
|
depthTest : true,
|
||||||
depthWrite: true
|
depthWrite : true,
|
||||||
|
displacementMap : woodTexture,
|
||||||
|
displacementScale: -0.08
|
||||||
} )
|
} )
|
||||||
const raft = new THREE.Mesh( raftGeometry, raftMaterial )
|
const raft = new THREE.Mesh( raftGeometry, raftMaterial )
|
||||||
raft.position.set( mazeLength/2 + .2, -.6, -1 )
|
raft.position.set( mazeLength/2 + .2, 0, -1 )
|
||||||
raft.rotation.y = 1.4
|
raft.rotation.y = 1.4
|
||||||
raft.rotation.order = 'ZXY';
|
raft.rotation.order = 'ZXY';
|
||||||
scene.add(raft)
|
scene.add(raft)
|
||||||
worldOctree.fromGraphNode( raft )
|
worldOctree.fromGraphNode( raft )
|
||||||
|
raftOctree.fromGraphNode( raft )
|
||||||
|
|
||||||
// Maze
|
// Maze
|
||||||
|
|
||||||
@ -184,10 +188,10 @@ const cube = new THREE.Mesh(wallGeometry)
|
|||||||
mazeMap.forEach((row, z) => {
|
mazeMap.forEach((row, z) => {
|
||||||
row.forEach((isWall, x) => {
|
row.forEach((isWall, x) => {
|
||||||
if (isWall) {
|
if (isWall) {
|
||||||
matrix.setPosition(x + .5, 0, z + .5)
|
matrix.setPosition(x + .5, 0.5, z + .5)
|
||||||
maze.setMatrixAt( i, matrix );
|
maze.setMatrixAt( i, matrix );
|
||||||
const clone = cube.clone()
|
const clone = cube.clone()
|
||||||
clone.position.set(x + .5, 0, z + .5)
|
clone.position.set(x + .5, 0.5, z + .5)
|
||||||
worldOctree.fromGraphNode( clone )
|
worldOctree.fromGraphNode( clone )
|
||||||
i++
|
i++
|
||||||
}
|
}
|
||||||
@ -299,7 +303,7 @@ const STEPS_PER_FRAME = 5;
|
|||||||
|
|
||||||
const playerCollider = new Capsule(
|
const playerCollider = new Capsule(
|
||||||
new THREE.Vector3( mazeLength/2, 0.3, mazeWidth/2 ),
|
new THREE.Vector3( mazeLength/2, 0.3, mazeWidth/2 ),
|
||||||
new THREE.Vector3( mazeLength/2, 0.3, mazeWidth/2 ),
|
new THREE.Vector3( mazeLength/2, 0.7, mazeWidth/2 ),
|
||||||
0.3
|
0.3
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -307,14 +311,10 @@ const playerVelocity = new THREE.Vector3();
|
|||||||
const playerDirection = new THREE.Vector3();
|
const playerDirection = new THREE.Vector3();
|
||||||
|
|
||||||
let playerOnFloor = false;
|
let playerOnFloor = false;
|
||||||
let mouseTime = 0;
|
let jumping = false;
|
||||||
|
let escaped = false;
|
||||||
|
|
||||||
const keyStates = {};
|
const keyStates = {};
|
||||||
let jumping = false;
|
|
||||||
|
|
||||||
const vector1 = new THREE.Vector3();
|
|
||||||
const vector2 = new THREE.Vector3();
|
|
||||||
const vector3 = new THREE.Vector3();
|
|
||||||
|
|
||||||
document.addEventListener( 'keydown', ( event ) => {
|
document.addEventListener( 'keydown', ( event ) => {
|
||||||
|
|
||||||
@ -333,8 +333,6 @@ container.addEventListener( 'mousedown', () => {
|
|||||||
|
|
||||||
document.body.requestPointerLock();
|
document.body.requestPointerLock();
|
||||||
|
|
||||||
mouseTime = performance.now();
|
|
||||||
|
|
||||||
} );
|
} );
|
||||||
|
|
||||||
document.body.addEventListener( 'mousemove', ( event ) => {
|
document.body.addEventListener( 'mousemove', ( event ) => {
|
||||||
@ -361,6 +359,13 @@ function onWindowResize() {
|
|||||||
|
|
||||||
function playerCollisions() {
|
function playerCollisions() {
|
||||||
|
|
||||||
|
if ( !escaped && raftOctree.capsuleIntersect( playerCollider ) ) {
|
||||||
|
|
||||||
|
escaped = true;
|
||||||
|
alert("Congrats! You escaped.");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
const result = worldOctree.capsuleIntersect( playerCollider );
|
const result = worldOctree.capsuleIntersect( playerCollider );
|
||||||
|
|
||||||
playerOnFloor = false;
|
playerOnFloor = false;
|
||||||
@ -488,9 +493,9 @@ function teleportPlayerIfOob() {
|
|||||||
|
|
||||||
if ( camera.position.y <= - 25 ) {
|
if ( camera.position.y <= - 25 ) {
|
||||||
|
|
||||||
playerCollider.start.set( mazeLength/2, 0.2, mazeWidth/2 );
|
playerCollider.start.set( mazeLength/2, 0.3, mazeWidth/2 );
|
||||||
playerCollider.end.set( mazeLength/2, 0.3, mazeWidth/2 );
|
playerCollider.end.set( mazeLength/2, 0.7, mazeWidth/2 );
|
||||||
playerCollider.radius = 0.2;
|
playerCollider.radius = 0.3;
|
||||||
camera.position.copy( playerCollider.end );
|
camera.position.copy( playerCollider.end );
|
||||||
camera.rotation.set( 0, 0, 0 );
|
camera.rotation.set( 0, 0, 0 );
|
||||||
|
|
||||||
@ -501,8 +506,6 @@ function teleportPlayerIfOob() {
|
|||||||
|
|
||||||
function animate() {
|
function animate() {
|
||||||
|
|
||||||
requestAnimationFrame( animate );
|
|
||||||
|
|
||||||
const deltaTime = Math.min( 0.05, clock.getDelta() ) / STEPS_PER_FRAME;
|
const deltaTime = Math.min( 0.05, clock.getDelta() ) / STEPS_PER_FRAME;
|
||||||
|
|
||||||
// we look for collisions in substeps to mitigate the risk of
|
// we look for collisions in substeps to mitigate the risk of
|
||||||
@ -523,10 +526,12 @@ function animate() {
|
|||||||
water.material.uniforms[ 'time' ].value += 1.0 / 100.0;
|
water.material.uniforms[ 'time' ].value += 1.0 / 100.0;
|
||||||
raft.rotation.z = 0.12 * Math.cos( 1.2 * time )
|
raft.rotation.z = 0.12 * Math.cos( 1.2 * time )
|
||||||
raft.rotation.x = 0.06 * Math.cos( time )
|
raft.rotation.x = 0.06 * Math.cos( time )
|
||||||
raft.position.y = -0.59 + 0.05 * (0.5 * Math.sin( 1.2 * time ) + 0.5 * Math.sin( time ))
|
raft.position.y = 0.05 * (0.5 * Math.sin( 1.2 * time ) + 0.5 * Math.sin( time ))
|
||||||
|
|
||||||
renderer.render( scene, camera );
|
renderer.render( scene, camera );
|
||||||
|
|
||||||
stats.update();
|
stats.update();
|
||||||
|
|
||||||
|
requestAnimationFrame( animate );
|
||||||
|
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user