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

Added a first zoom plate

Browse Source 
Works great, let's make the code cleaner and use it everywhere
This commit is contained in:
LJ5O
2024-01-18 01:17:08 +01:00
parent 44c9f0c873
commit c07175f4fa
5 changed files with 70 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@@ -32,12 +32,30 @@
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>
<body>
<div id="notification_bar">
<p><!-- Text added here by JS --></p>
</div>
<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>
<script type="module" src="/src/main.js"></script>
</body>

2
src/main.js
View File

@@ -48,7 +48,7 @@ function animate() {
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.linkPlates);//Checking collisions with player
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

54
src/utils/addAssetsOnScene.js
View File

@@ -3,6 +3,7 @@ import * as MathUtils from 'three/src/math/MathUtils.js';
import { createGround } from '../objects/ground.js';
import {loadModel} from './import.js';
import * as Notifications from '../utils/notification.js';
import * as ZoomPictures from '../utils/pictureZoom.js';
const textureLoader = new THREE.TextureLoader();
@@ -335,16 +336,23 @@ export async function addAssetsOnScene(scene){
scene.add(nameplateModel.scene);
/* --------------------
DEFINING LINK PLATES
DEFINING PLATES
-------------------- */
// That's used for signs but may also be used elsewhere
let linkPlates = [];
let plates = [];
function preparePlate(plateModel){
plateModel.scene.scale.set(0.4,0.05,0.4);
plateModel.scene.rotateOnWorldAxis(new THREE.Vector3(1,0,0), MathUtils.degToRad(90));
alignGround(ground, plateModel.scene);
plateModel.scene.position.z += 0.25;//So it can collide with player hitbox
}
const linkPlate = await loadModel('src/objects/models/linkPlate.gltf');
linkPlate.scene.scale.set(0.4,0.05,0.4);
linkPlate.scene.rotateOnWorldAxis(new THREE.Vector3(1,0,0), MathUtils.degToRad(90));
alignGround(ground, linkPlate.scene);
linkPlate.scene.position.z += 0.25;//So it can collide with player hitbox
preparePlate(linkPlate);
const zoomPlate = await loadModel('src/objects/models/zoomPicturePlate.gltf');
preparePlate(zoomPlate);
/* --------------------
ADDING SIGNS
@@ -358,8 +366,8 @@ export async function addAssetsOnScene(scene){
const SignPlanegeometry = new THREE.PlaneGeometry(2.95, 1.55);
/* SCHOOLS */
let signPictures = ['src/objects/textures/epid.png', 'src/objects/textures/iutCalais.png']
for(let i=0; i<2; i++){
const signPictures = ['src/objects/textures/epid.png', 'src/objects/textures/iutCalais.png']
const signCopy = sign.scene.clone();
signCopy.position.x = 10 + i*5;
signCopy.position.y = 1.36;
@@ -373,8 +381,8 @@ export async function addAssetsOnScene(scene){
}
/* PROFESSIONAL EXPERIENCES */
signPictures = ['src/objects/textures/hachinohe.png'];
for(let i=0; i<1; i++){
const signPictures = ['src/objects/textures/hachinohe.png'];
const signCopy = sign.scene.clone();
signCopy.position.x = -4 - i*5;
signCopy.position.y = 1.36;
@@ -385,12 +393,23 @@ export async function addAssetsOnScene(scene){
signPlane.rotateOnWorldAxis(new THREE.Vector3(1,0,0), MathUtils.degToRad(90));
signPlane.position.set( signCopy.position.x + 0.06, 1.347, 1.65);//Determined by hand
scene.add(signPlane);
//Zoom picture plate
const zoomPlateClone = zoomPlate.scene.clone();
zoomPlateClone.position.y = 0.5;
zoomPlateClone.position.x = -4 - i*5;
scene.add( zoomPlateClone );
zoomPlateClone.onEnterHitbox = ()=>{ZoomPictures.showPicture(signPictures[i])};
zoomPlateClone.onLeaveHitbox = ()=>{ZoomPictures.hidePicture()};
plates.push(zoomPlateClone);
}
/* SOCIAL NETWORKS */
signPictures = ['src/objects/textures/github.png'];
const notificationsLinks = ['https://github.com/LJ5O'];
for(let i=0; i<1; i++){
const signPictures = ['src/objects/textures/github.png'];
const notificationsLinks = ['https://github.com/LJ5O'];
const signCopy = sign.scene.clone();
signCopy.position.x = -20.3 + i*5;
signCopy.position.y = 1.36;
@@ -403,14 +422,15 @@ export async function addAssetsOnScene(scene){
scene.add(signPlane);
//ADDING LINK PLATES
linkPlate.scene.position.y = 0.5;
linkPlate.scene.position.x = -20.3 + i*5;
const linkPlateClone = linkPlate.scene.clone();
linkPlateClone.position.y = 0.5;
linkPlateClone.position.x = -20.3 + i*5;
scene.add( linkPlate.scene );
linkPlate.onEnterHitbox = ()=>{Notifications.showNotification("Vous pouvez ouvrir ce lien avec la touche Entrée, ou en cliquant <a target=\"_blank\" href=\""+notificationsLinks[i]+"\">ici</a> !",
scene.add( linkPlateClone );
linkPlateClone.onEnterHitbox = ()=>{Notifications.showNotification("Vous pouvez ouvrir ce lien avec la touche Entrée, ou en cliquant <a target=\"_blank\" href=\""+notificationsLinks[i]+"\">ici</a> !",
()=>{Notifications.openLink(notificationsLinks[i])} )};
linkPlate.onLeaveHitbox = ()=>{Notifications.hideNotification()};
linkPlates.push(linkPlate);
linkPlateClone.onLeaveHitbox = ()=>{Notifications.hideNotification()};
plates.push(linkPlateClone);
}
@@ -493,6 +513,6 @@ export async function addAssetsOnScene(scene){
nameplateModel: nameplateModel,
worldStatue: worldStatue,
printerStatue: printerStatue,
linkPlates: linkPlates
plates: plates
};
}

11
src/utils/pictureZoom.js Normal file
View File

@@ -0,0 +1,11 @@
import $ from 'jquery';
//Show picture :
export function showPicture(link){
$("#picture_zoom img").attr("src", link);
$("#picture_zoom").fadeIn(400);
}
//Hide picture :
export function hidePicture(){
$("#picture_zoom").fadeOut(400);
}

6
src/utils/playerCollisions.js
View File

@@ -8,12 +8,12 @@ export function checkPlayerCollisions(player, objects) {
const playerBoundingBox = new THREE.Box3().setFromObject(player.scene);
for (const object of objects) {
if (!object || !object.scene) {
console.warn('An object in the list does not have a "scene" property. It will be ignored.');
if (!object) {
console.warn('An object in the list is not valid. It will be ignored.');
continue;
}
const objectBoundingBox = new THREE.Box3().setFromObject(object.scene);
const objectBoundingBox = new THREE.Box3().setFromObject(object);
//Check if the object is currently inside the hitbox
const isInsideHitbox = playerBoundingBox.intersectsBox(objectBoundingBox);