Added a first zoom plate

Works great, let's make the code cleaner and use it everywhere

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%;
+			}
 			
 		</style>
 	</head>
@@ -38,6 +53,9 @@
 		<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>

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

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);
+    preparePlate(linkPlate);
-    linkPlate.scene.rotateOnWorldAxis(new THREE.Vector3(1,0,0), MathUtils.degToRad(90));
+
-    alignGround(ground, linkPlate.scene);
+    const zoomPlate = await loadModel('src/objects/models/zoomPicturePlate.gltf');
-    linkPlate.scene.position.z += 0.25;//So it can collide with player hitbox
+    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;
+        const linkPlateClone = linkPlate.scene.clone();
-        linkPlate.scene.position.x = -20.3 + i*5;
+        linkPlateClone.position.y = 0.5;
+        linkPlateClone.position.x = -20.3 + i*5;
     
-        scene.add( linkPlate.scene );
+        scene.add( linkPlateClone );
-        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> !",
+        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()};
+            linkPlateClone.onLeaveHitbox = ()=>{Notifications.hideNotification()};
-        linkPlates.push(linkPlate);
+        plates.push(linkPlateClone);
 
     }
 
@@ -493,6 +513,6 @@ export async function addAssetsOnScene(scene){
         nameplateModel: nameplateModel,
         worldStatue: worldStatue,
         printerStatue: printerStatue,
-        linkPlates: linkPlates
+        plates: plates
     };
 }

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);
+}

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) {
+    if (!object) {
-      console.warn('An object in the list does not have a "scene" property. It will be ignored.');
+      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);