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

8
index.html
View File

@@ -4,8 +4,15 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Kévin Sailly - Portfolio</title> <title>Kévin Sailly - Portfolio</title>
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/menu.css">
</head> </head>
<body> <body>
<!-- That menu is shown at startup, so users can choose their settings -->
<div id="menu">
<h1>Hello world !</h1>
<button>Start</button><!-- See menu.js for threejs startup -->
</div>
<div id="loading"> <div id="loading">
<p>Chargement...<br>Loading...</p> <p>Chargement...<br>Loading...</p>
</div> </div>
@@ -22,6 +29,7 @@
<div id="key_down"><img src="/objects/textures/arrow.png" width="100%" height="100%" style="transform: rotate(180deg);"/></div> <div id="key_down"><img src="/objects/textures/arrow.png" width="100%" height="100%" style="transform: rotate(180deg);"/></div>
<div id="key_right"><img src="/objects/textures/arrow.png" width="100%" height="100%" style="transform: rotate(90deg);"/></div> <div id="key_right"><img src="/objects/textures/arrow.png" width="100%" height="100%" style="transform: rotate(90deg);"/></div>
</div> </div>
<script type="module" src="/src/menu.js"></script>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>

42
public/menu.css Normal file
View File

@@ -0,0 +1,42 @@
/* This file is reserved for the menu style */
#menu{
background-color: #131415;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
#menu h1{
position: absolute;
top:20%;
left:50%;
transform: translate(-50%,-50%);
font-size: 3em;
font-family: Arial, Helvetica, sans-serif;
color: #EAEAEA;
}
#menu button{
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%,-50%);
padding-left: 50px;
padding-right: 50px;
padding-top: 15px;
padding-bottom: 15px;
border-radius: 8px;
border: 2px #4f5c69 solid;
background-color: #2E86AB;
font-size: 1.5em;
color: #EAEAEA;
font-family: Arial, Helvetica, sans-serif;
}
#menu button:hover{
background-color: #46aad4;
border: 4px #4f5c69 solid;
}

2
public/style.css
View File

@@ -20,7 +20,7 @@ a {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 2em; font-size: 2em;
z-index:-1; z-index:-2;
} }
#notification_bar { #notification_bar {

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 Animations from './utils/animateMesh.js';
import * as PlayerCollisions from './utils/playerCollisions.js'; import * as PlayerCollisions from './utils/playerCollisions.js';
let Clock = new THREE.Clock(); // Function used to start Threejs, called from index.html
THREE.Cache.enabled = true;//So we can request several time the same file without worrying : https://threejs.org/docs/#api/en/loaders/FileLoader 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 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 => {
/* --------------------- */ /* --------------------- */
/* | MOVEMENT | */ /* | SCENE CREATION | */
/* --------------------- */ /* --------------------- */
// Events to listen keyboard inputs const scene = new THREE.Scene();
document.addEventListener('keydown', PlayerMovement.handleKeyDown); scene.background = new THREE.Color(0x0EB1D2);
document.addEventListener('keyup', PlayerMovement.handleKeyUp); const camera = getCamera();
PlayerMovement.initPhoneMovement();
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 | */ /* | ANIMATIONS | */
/* --------------------- */ /* --------------------- */
//We can add an animationMixer on objects, and define ready to play actions on objects //We can add an animationMixer on objects, and define ready to play actions on objects
//https://threejs.org/docs/#api/en/animation/AnimationAction //https://threejs.org/docs/#api/en/animation/AnimationAction
Animations.addAnimationMixerOnMesh(assets.player, ["Walk"]); Animations.addAnimationMixerOnMesh(assets.player, ["Walk"]);
Animations.addAnimationMixerOnMesh(assets.nameplateModel, ["Animation"]);assets.nameplateModel.animationActions.Animation.play(); Animations.addAnimationMixerOnMesh(assets.nameplateModel, ["Animation"]);assets.nameplateModel.animationActions.Animation.play();
Animations.addAnimationMixerOnMesh(assets.worldStatue, ["Animation"]);assets.worldStatue.animationActions.Animation.play(); Animations.addAnimationMixerOnMesh(assets.worldStatue, ["Animation"]);assets.worldStatue.animationActions.Animation.play();
Animations.addAnimationMixerOnMesh(assets.printerStatue, ["Printing"]);assets.printerStatue.animationActions.Printing.play(); Animations.addAnimationMixerOnMesh(assets.printerStatue, ["Printing"]);assets.printerStatue.animationActions.Printing.play();
function animate() { function animate() {
requestAnimationFrame( 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 PlayerMovement.updatePlayerPositionAnimation(assets.player, camera, scene);//Updating player position and rotation
PlayerCollisions.checkPlayerCollisions(assets.player, assets.plates);//Checking collisions with player PlayerCollisions.checkPlayerCollisions(assets.player, assets.plates);//Checking collisions with player
Animations.updateAnimations(Clock.getDelta());//Playing animations 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); console.log("Ready to render scene, placed objects : "+scene.children.length);
animate(); 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();
});