How To Make A Minimap In Three.js

hey as stated in the title in the thumbnail of this video we are going to discover how to make a mini map for your interactive 3GS apps or games so as you can see I have this starter project that you can get from GitHub I'll leave you the link to the repository in the description below now I'll start by importing the model which is the city that we are going to make the mini map for the next thing I want to do is use different camera controls since the orbit controls isn't suited for this type of apps and the one I'm going to use is the map controls the map controls is working fine now I'm going to set the enabled damping property to True which will add smoothness to the camera movement enabling this feature makes it essential to call the update method in the animate function next I'm going to tweak the damping value deactivate the zoom and reposition the camera now that we've done all the preparations let's get into the main topic of this video which is the mini map creation so the first thing I'm going to do is create the placeholder or the container of the mini map on the page to do that I'm just going to create a 350 by 350 pixels div and place it at the bottom right corner using some very basic CSS next I'll create a second render and attach it to the HTML element I've just created then I'll create a second camera that will capture the scene from above and here of course second render means a second animate function and there we go we got our map displayed however we have an issue we need to fix before going to the next section which is that the map is actually upside down to fix that I'm simply going to rotate the mini map camera so far we have a mini map that shows the entirety of the city but it's still kind of useless if you ask me or at least we could have the same results with less complexity well unless we add some functionality to it and here I mean making the main camera move to a position where the user has clicked on the mini map like in a strategy game if you have ever played one so first things first we need to prepare the raycaster for that here we are going to set the position of the mouse click as the coordinates of the main camera now even though our attempt seems to be a success it's not the case notice how the direction of the camera is getting weirder with every click I do on the mini map the reason behind that is that we are repositioning the camera but its Target Remains the Same an easy solution to that is to direct the camera towards its new position the solution worked fine but we still have something to fix notice when I click a little close to the edge of the map the main camera Direction gets reversed a quick fix to that is to add one to the Z coordinate of the target so what we have now is a couple of renders in cameras that display the same scene from two different angles that means we are rendering double the amount of vertices that live in this scene this can lead to some serious performance problems I mean just this model has 435,000 vertices imagine having more heavy objects in this same scene that being said to optimize this I'm going to do two things the first is make the mini map camera display just the top view image of the city mapped on a plane geometry the second is make that plane only visible to the mini map camera alongside with the different elements of the map more on this in my upcoming tutorial so to get a top view of the city I'm just going to right click on the mini map and save the image in my project folder and then of course create a plane and map the texture on it the first of the two points I mentioned is done now to the second so to make the plane visible only to the second camera I'm going to to use layers if you don't know what layers are check out this video these four lines will remove the mini map camera in the plane from layer number zero and set them to layer number one finally as you can see the mini map looks like it has a white layer on top of it and that's because because we didn't set the color space of the plane's texture so let's do that and with that done we come to the end of this tutorial so make sure to like share and subscribe and I will see you in the next one

Channel: Wael Yasmina

Views: 3,328

Keywords: three.js, webgl, three.js tutorial, webgl tutorial, three.js map, three.js mini-map, three.js minimap, how to create a minimap in three.js

Id: tdV-4EICEow

Length: 8min 56sec (536 seconds)

Published: Thu Dec 14 2023