Build an Explorable 3D Scene with Three.js

1. introduction: I have run. Welcome to building Explore Role three D Scene with three Jazz I have a new come in front of developer, but I love playing around three D, and this is a project that combines the two. So I'm really excited about it, and I have joined us today. I'll be walking you through how to bring HTML, CSS, JavaScript and three D models together. Do you just Lionel interact until it tips in a Web browser? This could be used to show off products website and allow users to explore them in a highly visual industry matter. We'll start by learning how to add a mob scene, lighted and then give users the ability to explore it by rotating. And this evening into it finally will add Call SNC, which, when clicked, we'll bring more information that's relevant to that area model. By the end of this tutorial, you have a working understanding of using three Js, which is a library that could be used to you add and interactive three D and Web browser. No part of knowledge of three D is required, although I do recommend that you have some JavaScript experience. Join me on score. Supposing a nice when you 2. An Overview of 3D on the Web: so three D on the Web is done using something called Web GL, which stands for Web Graphics Library. It's a JavaScript FBI for rendering interactive two D and three D graphics. And what that lets us do is actually put three D into a Web browser in a manner that's really fast and efficient and doesn't really bogged down your machines. And it could be displayed on things like smartphones could be done on desktop computers. There's no leg, there's there's a lot of interactivity to it. And so it lets us do stuff like this animated truck at the top of transmit site, which is just a three D model of their logo. You know, I can drag this. I can move it around. We've also got something like this Mars Rover, which is from NASA Jet Propulsion Library. I could drive this around using my up, down left, right keys, comes a train. It's a fairly complicated model, but you saw just how fast it loaded. We've got this fossil from National Geographic and using buggy l and and some of the three D models we can export a really interesting, an interactive way. So as I'm kind of scrolling your response to my mouse on and spends the model as different call outs to it highlights areas of importance. So it's a really good storytelling device here, and we've also got this from Mercedes Benz. So go down Explorer. What's this? Loads. You can actually see the car as a three D model you can. You can look around it if you want to see what was second different configurations and say different paint colors. You can click on those, see what looks like with different wheels. So what jail could be used to add a lot of interesting detail. Either upfront is like a centerpiece, or maybe just like a little bit of flourish to any website. And it's done fairly. Simply, like browsers are able to kind of handle this and a really fast and efficient matter. So you started Teoh become a little bit more and more popular now, so we'll explore how to do that in the next video 3. Introduction to three.js: in order to get all that three d into a Web browser, we need to tell it stuff like how the geometry is set up, how the materials handled things like light reflection or the color of said materials. How the camera works, what the depth of focus is stuff like that. So if we're looking out, for example, how cubes onto scene, we're seeing that on Strange. It's a lot of detail. What we're kind of explaining where in the scene, every single point on every single triangle on every face that makes up the Cube lives. So, as you see, there's a lot of detail here, and there's a bit of a chance of error if you know you miss something like absolutely putting a positive instead of negative or miss a comma, or possibly put things in the wrong order. So what we are gonna be using here is library called three Js. So if you go there their home page, the oral is three jacks out of work. You can see a few of the examples here, and some of those we just saw. Here's Here's the You transmit truck. We'll dig into a little bit of the documentation. So here's a basic three Yacine, and they're gonna add a cube to the scene. So if you look at the country have highlighted here, This is all the cocaine use data to ah 23 Js two out of Cuba to the scene going through line by line. The first line says, here is the geometry. It's a box that is one unit wide, one unit deep and one Utah. All the material itself is green. We're gonna add these two together and we're gonna add it to the scene. So that's four lines of code at a box to a three fast scene as opposed to all of this code , which is just kind of heavy and sometimes gets repetitive. And that same, maybe the ease of use could be used for lighting. So, for example, if we toe look, if you want to look at how to have a light to a three Js seen you define the light, you tell it the color and just add it. And so there's a lot of defaults in here, you know, for example, by default, it doesn't cash shadows. It's an ambient light, which means a kind of spreads evenly. And so that's really something. Add, as opposed to you, for example, lighting with just straight JavaScript. So the great thing about three jazz is really lets you kind of get to what's unique to the scene, and I'll have to worry too much about the repetitive aspects of it or the stuff that you're comin we have to do. And we'll dig into how to seen and have to have actually set up your computer to handle three Js in the next video, so we'll see then. 4. Setting up a Local Environment: So let's start setting up seeing in three Js and we're gonna set up our local environment here. Just get all the software installed and everything we need to to work on it locally. And when I say we're gonna be working on it locally, that means, as opposed to making a change, uploading it Teoh a Web server and previewing it, which can take a little bit of time. It's tough, kind of transferred back and forth. We're just gonna edit it on our own computers. The things we had saved. We can preview what it looks like. You know what browser? If I start off, I'm gonna go to the three Js websites and go to documentation. We're going to run things locally, and there's a few ways we can do this because of security settings and Web browsers, you would either need to override those t preview some of these some of these files or you would need to run a local Web server, and I highly recommend you do not override any or default security settings on your Web browser. So we're gonna look at how do you run a little cool server? And in this case we're gonna be using? No, Js and I will preface it by saying I'm using a Mac here. If you're using any other platform like Windows or Lennox software might be different, but the principles of the same. So if I copy this into a terminal, I mean, it's all note. Great. So that's not installed on my computer and actually get something up and running. I'm going to create a new folder. I'm gonna call it demo Care on my computer, Okay. And then I'm gonna CD into that directory. So CD Demo Grant. And now I'm gonna run this little bit of this line to start my notes over. So what we just did is we installed a server. We started running it. If I copy one of these into a Web browser, it's gonna show me whatever is in that folder. So that is actually showing us the contents of demo. So to prove it, we'll just open up FIA's code. We'll create any file hello worlds and save it, as in the explanation and at each one to its Okay. So now if we go back to a browser and you can't refresh, we should see the contents of that file. So that's how to run locally. Now let's actually start adding three jails to the scene so good out here. And if you look in the download file, we'll just start downloading all the assets we need for this. And we'll walk through how to actually add files and how to get a basic singing up and running in the next video so we'll see you then. 5. Setting Up a three.js Scene: Now that we have our service set up, we can start building our three D scene. And if you go back to three Js website, we'll click the download link to start downloading library which already gone ahead and done so Well, just unzip that. So if I go back to my downloads, I'll grab those files. And what I want to do is I want to start adding stomach the library to the server that I'm gonna be running, running, seen off, so go back to three Js not master build and grabbed three duckman dot Js which is the men ified version of the library. I'll just move that into the server. All created a folder called Js uh, pace that in and go back to my code editor. So out of scrapes, a really quick stopped I smell create a scene here. How creative. Basically html file that just loads that JavaScript and because it's running off canvas instead of just like adding it straight to the html well, basically, just have a canvas fill the entire screen, So style type close text dot CS us uh html body margin. Zero uh, canvas and all Web GL runs off canvas, so we'll be adding a canvas of the scene. So speaking this and then go ahead and create a basic seen in three Js. So go back to our committed there and everything we teach here everything we're learning here. This is straight out of the three documentation on TV getting started area so well, credit file for holding our custom code. So, uh, the body and then we'll just create it here. Seen a doctor? Yes. And first we'll start off by creating an instance of three of the three jazz scene so far, singing equals new three dot scene and we'll add a camera. So for this, we're going to be adding a perspective camera. There's a few different types of cameras you can use, but this one kind of matches more real world cameras with stuff like depth of focus and perspective. So of our camera equals new three dot perspective camera and we give it the field of U. S. A. 75. What would be the kind of angle that the camera can see? So 75 the aspect ratio will be window dot inter with divided by window dot In her Heights. Ah, the nearest the camera can see is 0.1, and the further second see is 1000 in three DS. There's no units. So if you're coming from something like CSS were using pixels or Ari EMS, So it's all kind of relative to itself. We're out in the camera. Well, move the camera a little bit back from the center of the screen, so camera opposition dot said equals five by default. Anything we'll just be. When it's added, it gets added to the the middle of the scene, which has an ex wife said of 000 So for this we're gonna move the camera back a little bit . So when we position stuff in screen, it's looking at those objects. Okay, so now it's a surrender, So renderers equals new $3 Web GL runner and renderers dot set size when, no doubt inter width and window dot in her height. And what's the body? So document body Does a pen child render her dot dom element? It comes, So if you go back, this is the basic seen. There's nothing there. What's at Cem Gentry? So far, geometry equals new three dots box geometry. So this lot of cube and it's gonna have a with a highest on a depth of one will create material for that. So material equals new. Three does match basic material, so this will just be a material. It doesn't have lighting affected by default, which we're going to later, but we'll just give it a color of green. We'll add it all together into a mesh of our Q B equals and you re dot mesh geometry material ums seen dot ad Cube. Okay, uh, we've added to the scene. Let's actually render it on the screen. So let animate equals function so we'll actually render the scene on camera. If we go back, there's a cube and let's say we want to rotate it so we'll have to call animates every frame so requests animation frame animates, so that'll call it on every frame and every frame. Let's actually rotate it so cubed up rotation dot x plus y. So to cover this, when the scene first kicks off, it will call this animate function, and the animate function will increase the rotation on the X axis by a unit of 0.1 it will . Sorry, Have something wrong. Order. It will render that scene and then it will call itself again. So every 60 frames per second, it will increase the rotation of that cube and read or to the scene. So if we go back, it's right, adding. So what we want to do next is at some lighting to this, and we'll go into that in the next lesson. 6. Adding Lights: So we've added a cube to the scene, and it's rotating. But it's not really picking up anyway. So doesn't look too realistic. And the reason why it's not picking up any light is right now. The way that we have it set up is it's using a material called mesh basic material. There's a few different types of material that you can use the three Js, and they all kind of respond to light differently or respond to other objects differently. So for go into mesh base material, you know, you can see it's in a simple flash ate away. But let's say we want to actually have light and have it reflect and cast shadows. So we're going to something called the mesh flooring material. And so there's all types of different stuff we can do with that of, you know, you can set the capacity you can set how shiny it is, But we're going to use that in a basic sense. So grab mesh long material and replace the material of the cube with mesh along so well. Say that and will refresh. There is nothing there, and the reason there is nothing there is because mess wrong does react to light. We need to add lights the scene. So let's grab. Let's say spotlight. So is a three spotlight and look at the code examples. So here is creating a spotlight. It's setting the color of the light, and it's setting the position and you can do other things like that, said Cast Shadow. Or you could set half your far. The spotlight shines, But let's just grab this on. We'll add it or seen and, well, maybe it'll move it a little bit closer to the to the Cube. So well, said it. Given Expedition Zero a Y position of 10. And is that position town and go seen. Add spotlight and what's maybe just add a few more, just so we can kind of capture light from a few different angles. So we'll have another one that's directly above above the Cube. So that's this one exposition of zero Y position of tens. Deposition of Zero, and we'll have one that's actually behind the Cube, which come in handy later. So what's that? That and now if he hit, refreshing, are seen, you can see it's picking up the light a bit more a bit more accurately. Okay, so in the next lesson, we'll learn how to move around this object rather than have an rotate on sound. So we'll see you then. 7. Exploring a 3D Scene: So now we have the Cube rotating on its on its own and picking up lights. But we want users to be able to handle the movement of the scene themselves. And to do that, we're gonna take off the automatic rotation and we're gonna have something called four B Controls and or controls is a part of three Js that comes with it, and it allows users to click into the window and they can drag scene around. Two wrote. It rotate, and they can also use the mouse wheel to zoom in and out of it. So we'll start off by going into the downloads from earlier and will go to examples Js controls or because roles and we'll add that bachelor project. So drop into the Js folder with all our other JavaScript on go back to the main index file . And now that they're so the documentation for or controls can be found on the main three gas docks so we'll copy the Atlanta code, will call for controls, will add it to the scene, will tell it to control the camera and the renderers from earlier warheads on. Then we'll also take off the default rotation for the Cube. So go back. I'm just controlling the lighthouse. I've clicked into the scene and I'm dragging it around. If I use my scroll wheel, I can also zoom in and out of it, and that's great. So we've added a cube to the scene. We've let it, and we're now connect controlling with their mouth, so there's a little bit more of interactivity to it. So that's good with Cube. But let's say we want to do some other geometry and we'll talk about that in the next video , which will see you then. 8. Importing Models: So now we want to add some geometry that's more complex than just a cube, and we can do that by creating multiple cubes and multiple cylinders and putting them together until they resemble something we like. Or we could also import them from external sources. And three, Let's you import files called GLT F and G L T F. They're models. They've got textures and lighting baked into them, but they could be created in something like Maya or blender and easily imported into Web GL . And there's a few different sites out there that you can download these from. Download existing ones from I personally like Sketch Fab. And so the euro is sketch. Have dot com. If you sign up for free account, you can look for, Let's say, well, in cars. You. There's different car models. Some of them are paid, some of them are free. But for the person of this, let's say we want out of bass guitar to are seen. So let's just do a search for Rickenbacker. Okay on, and we'll click downloadable. So there's some free ones here, so it's picked this one, and so this is going to show you a preview of model. And this is down with this. And before you download anything you do need to create account, you're going to be signed into it. But the account is free, and and some of the models are free. So we'll close this out. We'll show this in our finder, and then we'll paste this into our project. So this is called this model. Okay? And then if you go to three, we can load it in by we need to have some additional JavaScript to the project. Will have to go to our dental. It's folder will go back into three, will go into examples Js loaders and then grab the G l t f letter Tom and then pace out endorsing. Now we need to reference it. So we'll have that story next file. G l t f loader Doctor. Yes, it's a little bit. Um so let's remove our cube here. And, uh, bar loader equals new three g l t f loader loader Don't load, and then we'll call in the scene. So letter is model slash seem not G. Lt f once that's loaded. Well, actually, load in the scene. That's right. We need to pass in GLT. Okay, this is gonna load the goc fr we just downloaded. Once it's downloaded, we will pass that object into the scene and then we'll add it back and hit. Refresh On this. We should no longer see the Cube. We should see the bass guitar. So using the controls, we just added, We can rotate around it, see the light and catch it, and there it is. So now that we've got the geometry added to the scene, let's change a few more things. As we see it's not really facing the camera, and it's tough to see against the background. So let's go in by herself changing the rotation. And once we're adding scene, let's add, uh, g L T f don't seen dot Rotation got set. So rotation outside work on any three DS geometry or lights or cameras. So we'll just set this to be on the X axis. Italy zero degrees on the why and set access. It will be 270 degrees, so any time you set rotation outside, it goes in the order of X Y Z. When you do some rotation in three, it does require to be in radiance, which I'm not super failure with. So we'll just use a little built in three math to convert degrees Radiance. So three dot math dog Doc, Trade 270. That's on the Y axes, and we'll do it on the set axes. Okay, so now it's facing the camera, and it's tough to see right now because it's on a black background, but we can change that. So if you go up to rent for, we could go renderers set clear color. Which means if there's nothing appearing here, is like the default fallback color, and we'll pass it in. Uh, let's say White. So's your times, F f f f f that and refresh, and it's appearing on a white background, but it's kind of far away. So let's move the camera. And also and this may be just changes to see what it looks like. She's good, and maybe let's make the lighting around a bit because it's probably a little bit too far. So if we change the front line to let's say, be ahead on so X will be zero wildly zero and these ed will be, let's say, three and the which is the top light to be directly above it by unit of three. And we'll change the backlight to be directly behind it by unit of 30 so that you were importing it. It's front and center. It's facing the user when it first loads up, and we can seem into it. But the orbit controls. We just had it. So now it's time to add some college to it so that users can kind of click on specific areas of it and see specific details about those areas. And we're gonna be doing that in the next lesson, so we'll see you then. 9. Adding Markers: So now let's go ahead and add tool tips to the scene. So we're gonna go back into our code base. We'll just create cosom comments here, uh, others. So well, creating a ray that's gonna store all the markers which will get back to you later, and we're gonna create another array, which stores all the data. Bet those. So it's gonna contain everything that's you need for each specific marker, and that's going to stuff like the position and the description that kind of pops up 17 clicks on it. So well, great view Array will call it market data position will store this as X Y said so. 0.2. We're gonna We're gonna change this later. So this is just kind of placeholder. And that was another one that, for the purposes of demonstration, will position on the left. Okay, so now let's look to this. So if we go to object of keys marker data for each marker equals more data key. So the console log of this is gonna live through all the markers and passed along the index , so fresh groups something here. Okay, so you see, it's kind of logging out the data from the earlier right. So now we want to create some geometry associated with Parker and was good for our geometry . Uh, let's do a tourist. So a tourist will be essentially the stroke of the tool tip. So new freed up for us, John Attorney, and we'll give the radius a 0.6. We'll give it us with of 0.1, and we'll give it 100 segments and material itself, uh, new three dot mesh basic material. And we're gonna use mess basic materials we don't want disaffected by lighting. We always kind of wanted to be a consistent color throat. We'll make that color that gray. Okay. And far tourists equals new three dot mesh geometry and material. And we also want to add this to a three D object. So a three D object is basically gonna be a container that we're gonna add objects to. And we can when we move that object. When you move the three container, we move all the objects inside of it. So we're gonna create more per container, new three Dr Objects three on and we're gonna add the tourists to that marker container. Okay, uh, we're gonna do a similar thing, but we're gonna have a circle inside of that. So we've got the stroke. And let's just do fill of that tool tip. Far geometry is new three dot circle geometry, and we'll give it a radius of 0.5 on and 32 seconds, and we'll give it a white Phil, except this one is gonna have some transparency to because we wanted to be semi real deal deal. See thrips. So set the color white set transparent. True. And then we'll set the capacity to 0.5. And then again, we'll copy the marker. Mesh comes and we're also going to set the position. Now that we've added the tourists and the circle to the marker container, let's position the marker container on the screen. So marker container position dot sets. And since we're looking at the marker, we'll look after the positions. So for each marker, you know, we want the 1st 1 to be 0002 and the 2nd 1 to be 0.20 no. So we'll capture this set marker The opposition zero hurt, upset wanted on market up session too, and we'll add that market enters the scene. So seen dot ad Marco container. So now if we go back and reverse the scene we should see is two markers. One will have our guest will both have a grey outline that the inside will be semi transparent with 50% opacity and white, and they'll each be in the unique position that we set up here. Now, if you do that, yeah, we can see we've got the circle of we've got the one that's a little bit back just because we didn't really move it up to the front. So if we take the 2nd 1 and change the value to 0.2, you will actually see that. See it moving up to the front. So there you were at the positions and next gonna have some interactivity to them. So we'll see you in the next lesson. 10. Positioning Markers: So now that we have the 20 steps added to the screen, we need to move them to the portrait position. And we can do this by a little bit of guessing check. Or we can also use something called doubt dot gov. And what that doctor he does is it lets us update and preview values in real time. So, for example, if I go to their website, it's this thing up in the top, right? And I can tweak some of the values on the right and see them reflected in the JavaScript on the left. What we're gonna do is we're gonna add this to the scene just to kind of help us get some preliminary values with what kind of copy and paste. So I'll go to download dot, dot gooey. I will say this to my project. Go back to my index file added to the scene, go dabs gooey men watch yes, and go back to the scene and then allowed a little space for it and say helper, So this is only gonna capture some test data. We're not gonna keep this on the full time. This is just for getting some initial values and clopping them into the real lab. So I'll just create a function called at helper. Call it out, helper, and I'm gonna add a little like a placeholder circle. So far for geometry equals news. Three dots feared do the radius of 0.5 and gonna make it red. Just so it really stands out against the background and come on to So you marker Apolinar equals new three dot mesh geometry material. That is the scene. It's and position at just in front of the base. So x value of zero values zero that value of 0.1 It's now if I preview Crips, you just set this market opposition that set. Okay, so it's that little red dot there, and I'm gonna move that around with doubt dot gov So a lot of arguably equals you dot dot of our agree. It was no doubt don't gooey. And then all go gooey dot ad marker helper, opposition X. Okay. So what this is doing is this is adding an instance of dad dot gov to the scene and say we want to manipulate marker, her helper position and the exact value we want to manipulate is X, and we want there to be a minimum of one and a maximum of one. So now if a preview this should see it in the top, right? And it's got this little slider. But I'm going to do is once I kind of get this into a range that I wanted to be. I'll just kind of copy that X value. But as you can see, it's only kind of going between negative ones your one. And that's because by default it will only do whole numbers. So well, tell that to be a little bit more to have, like, finer members. So we gotta step. I was stepped. I'll let it go in increments of 0.1 and I'll do that for the why value and these that value . So let's say I want to have a system just above the bridge, so I'll drive us there. Maybe I wanted to stand out a bit more. So said Thies, said Teoh. Higher number. And let's say I want a position it up. Oh, grab that. They're so those are the X Y Zed positions that I want my eventual market abuse all just kind of copy that over. Now if I hit Refresh. My marker is the position that dat dot gov told us that the initial marker was in so that I could do the same with the head, and I could do that with other markers going forward. There's one other thing is if I rotate it. The markers are actually not rotating along with it, so they're always facing fronts, and we want when the user to pan around that we want those markers to kind of always face the camera. Let's do something to always capture the rotation of controls for about two controls. Find my initial declaration and I'll just go to you. Limits how the controls can rotate so we only want to rotate on the Y axis so it go controls. You can set the men Max angles so controlled up men polar angle. Does that mean polar angle equals controls? I'm in full or angle times now, thought pie divided by two, so that would mean it only rotates on the y axis. It can't move on the said or or s okay, so I can't drive us in any other plane now I want. As the controls get updated, I want to listen and move the markers appropriately. So go to controls. Got out of that listener changed on camera update. So this would call a function called on camera update, which will find here function on camera date and what I want that to do is to go through all the markers and rotate them along with the angle that the cameras rotated. So back up in the marker we created earlier. I'll add something. Teoh. Add all the markets to a single room. 02 markers dots push marker container. So these are moving all of the markers into array called markers. Camera updates. I'll say, Let camera angle equal controls not gets as a beautiful angle. And then markers dot for each market of rotation that set zero. This camera angle. Zero. Sorry, have you changed this variable to camera angle? When someone rotates the controls, it's going Teoh in turn, Get the angle of the controls and go through every single marker and rotate the marker. Match that control angle so it's always going to face in the camera. Fruits and I missed something here, It's hit. Refresh. Oh, okay. So you see, as were rotating at the initial markers rotate along with cameras so they're always facing the camera. And the next thing we're going to do is add the ability to actually click on the mark earnestly data. So we'll do that in the next video. 11. Detecting Clicks: So now that we've added the tool tips, let's make them clickable. And we're going to do something called Ray Casting. So Ray fasting is used to kind of see what a mouse is over. So I guess in this case, we wanted someone. Someone clicks the canvas, we shoot array from the mouse to the scene and see what intersex without line. So if I were to hover over this ray casting would tell us that the mouses over a circle tourists and you guitar, we're gonna go ahead and add Great casting the scene and we'll come back here and G o r A pastor equals a new $3 rate, Casper And we also need to keep track of the mouse. So far, mouse equals and you three dot defector to and let's go back to the three jazz stocks and copy this directly from there. So that's gonna keep track of the mouse positioning. Go back those on this move on, But copy the event listener. So any time the user moves their mouths were gonna were gonna know where that is on screen . Okay. And now let's set up the countess to receive clicks so our canvas equals documents. Darts get on my tag name got the first canvass and that event listener. So when someone clicks, it will call a function so can start added and listener. Click on candles. Click. It rips function on campus. Okay, we'll set up the Ray Kaster and we'll grabs more this So break house for set from camera. We'll use the mouse, and the camera will get a list of anything that is underneath the mouse when they click that, and the one thing we want to add to this is we want this to be recursive, so we want it to be. If someone clicks, it doesn't just grab the top item. It kind of leaves through every single child of that which is helpful for using an object. Three. So Ray Kaster intersects objects, seen Children True. So that's gonna your Carson. We'll store some data about what they actually clicked, and we'll set this up. So far, Marker equals no for a marker. Data for market name equals no. And now we'll say when someone clicks that if intersex length, if they have clicked something and it's has interacted, we'll log out what they what they collect. Okay, now, if I go back here on a click on one of these items Sorry. We found error. I got a typo if I click this and that tells us that we've clicked a few items here and we'll just go back up to our original markers and we'll add some data as to help us to actually capture what they have collect. Um, what we have are markers Fridge on a circled user data dot market name, People's key. Okay, so hot back in here. If intersex, we want to go the top object and we want to root down into the object and the user data and the market name. Let's just go back to this in the window. So by default, this will return return a list of all the objects that have been clicked. And they're kind of sorted as it'll kind of give you the nearest one first. And we want to root down into the data behind that. So go grab. The top object will go into the root, we'll go into the object of it, and we're gonna go into the user data and look for more her name So if we're seeing marker names set, that means then they've actually clicked a marker. If we were to just click the bass guitar, there wouldn't be marketing set. So and we'll go on an just grab this. So we're gonna tie this back to the object from above, which means if they've collect this will grab the key for that. And the key that we're using is the same as the key from our our market data. So if you were to click the first marker, it would return zero. If we were to click the second marker, it would return one. And so once we flipped out, we can kind of grab the actual dad associated with it. So if you click the 1st 1 it will return position, headline and description on Let's maybe changes to something a bit more detail. So we'll go Tail piece and Rick. So now if I proved long this out, I should see if I click this return. Okay, so we've collect this particular tail piece or click this particular marker that has this position or has this description and headline. And in the next video, we're going to show how to position that on spring. Now that we know exactly what they've collect and we'll see you then 12. Displaying Tooltips: So now let's pop up some information. Once the user actually clicks a marker and we'll go back to our base. Andi was out. Placeholder so called this divide equals tool tip. And what happens is when someone clicks a marker will pop up this tool tip and populated with information about that particular marker. So tool tip position will be absolute. Um, we'll keep it off canvas or off camera, I guess, by default. So groups tights and we'll just make it. When someone clicks it, it will be visible on beyond Con straining. So pass it E one and also even a mass with of 300 pixels and development of auto. Okay, let's go back door code base and position it. We have this code. We know someone's collect a marker, and we know what specific market is. Now We'll go to Jewell tip container dot inner html people's. It earns go strong market data. Her name dot headline. Okay, so what's gonna happen is someone clicks it and it's gonna get the market data and pull in that information from above. So it'll populate the headline. It'll populate the description into some HTML and drop that html into the tool tip. And I guess the last thing we need to do is actually tell that tool tip where to be on screen, because it needs to be right over the marker. So we'll go if Marker name. So we set the marker name here, which is by default now. So we want to say, if someone's actually clicked a marker, then the active marker will be that tool tip container dot add class or dot close list. Don't add is visible. Otherwise active markers? No and till tip class lists remove. Is it so faded out? If someone's collected the screen and there's no Marconi that and we need to talk to position that marker. So go to what could a function for grabbing the ex wives values of the mouse Click and positioning the market there. So Karina function for that function position marker, and we'll just grab. Let position equals to screen position active marker camera, and we're gonna create a function called to screen position tips. So that'll tell us specifically where we've collect what that X Y value is. So far. Factor equals new. It'll it'll basically tell us, as as the screen is rotating like what The X Y position of an object in the three D scene is. And I guess instead of just kind of capturing the static value when someone clicks it, um, we want to be able to always know, like if the marker were to move, if someone to rotate the screen, Uh, where that tool tip is on the screen. So the tool tip data will rotate with the marker doubt itself. So vector equals new three dot factor three. And I'm just gonna grab this code base, which is something I stole for somewhere else but that will essentially returned the X Y value of any object in the scene. So now if are to log this out, he would tell me if I collect this groups tool tip container. Oh, and he's actually find that tool tip. So are tools have container equals document? I get element by d never to click this, it would tell us that the exposition is is 700. The white position is to 41 these at position is zero. And as you can see as it rotated to kind of get a taste that so Now that I have that data I want to go. If Position X is less than zero to the container dot style left equals zero. Which means if that tool tip is essentially offscreen, don't move the tool tip off screen and keep it zero else if position dot x plus tool tip container Not all set with his lesson window dot Inner with. So the opposite would be if that marker is actually off screen to the right. Don't position that the tool tip any further. Like don't position you data off screen sido position is that the default is position that info window right on top of the marker if it's basically inside of the screen, okay. And so that's setting the exposition and will set y position to be whatever the default is . So now when we click this, it should populate the tool tip and set the accident position to be wherever the marker is . And it's doing that except we don't set a background color. So, uh, well, set the background of the tool tip. So background color is white order. Color is black and lots of having to. It s a 10 pixels and found out families Ariel. So there you go. We click this. We actually have the tool tip hover over it and that borders and showing up. So let's make this a bit thicker, okay? But you'll see that it's not actually moving when I rotate the model, so we'll also want to do that. We'll go back. So now what we also want to do is go back to on camera update where we were checking for rotation and say when the camera updates position marker. So that's the same function we were just using to drop the marker on top of its appropriate area. So as the camera rotates on camera update, if there's an active marker, position it. So now, as I rotate that you can see the tool Tip is rotating along with it and maybe just clean up the padding a little bit here because that's a little too much, and that's a final peace. We're just gonna remove our tool to help her. And now that we've kind of learned how Teoh position markers had add them, we can flush that out a little bit more. So now you're gonna get sense of how to add markers the body, and we'll see that in the next video 13. Conclusion: and that's the end of the course. We've gone over the basics of creating a scene, importing external models, lighting it, allowing just two explored with or become fools and use rape casting. Using the method, we went over to get co ordinates. I've added a few more relatives to the model, and here's the final results. From here we could do things like at a pre loader, or rotate the object to fit the users free import promoted. So I'd love to see where you take this knowledge next. So definitely if you have anything that you love to share with me love to take a look at it . I love talking about this stuff, so feel free to reach out to me. And aside from that, thanks for watching and we'll see you next time.