Kevin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Menu

Browse Source 
Still a WIP, but users will be able to choose some settings, select language or maybe use the static website version
This commit is contained in:
LJ5O
2024-03-06 16:37:11 +01:00
parent 5b78deb8af
commit 7b31a9a632
5 changed files with 107 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/main.js
View File

@@ -5,58 +5,62 @@ import * as PlayerMovement from './utils/playerMovement.js';
import * as Animations from './utils/animateMesh.js';
import * as PlayerCollisions from './utils/playerCollisions.js';
let Clock = new THREE.Clock();
THREE.Cache.enabled = true;//So we can request several time the same file without worrying : https://threejs.org/docs/#api/en/loaders/FileLoader
// Function used to start Threejs, called from index.html
function startThreeJS(){
let Clock = new THREE.Clock();
THREE.Cache.enabled = true;//So we can request several time the same file without worrying : https://threejs.org/docs/#api/en/loaders/FileLoader
const APP_DEBUG = false;//Turn true to show player position in browser console
/* --------------------- */
/* | SCENE CREATION | */
/* --------------------- */
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0EB1D2);
const camera = getCamera();
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//Here, we create/load every asset used, and add it in the scene
addAssetsOnScene(scene).then(assets => {
const APP_DEBUG = false;//Turn true to show player position in browser console
/* --------------------- */
/* | MOVEMENT | */
/* | SCENE CREATION | */
/* --------------------- */
// Events to listen keyboard inputs
document.addEventListener('keydown', PlayerMovement.handleKeyDown);
document.addEventListener('keyup', PlayerMovement.handleKeyUp);
PlayerMovement.initPhoneMovement();
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0EB1D2);
const camera = getCamera();
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//Here, we create/load every asset used, and add it in the scene
addAssetsOnScene(scene).then(assets => {
/* --------------------- */
/* | MOVEMENT | */
/* --------------------- */
// Events to listen keyboard inputs
document.addEventListener('keydown', PlayerMovement.handleKeyDown);
document.addEventListener('keyup', PlayerMovement.handleKeyUp);
PlayerMovement.initPhoneMovement();
/* --------------------- */
/* | ANIMATIONS | */
/* --------------------- */
//We can add an animationMixer on objects, and define ready to play actions on objects
//https://threejs.org/docs/#api/en/animation/AnimationAction
Animations.addAnimationMixerOnMesh(assets.player, ["Walk"]);
Animations.addAnimationMixerOnMesh(assets.nameplateModel, ["Animation"]);assets.nameplateModel.animationActions.Animation.play();
Animations.addAnimationMixerOnMesh(assets.worldStatue, ["Animation"]);assets.worldStatue.animationActions.Animation.play();
Animations.addAnimationMixerOnMesh(assets.printerStatue, ["Printing"]);assets.printerStatue.animationActions.Printing.play();
/* --------------------- */
/* | ANIMATIONS | */
/* --------------------- */
//We can add an animationMixer on objects, and define ready to play actions on objects
//https://threejs.org/docs/#api/en/animation/AnimationAction
Animations.addAnimationMixerOnMesh(assets.player, ["Walk"]);
Animations.addAnimationMixerOnMesh(assets.nameplateModel, ["Animation"]);assets.nameplateModel.animationActions.Animation.play();
Animations.addAnimationMixerOnMesh(assets.worldStatue, ["Animation"]);assets.worldStatue.animationActions.Animation.play();
Animations.addAnimationMixerOnMesh(assets.printerStatue, ["Printing"]);assets.printerStatue.animationActions.Printing.play();
function animate() {
requestAnimationFrame( animate );
function animate() {
requestAnimationFrame( animate );
if(APP_DEBUG)console.log("Player position X : "+assets.player.scene.position.x+ " Y : "+assets.player.scene.position.y);
if(APP_DEBUG)console.log("Player position X : "+assets.player.scene.position.x+ " Y : "+assets.player.scene.position.y);
PlayerMovement.updatePlayerPositionAnimation(assets.player, camera, scene);//Updating player position and rotation
PlayerCollisions.checkPlayerCollisions(assets.player, assets.plates);//Checking collisions with player
Animations.updateAnimations(Clock.getDelta());//Playing animations
PlayerMovement.updatePlayerPositionAnimation(assets.player, camera, scene);//Updating player position and rotation
PlayerCollisions.checkPlayerCollisions(assets.player, assets.plates);//Checking collisions with player
Animations.updateAnimations(Clock.getDelta());//Playing animations
renderer.render( scene, camera );//Calculating and redering new frame
renderer.render( scene, camera );//Calculating and redering new frame
}
console.log("Ready to render scene, placed objects : "+scene.children.length);
animate();
});
}
console.log("Ready to render scene, placed objects : "+scene.children.length);
animate();
});
}
document.startThreeJS = startThreeJS; // So I'm sure this function is available in index.html

9
src/menu.js Normal file
View File

@@ -0,0 +1,9 @@
'use strict';
// Small script used for the menu
import $ from 'jquery';
$("#menu button").on("click", event=>{
$("#menu").fadeOut(300);
document.startThreeJS();
});