From c07175f4fa0de36d5ad14751972945d2c85e6dc3 Mon Sep 17 00:00:00 2001 From: LJ5O <75009579+LJ5O@users.noreply.github.com> Date: Thu, 18 Jan 2024 01:17:08 +0100 Subject: [PATCH] Added a first zoom plate Works great, let's make the code cleaner and use it everywhere --- index.html | 18 ++++++++++++ src/main.js | 2 +- src/utils/addAssetsOnScene.js | 54 ++++++++++++++++++++++++----------- src/utils/pictureZoom.js | 11 +++++++ src/utils/playerCollisions.js | 6 ++-- 5 files changed, 70 insertions(+), 21 deletions(-) create mode 100644 src/utils/pictureZoom.js diff --git a/index.html b/index.html index 8a5f299..a0b8ef8 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,21 @@ 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%; + } @@ -38,6 +53,9 @@

+ diff --git a/src/main.js b/src/main.js index 3f9d95a..41b6754 100644 --- a/src/main.js +++ b/src/main.js @@ -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 diff --git a/src/utils/addAssetsOnScene.js b/src/utils/addAssetsOnScene.js index cb879fa..a42c0ac 100644 --- a/src/utils/addAssetsOnScene.js +++ b/src/utils/addAssetsOnScene.js @@ -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 ici !", + scene.add( linkPlateClone ); + linkPlateClone.onEnterHitbox = ()=>{Notifications.showNotification("Vous pouvez ouvrir ce lien avec la touche Entrée, ou en cliquant ici !", ()=>{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 }; } \ No newline at end of file diff --git a/src/utils/pictureZoom.js b/src/utils/pictureZoom.js new file mode 100644 index 0000000..077b741 --- /dev/null +++ b/src/utils/pictureZoom.js @@ -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); +} \ No newline at end of file diff --git a/src/utils/playerCollisions.js b/src/utils/playerCollisions.js index 20ed559..a7468c4 100644 --- a/src/utils/playerCollisions.js +++ b/src/utils/playerCollisions.js @@ -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);