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

Added some buttons so phone users can move

Browse Source 
Also made sure that body takes full screen, so phone users can't scroll
This commit is contained in:
LJ5O
2024-01-28 23:29:42 +01:00
parent 7b2529e876
commit 3e532a4027
5 changed files with 135 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -4,7 +4,7 @@
## About it ## About it
You can visit my portfilio here : https://that-it-guy.dev/. This project isn't really phone-compatible for now, but I'm planning to add phone-compatibility. You can visit my portfilio here : https://that-it-guy.dev/. This project **isn't really phone-friendly** for now, but I'm planning to add a website adapted to phones.
I made it with **[Three.js](https://threejs.org/)**, and used **Blender** to create 3D models and animations. I made it with **[Three.js](https://threejs.org/)**, and used **Blender** to create 3D models and animations.
@@ -18,9 +18,9 @@ I'll try to keep this up to date, and to enhance the project from time to time.
- [x] Camera placement and player movement - [x] Camera placement and player movement
- [x] Create some gltf models and apply textures/colours on them - [x] Create some gltf models and apply textures/colours on them
- [x] Add some facts about me on signs - [x] Add some facts about me on signs
- [x] Add a phone version
- [ ] Add a loading screen - [ ] Add a loading screen
- [ ] Add a menu, so users can chose a language, ect.. - [ ] Add a menu, so users can chose a language, ect..
- [ ] Add a phone version
- [ ] Add English and Japanese versions - [ ] Add English and Japanese versions
- [ ] Create a simple website with everything on it, so people who don't like walking from signs to signs can find quickly information - [ ] Create a simple website with everything on it, so people who don't like walking from signs to signs can find quickly information
- [ ] Find something to add on this list - [ ] Find something to add on this list

53
index.html
View File

@@ -3,51 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Kévin Sailly - Portfolio</title> <title>Kévin Sailly - Portfolio</title>
<style> <link rel="stylesheet" href="/style.css">
body { margin: 0; overflow: hidden;}
a {
text-decoration: none;
color: #2E86AB;
}
#notification_bar {
position: absolute;
top:20px;
right: 0;
height: 80px;
width: 0;
/*width: 320px; 320 is the expended value, when showed by Jquery*/
background-color: #1C232A;
opacity: 0; /* Set to 0.9 when showed */
z-index: 100;
border-left: 24px solid #2E86AB;
}
#notification_bar p{
margin: 6px;
color: #EAEAEA;
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
}
#picture_zoom{
position: absolute;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
border: 4px solid black;
z-index: 100;
}
#picture_zoom img{
width: 100%;
height: 100%;
}
</style>
</head> </head>
<body> <body>
<div id="notification_bar"> <div id="notification_bar">
@@ -56,6 +12,13 @@
<div id="picture_zoom" style="display: none;"><!-- Hidden by default, Jquery will show it later --> <div id="picture_zoom" style="display: none;"><!-- Hidden by default, Jquery will show it later -->
<img src="" alt="Sign picture" /><!-- src is defined by JS --> <img src="" alt="Sign picture" /><!-- src is defined by JS -->
</div> </div>
<div id="movement_keys">
<div id="key_up"></div>
<div id="key_left"></div>
<div id="key_down"></div>
<div id="key_right"></div>
</div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>

95
public/style.css Normal file
View File

@@ -0,0 +1,95 @@
body {
margin: 0;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
a {
text-decoration: none;
color: #2E86AB;
}
#notification_bar {
position: absolute;
top:20px;
right: 0;
height: 80px;
width: 0;
/*width: 320px; 320 is the expended value, when showed by Jquery*/
background-color: #1C232A;
opacity: 0; /* Set to 0.9 when showed */
z-index: 100;
border-left: 24px solid #2E86AB;
}
#notification_bar p{
margin: 6px;
color: #EAEAEA;
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
}
#picture_zoom{
position: absolute;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
border: 4px solid black;
z-index: 100;
}
#picture_zoom img{
width: 100%;
height: 100%;
}
@media only screen and (min-width: 1000px) {
#movement_keys{
display: none;/*Those keys should be visible only on phones*/
}
}
#movement_keys{
z-index: 101;
position: absolute;
bottom: 10px;
right: 10px;
width: 170px;
height: 115px;
}
#movement_keys div{
width: 50px;
height: 50px;
z-index: 102;
background-color: #2E86AB;
}
#key_up{
position: absolute;
top:5px;
left:50%;
transform: translateX(-50%);
}
#key_left{
position: absolute;
top:60px;
left:5px;
}
#key_down{
position: absolute;
top:60px;
left:60px;
}
#key_right{
position: absolute;
top:60px;
right:5px;
}

2
src/main.js
View File

@@ -30,6 +30,8 @@ addAssetsOnScene(scene).then(assets => {
// Events to listen keyboard inputs // Events to listen keyboard inputs
document.addEventListener('keydown', PlayerMovement.handleKeyDown); document.addEventListener('keydown', PlayerMovement.handleKeyDown);
document.addEventListener('keyup', PlayerMovement.handleKeyUp); document.addEventListener('keyup', PlayerMovement.handleKeyUp);
PlayerMovement.initPhoneMovement();
/* --------------------- */ /* --------------------- */
/* | ANIMATIONS | */ /* | ANIMATIONS | */

28
src/utils/playerMovement.js
View File

@@ -1,5 +1,6 @@
import * as THREE from 'three'; import * as THREE from 'three';
import * as MathUtils from 'three/src/math/MathUtils.js'; import * as MathUtils from 'three/src/math/MathUtils.js';
import $ from 'jquery';
const PLAYER_SPEED = 0.015; const PLAYER_SPEED = 0.015;
const ROTATION_SPEED = 0.05; // Vitesse de rotation const ROTATION_SPEED = 0.05; // Vitesse de rotation
@@ -45,6 +46,33 @@ export function handleKeyDown(event) {
} }
} }
export function initPhoneMovement() {
// Used to define some functions that will handle movement on phones
$('#key_up').on('mouseenter', function() {
playerDirection.y = 1; // Button pressed, going up
}).on('mouseleave', function() {
playerDirection.y = 0; // Button released, stop
});
$('#key_down').on('mouseenter', function() {
playerDirection.y = -1;
}).on('mouseleave', function() {
playerDirection.y = 0;
});
$('#key_left').on('mouseenter', function() {
playerDirection.x = -1;
}).on('mouseleave', function() {
playerDirection.x = 0;
});
$('#key_right').on('mouseenter', function() {
playerDirection.x = 1;
}).on('mouseleave', function() {
playerDirection.x = 0;
});
}
export function updatePlayerPositionAnimation(player, camera, scene) { export function updatePlayerPositionAnimation(player, camera, scene) {
/* Function called in the main loop /* Function called in the main loop
Used to calculate the position and orientation of the player Used to calculate the position and orientation of the player