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
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.
@@ -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] Create some gltf models and apply textures/colours on them
- [x] Add some facts about me on signs
- [x] Add a phone version
- [ ] Add a loading screen
- [ ] Add a menu, so users can chose a language, ect..
- [ ] Add a phone version
- [ ] 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
- [ ] Find something to add on this list

53
index.html
View File

@@ -3,51 +3,7 @@
<head>
<meta charset="utf-8">
<title>Kévin Sailly - Portfolio</title>
<style>
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>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="notification_bar">
@@ -56,6 +12,13 @@
<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 -->
</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>
</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
document.addEventListener('keydown', PlayerMovement.handleKeyDown);
document.addEventListener('keyup', PlayerMovement.handleKeyUp);
PlayerMovement.initPhoneMovement();
/* --------------------- */
/* | ANIMATIONS | */

28
src/utils/playerMovement.js
View File

@@ -1,5 +1,6 @@
import * as THREE from 'three';
import * as MathUtils from 'three/src/math/MathUtils.js';
import $ from 'jquery';
const PLAYER_SPEED = 0.015;
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) {
/* Function called in the main loop
Used to calculate the position and orientation of the player