3D on the web with React

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone, and welcome to another episode of "Learn with Jason." Today we're going to be doing something that has always kind of boggled my mind. We've dabbled with it before on the show. In fact our guest today has been on some of my other shows as well, doing some what we're going to talk about today. If you have ever seen her and are curious how she does the magic that she does, today is the day to learn. Please welcome back to the show Sara Vieira. How are you doing, Sara?

SARA: Hello, Jason, I'm doing well, how are you? Isn't it like 8:00 a.m. there?

JASON: It's 9:30.

SARA: Okay. It's not so bad.

JASON: I've become a morning person. I'm up at 6:00 every day.

SARA: Will that happen to me when I get older?

JASON: It might. I was not a morning person when I was younger. In my 20s, I would wake up at 9:30, 10:00, stay up until 2:00 in the morning coding. These days I'm like, 8:00 p.m., bed, time to go to sleep. [Laughs]

SARA: What time do you have dinner?

JASON: Like 5:00.

SARA: Oh, my God, what? I realize during not living in my country, that my country is the weird one that has dinner at 8:00. And Spain has dinner at like 9:00, 9:30.

JASON: Spain was hard for me. I went to Barcelona and we would try to go to dinner on my schedule, of like 5:00 p.m., and they were like, it's still lunch, what are you doing here [laughs]?

SARA: As an Iberian person, I must stop you from saying Barcelona is Spain.

JASON: Oh, sorry, my apologies, my apologies.

SARA: Fucking Americans. Your geography. Like if you try to get dinner at 5:00 p.m. in Portugal, people are going to look at you weird.

JASON: We were like tapping on the windows at 7:00 p.m., because they hadn't opened yet. We were like, how are you not open, it's dinner time.

SARA: They open at 7:00. This has never been a problem for me. I would like to specify that I've never had a problem with this.

JASON: No, you're an 8:00 p.m. or later dinner person.

SARA: Yes. I don't know. There's just this really weird thing that apparently is not a thing in Spain, I've asked my partner, but it's like, if you eat early, it's like the earlier you eat, the poorer you are, this really weird misconception, like weird urban myth, if you eat at 9:00, you must be fucking loaded.

JASON: Fascinating.

SARA: So people will eat later, to appear to be more -- so weird.

JASON: I'm not wired like that [laughs]. All right. So we've picked up some details from this conversation already. But for folks who maybe aren't familiar with you, do you want to give us a bit of background?

SARA: Yes. My name is Sara. I've been an engineer about ten years. This is the thing I say every time. In this interview that Jason is performing, I'm going to tell you about my life story. So my name is Sara, I'm originally from Portugal. I lived in Berlin about five years, I moved out, it was a great decision. And I live in London now, on the outskirts of London. So been a programmer about ten years, do mostly JavaScript, TypeScript, all of the NCS stuff. Lately, for the past couple of years, I've been doing a lot of stuff in 3D, React-three-fiber. It all started during the pandemic, as one does, you have to get a hobby. So my hobby was learning Blender. Turns out you can't really learn Blender, you don't just learn it. But yeah. So that's about it. That's --

JASON: So you talked about 3D.

SARA: I did.

JASON: And so you've been on this show before, but you've also been on my other series where we had the four devs build an app. And in your app you built like a 3D Gameboy that was rendering HTML inside of it.

SARA: Are you looking for the link? Because I have no idea where it is.

JASON: No, the link is on YouTube video if anybody wants to find it.

SARA: Oh, cool. Yes, I did.

JASON: That project, it was one of those moments where it kind of opened a door in my mind and I realized there's more we can do with this than I thought because I had always thought 3D was one of those things that it could be on the web, but it was on the web the way that a video is on the web, you like create a container for it and you shove it in there and then it's just sort of there. But you had done this sort of, it was like a turducken of web interactivity, inside the 3D there was web, and you had like an interactive HTML document. It kind of melted my brain.

SARA: Your mind.

JASON: It really did, I hasn't imagined that was possible. I'm very excited you're on today because I feel like you're doing things that I'm not even aware are possible with 3D. And I'm excited to learn a little bit more about what's going on in that world, because it's just not somewhere that I spend a ton of time.

SARA: Let's do it.

JASON: Before we do anything with the code, I want to talk a little bit in the abstract about it.

SARA: Yes.

JASON: 3D, I'm starting to see more of it popping up on the web. Is that a case of 3D has become more accessible to developers? Did something in the browser change? Is it that devices got more perform -- like what changed, that suddenly we're seeing 3D where we weren't seeing it five years ago?

SARA: First of all, browsers got -- the engine got better. You're going to download like 40 kilobytes of JavaScript either way, might as well download a model for 3D. That's a lot of it. But things like React-three-fiber are really helpful, 3GS is very good but 3GS is like, what's the name, you know what a J query is, very declarative.

JASON: Procedural? I know what you mean.

SARA: A lot of typing. So much typing. So like I think things like React-three-fiber, there's also -- are a huge help. So like I think there's been more and more, because browsers got better, except Safari, but every other browser got better. And like Internet got faster as well. Most people have way better Internet than they had five years ago, me included. I had 12 megabytes of Internet five years ago. Now I have 1 gigabyte. It's my first time having a gigabyte of Internet because I used to live in Germany and they don't believe in that.

JASON: Because the U.S. is like that too, it's rare to find fast Internet, like at my house, I have fiber Internet and it's on my personal whatever. At my studio, it's considered business Internet and they do not offer fiber, like it's not a thing. So I pay three times more for Internet that is like half as fast because it's business.

SARA: When I moved to London, I actually lived right in the center. We had 60 megabytes of Internet. That was the fastest we could get. Moved to zone 3 almost like at the outskirts and it's like, do you want to pay 30 pounds for a 1 gigabyte Internet? I'm like, yes, Virgin Media, please. They gave me this monster router that literally I can get Internet on the third floor.

JASON: Oh, my goodness. This is the thing, there's a lot to be said for newly-built infrastructure when you're trying to optimize for tech. And so like the old core is all historical and they won't dig anything up or replace anything, it's all limited to what they can do with existing copper wires, whereas something like zone 3, they don't care, dig it up, who cares?

SARA: They built it back in 1965. [Laughter] It's a great time. You click on download game on the Xbox and the game just do it.

JASON: It's amazing.

SARA: You look at it going and it's like gigabytes and I'm just staring.

JASON: I'll upload a terabyte of video, after one of my shows, I have to upload it to a platform so my editor can grab it. As I'm doing that, if I do it at the studio, I just watch it for days. If I do at at home, I can see the bar moving. It still takes an hour or two, but it's like --

SARA: An hour for one terabyte, that's fine.

JASON: Right? I'm totally okay with it [laughs].

SARA: That's fair.

JASON: Fiber, yeah, the fact that we can't get fiber everywhere bums me out. But okay. So technology improved. The Internet improved. Our access to things improved. And then I guess like somebody asked about web GL in the comments, like is web GL part of what's making this work?

SARA: 3GS is web GL. You can write shaders that are -- DQL, that's not -- it's shader language. I don't remember what the acronym is.

JASON: Oh, HS --

SARA: GLSL. Even in React-three-fiber, you can write it. All of these things are just like layers on layers for graphics programming, because I don't want to do graphics programming.

JASON: That's also true, like in Blender, Blender is like a big abstraction over the top of shaders, right? Is that correct?

SARA: I don't think Blender per se is. Like I think the materials are. When you apply a material to Blender you're basically doing a shader. Let's say you want to create something in Blender from a plug-in, they made the plug-ins really easy that you can use Python, then you're basically like abstraction of an abstraction of an abstraction of that.

JASON: Got it, got it. Cool. Okay. So I have a million questions but I think they'll all be easier to show rather than tell. So why don't I switch us over into the programming view and turn on the banner so people know what we're talking about today. And then let me give a quick shoutout, we've got this episode, like every episode, being captioned. We've got Lee here from White Coat Captioning, thank you, Lee, for being here. That is made possible by Netlify, who covers the sponsorship for captioning, and then we also have a new sponsor which is a tool we've been using for the last couple of episodes, called Tuple. What Tuple is doing is allowing us to pair program, Sara has the ability to draw on my screen, control my screen, we have a shared copy-paste, she can share links, all sorts of fun stuff is happening here. Yeah, exactly. So it's good tool, if you're into pair programming, or you want to -- [laughs] -- this is like the other thing that's fun about Tuple is that it's effectively a trust fall, because you don't know what's going to happen. But it's great. Anyways, we are talking to Sara today, this is an absolutely fantastic website, it makes me very happy.

SARA: Have you clicked on the things?

JASON: I didn't know I could click on the things. Oh, that's great. Whoa.

SARA: That's physics. Yeah, you can move.

JASON: That's dope. This is great. I mean, this is exactly the kind of stuff that to me has always felt like out of reach, you know? Like I don't get it, I don't know how to do it. And so for -- let me actually put this up on the site here. Do you have my browser right now?

SARA: No, I'm not touching it.

JASON: My mouse was just doing --

SARA: I got nothing. I'm on the other monitor.

JASON: We're okay. I think my -- oh, I have like the wildest mouse lag right now.

SARA: Oh, yes, the physics do a lot of lag on your machine. I've learned this. But I have not fixed it.

JASON: Oh, there we go, now we're back. Okay. So I'm going to go ahead and close that so that we don't have --

SARA: That's fine, if you don't click on them, unless -- like, the problem is physics.

JASON: I got you. But then you said today we were going to be learning about React-three-fiber. Let's maybe talk a little bit about what this is, because you had said 3JS is shaders. And React-three-fiber is --

SARA: 3JS is an abstraction level above web GL where if you have to do something you have to write in GSL or C++. React-three-fiber is a wrapper for React. 3JS is very declarative. It's a lot of -- and even if you don't do React, this is easier to use than like 3JS per itself -- you know what I mean.

JASON: I know exactly what you mean [laughs]. Okay, I got you. And so if we want to get started here, what is -- oh, there's a question about view.

SARA: There is one for view as well. I have never used it. I am going to open it up here. I think there is -- nope. Nope.

JASON: But I think -- so the technology --

SARA: It is JS. I will send this over.

JASON: You can drop it right in the link thing. Look at that. Okay. So this is 3D in Vue. So it is indeed possible. Let me drop a link to this.

SARA: I love that it's called Threejs.

JASON: One of the things the community has going on for it is that everything they do is a riff on the thing it's ported from. Like it always makes me laugh.

SARA: Yes.

JASON: Okay. So if I want to get started --

SARA: I would download Vite.

JASON: I'm going to open up this -- this is my -- whoa.

SARA: Again, not me, my hands are here.

JASON: Okay. I'm going to go into my GitHub, we'll get into "Learn with Jason," we'll create Vite and put this in a folder called 3D in React. We'll move into this new project.

SARA: Then you need to install Threejs and React-three-fiber. Just copy from the docs. That was absurdly fast, I couldn't even see it.

JASON: Let me knit this and make things a little bigger again. Okay. We have --

SARA: We have a project that if you start it up, looks correct.

JASON: So we'll NPN run dev. Sometimes it opens in the wrong window because I have multiple browsers up.

SARA: Oh, that's fair. I was like, what are you doing, sir? Are you an idiot? [Laughter] Okay. So first things first. Some things to note. First of all, you can't just start a project like this without a canvas element. If you go on the app, DHX, that can definitely be smaller.

JASON: We'll go like this, we'll open up the app TSX.

SARA: That works too. You try to put in a mesh. React-three-fiber exports components not known by the browser. An example of that is a mesh or box geometry or something like that. If you just try to use it, you don't have to import it, it's a lower case. If you try to use it, it will just not work, like period. So, first thing I would do is actually export -- okay. So -- can I?

JASON: Yes.

SARA: It's hard to explain. I'm trying to communicate in language that's not my own. You can't make fun of me. This works so well, people stopped making fun of me. Okay. So basically -- wait. How do you -- oh, there we go. So export default, create a function. That's basically all I'm saying. Instead of exporting app, creating a function that wraps app, create another component around it, because it needs the canvas around it to be able to access a bunch of the hooks and stuff.

JASON: Got it. Okay.

SARA: Wrap that in a canvas -- that needs to be upper case.

JASON: Other we're bringing in the special canvas. And app inside of it, yes.

JASON: We'll take you and you go in the middle.

SARA: Yes.

JASON: Okay.

SARA: Okay. So now everything should break. If you try write anything inside the app, try to write text inside the app, or anything inside the div, doesn't matter. I hope it doesn't work.

JASON: Yeah, nothing.

SARA: You basically changed name spaces, you can't use the normal HTML things. There is something that will install that makes you a lot -- Jesus -- that allows you as a human being to use HTML things. But for now we basically need to use React-three-fiber things. So, second thing that I would do is just have a mesh. So, create a mesh with lower case. Okay. So a mesh -- and close it. So a mesh -- sorry, you need things inside of it.

JASON: Oh, got it.

SARA: I'm so sorry. That's fair. That was on me. Basically a mesh takes two things inside of it. There are shortcuts, if you saw React-three-drei, it takes the geometry of the mesh and takes material. If you want to create geometry, you have to know what geometry you want to create. You can do ring geometry, or you can do cone. Do cone. Then you have to pass arguments to it. The arguments are the things that you would pass through Threejs. Can you open the docs for Threejs cone? Or I can open it.

JASON: Threejs cone. Cone geometry, here we go.

SARA: Yes. You see up to pass these three, the radius, height, and radial segments. If you pass that in an array, that will basically do the same thing. That's an array.

JASON: That works like this.

SARA: Object array. Then just pass 5, 20, 32, we'll see the difference in what the hell is happening. Okay, cool.

JASON: Is that self-closing?

SARA: Yes. Then a material. The most normal material is mesh standard material. Mesh. Standard -- yes, that's it. Then a color, color red, you can literally just type red. Cool. So now if you open the browser, you have a sad cube. It's actually not a cube, it's geometry. This creates a canvas. We need to make sure the canvas is full string. It can have a background, it can have whatever you want. So that's something you can do, exactly. So make the canvas 100VH.

JASON: Let's open up our app, all of this is not stuff we're using anymore, we'll do a canvas and we will make this display block. Inline -- I learned all the new names, now I'm trying to remember to use them.

SARA: What is inline size?

JASON: It's the replacement for width so it respects directional languages.

SARA: Oh, that's cool.

JASON: Then you have block size is the replacement for height.

SARA: That's cool, I didn't know about those. Am I learning with Jason?

JASON: Indeed.

SARA: Wow.

JASON: Then we've got our canvas. Where's our canvas? It's not getting this changed. Do I need to save here to get it to reload? Yes.

SARA: Yes. Cool.

JASON: Now we have a full screen canvas.

SARA: As you can see, it looks like shit, and this is on purpose. I'm going to ask you first to install React-three-drei. Yes, please install it, it's very good.

JASON: And that is spelled D-R-E-I, right? Look at the docs.

SARA: React three/drei. Okay.

JASON: And this is helpers in the same sense that something like low dash is a collection of helpers for JavaScript utilities, this is a collection of helpers for 3D?

SARA: One thing that you have is orbit controls. So I would say like next to your app, like -- no, you don't need anything there. Oh, you need run, that's fair. So on the canvas, after you started your app in line 15, orbit controls, import something called orbit controls with an upper case O, and close it. Cool. Now you can go to the page again. And now you should be able to do that.

JASON: Look at this go.

SARA: You can scroll with your wheel. If you go back you can see we actually have a cone. But the way that 3D works is if there are no lights, you literally cannot see anything. So like if you don't put a light onto something, then the light has nowhere to hit and blah blah blah blah blah.

JASON: Got it, okay.

SARA: The easiest light you can add is something called an ambient light. You can add it anywhere. If you just -- lower case, sorry. And just intensity and put, I don't know, 1. You can also change the color if you want.

JASON: Boom.

SARA: Yes. Now we have light and we have a 3D object. You must be wondering, sir, why does it still not look really 3D?

JASON: In fact I was wondering why it doesn't really look 3D.

SARA: I can read your mind. Okay. So the way that ambient light works is it sprays light equally over everything without creating shadows. So there is no equivalent to it in real life. Think of the sun, but it never ends. So think of my home country of Portugal, please. You think it's funny until you don't have AC and it's 40 degrees, like the high 90s, y'all. So there are other types that we can use. So we can use something like a spotlight, for example, which creates more, or a point light or something like that, which are better. I physically just wanted to show you how it works. So that's why stuff like this happens. So usually I use -- if you put in a point light, it's also lower case, if something needs to be -- you need to pass a position to it. A position is always going to be in X, Y, Z. I think this is X, Y, and Z, I'm pretty sure. It's not the same as Blender which is very confusing, in Blender, this is Z. Okay. Just pass zero zero zero in an array. And then intensity, 4 or something. And that's it.

JASON: I have to actually close the tab.

SARA: Okay. So first thing that's happening, everything that you put on the screen by default is at position zero zero zero, which means --

JASON: We just put our light inside.

SARA: Inside, yes. If you push it up to 5 or something in the Y.

JASON: In the Y we'll go 5.

SARA: I actually don't know the height of that, make it 25. Do we have a light?

JASON: We do not yet have a light.

SARA: That's probably way too high now.

JASON: Do you want me to do it over?

SARA: Maybe. Or make the other thing smaller. So this is radius -- so the height right now is 20. So I would put the height at 5. And the radius at 2. Which is the first one. Yes. And that one a 2 as well. Okay. Now if you reload that, it should be fine, now we have a point light and it's not really doing anything, and I would like to understand why. So the position -- okay. So we have 2, 5, do 7, minus 1. How is this not --

JASON: Am I doing something wrong?

SARA: I do not believe you are, sir, no. Let me go to your string. Okay. So -- can do I this? No. Maybe? Yes. Look at that. Where is this light? So if I put this intensity at 50, I wonder what happens.

JASON: Nothing.

SARA: Absolutely nothing, that's interesting. If we remove this, does this work? No, okay. I'm sorry. I don't know how to -- can you comment this, commenting on Portuguese, it opens the help. Oh, there is a light.

JASON: So do we need it to be way stronger or something?

SARA: Let me change a bunch of these things. If I put it in here at 10 -- huh. It's really not strong at all.

JASON: It is a baby light.

SARA: You know what, that's why.

JASON: We just needed it to be really strong.

SARA: Yes. I don't know why. Now we have a light, that makes a lot more sense, this actually looks 3D. I had no idea where this was going [laughs].

JASON: This is great, we have now something that's actually kind of got the -- we moved the shadow a little bit or the light a little bit so we actually have a shadow side and a light side. We've got the bottom that has no light on it at all. This is exactly what I would have hoped for.

SARA: Cool. So we're done. Thank you for coming to my Ted talk. So, okay. You may notice that it has a bunch of like lines around it, right?

JASON: Mm-hmm.

SARA: That's the last number. Can I scroll up here? I can, it's just very slow. There we go. You passed a thing here called 32 -- it's not called 32, you passed the 32. Those are the radial segments. So right now, like you have 32 settings around it. If you counted, which I will advise you not to because there's no point, but you can, it's going to have 32. So the more high poly you want it to look, the better you want it to look, the more segments you have to put there. If you change that to a 5, you'll see immediately the difference. Instead of 2, put in a 5. And that will apparently break this. So if you look at that now, that looks like it's a PS1 cube. That's because it is. It looks adorable, actually, I kind of want it. But this is not -- okay. So if you change that to 60, for example --

JASON: It starts to look a lot more -- if I zoom in, I can spot -- but it's much less noticeable.

SARA: This all comes at the cost of more CPU power, it has to draw more stuff like that. Does all of this make sense to you so far?

JASON: I'm with you, I'm following.

SARA: Okay, cool. So do you want to talk about materials?

JASON: I would love to know what materials are.

SARA: Materials are the clothing you put on your 3D models. A mesh standard material -- actually, okay, let's do something different. Instead of creating the mesh standard material like this, in the app, so in here, oh, my God, I keep opening my VS code, and then I have two Chromes and then everything is gone. It's gone, Jason. Create a console of material and make it equal to new.

JASON: Equals new.

SARA: Mesh standard material. That comes with Threejs. And then open -- it's a function, yes. And then instead of using this mesh standard material on line 13, you can delete it. And then use, in the mesh, use pass a prop called material and that is equal to that material. I think that's how you do it. Yes.

JASON: Okay.

SARA: Cool. So now it's white, because that's the default material. So now you can see like all the stuff that we actually have access to. If you just like command space, whatever, this is actually all of the stuff that we have access to change. I find it easier to do it this way when it comes to materials, because I have way more access to these things. Let's start with the color. So set a color, pick whatever color you want.

JASON: We can go color, and this time we're going to try hot pink.

SARA: Cool. Okay. So now type roughness. For roughness, it goes from zero to 1. So zero is glass, basically. I don't think you can -- can you see the difference?

JASON: You can't. Let me hit 1.

SARA: There is a difference. Can you change it to mesh physical material which is like the good material. So you have -- so instead of using mesh standard. Yeah, that's the good material.

JASON: We're bringing out the top shelf stuff here.

SARA: So that's roughness 1. If you change that to zero, and metalness, put it to 1. It is not working. Is it not roughness? Okay. Wait, wait, wait. I may have made -- there has to be -- nope, nope. Ooh, that's cool. But no. It is, though. I'll add roughness. There's another name but if you change -- yeah, change it around. Oh, okay, that's better.

JASON: It had to have something for the --

SARA: I think this has to do with the fact that we don't have shadows and a lot of lights and stuff.

JASON: There was nothing to reflect light, it was sliding right off. In my head that's what the fact is.

SARA: Yeah. So that looks -- you know, looks fake, I don't know how to explain it, it looks like Play-Doh.

JASON: I got you.

SARA: That's the main difference you can see. If we really want to test a lot of this stuff, there is something called a stage that you can import from React-three-drei. It's just a component where you put a mesh inside of it and you can create something that's much better with light.

JASON: Than we can start messing around with other stuff.

SARA: It kind of becomes glass. If you made it gold now, it would look like gold because it's metal.

JASON: Let's do it. Ooh. Look at that. Okay. I get it.

SARA: So that's the main two things you'll usually use. There's other things like sheen and shit. I never use that. Like, the same things you have there are actually -- yeah, then it's just like very shiny plastic.

JASON: Okay, that's plasticky. Then you go in the middle. All right, I'm with you, I'm following, this is cool.

SARA: It's cool, right? What do you want to do now? It's a very good question.

JASON: Yeah, I mean, we've got a surprising amount of time, actually, which is wonderful.

SARA: Oh, my God, we have 52 minutes. Okay. So let's do some animation, I guess.

JASON: Yes?

SARA: Okay. So first of all, all of these meshes actually have an on click. If you add an on click manager to your mesh, you can for example --

JASON: Okay. Console clicked, then we'll open up the console. Look at us go.

SARA: You can click on things. So that means you can actually like change the position of stuff and like make it bigger or something, right? So let's say there is something called scale in the mesh, right?

JASON: Okay.

SARA: If you add a scale of 2 to that mesh -- yeah, I think it's scale. Yeah. Scale, 1, 2. Put 2.

JASON: Okay.

SARA: It gets bigger. So the main thing is, you change this scale and animate it the exact same way you would in normal React, right? So change the color of the material. By clicking on it.

JASON: Got it. So we click and that would be material dot color equals -- we'll go back to hot pink. It doesn't like that. String is not assignable to type color.

SARA: Oh, no, I think that's actually fine, because you're passing it as --

JASON: How about that? No, that's not it.

SARA: That's what they told me in my boot camp.

JASON: Are they really going to make me do that? Boo. Okay.

SARA: Oh, there's something with hot pink, I think, that's the thing that's not working, maybe.

JASON: Interesting.

SARA: Or not. No, you probably have to initialize the new color thing from Threejs or something. Threejs, color. Yeah, it's 3, that color. Just the color. Just the color, otherwise it won't import it automatically.

JASON: Color -- how do I get the color from 3? Where is --

SARA: Oh, it's already imported. Then pass hot pink in it.

JASON: Like so. What are you mad about, dude? What is the error? Oh, it needs to be --

SARA: That's fair. New color.

JASON: Okay. Ta-dah.

SARA: Isn't that the coolest thing you've ever seen?

JASON: It's pretty slick, aside from me not knowing what the things are called, it's pretty -- like this is doing exactly what I would expect it to do.

SARA: Right?

JASON: Even though I'm in a space I'm not familiar with.

SARA: Right, that's the really cool thing about React-three-fiber. It does what you expect it to do. Like, the things you're typing make sense. Okay. So if you want to animate, let's say you want to animate something as time passes, right? You have something called a use frame hook. Basically what happens, use frame runs every frame which is about 60 times per second on your machine, probably, unless you have a really bad machine. It will run about 60 times per second. I don't think -- I actually don't think computers do 120. That's not important right now. So if you try to like -- how would you go in a React component to animate something like this, if you had something like use frame, which is basically request an admission frame, how would you go about it in a React?

JASON: This is a great question and a great way for me to anger everybody. The way that I would do it is I would probably -- this is where I get in trouble because I would opt out of React entirely and have a use effect that got me an ref.

SARA: That's literally what you have to do. [Laughter]

JASON: Perfect. So I'm going to get a ref.

SARA: Pass the ref to the mesh, basically, as in ref equals mesh. That's it. Cool.

JASON: What are you mad about?

SARA: Oh, God.

JASON: Oh, I have to do a thing. What's the thing?

SARA: I have no idea. Oh, that works, great.

JASON: It's a whole goofy thing, I remember dealing with that before. So I got my ref.

SARA: Use frame, which is --

JASON: Is that one of these types?

SARA: Yes. It's basically -- you don't have to put any weird array things at the end.

JASON: No dependency array, okay.

SARA: No. That runs literally every frame. Let's say that you want to move this, right? Let's just do like a very simple, like it's not going to move -- yes, red current, that position, that Y equals whatever.

JASON: Okay. Where is our position now? We're at --

SARA: It's zero zero zero. We didn't change it, so it's --

JASON: Oh, we didn't change it. So we can change it to like 2?

SARA: Yes. And now --

JASON: Ah, it zooms in.

SARA: No, the zooming comes from the stage thing. If you go to stage --

JASON: But that moved it up.

SARA: Yes. If you go to the stage component, it's adjust camera false so it doesn't do that thing. And it's easier to see those things. Okay, cool. That's beautiful, isn't it? There we go, cool. So it moved it up. If you wanted to do it over a period of time, then you can just do like plus, minus zero point -- you know what I mean, plus equals or something like that, right?

JASON: Yes. So we'll do a plus equals and we'll do it real slow because that's going to happen pretty fast, I think.

SARA: It is.

JASON: Yeah.

SARA: That's it, that's all you need to make it go into its own planet. It's gone now.

JASON: We'll just keep zooming out and we'll watch it go.

SARA: So now, I have no idea if this is actually going to work, but we're going to try math. I'm glad we're having this conversation [laughs]. Okay. So let's say you want to move it like this, right? You want it to go up and down. So that's basically -- [laughs], so you know math, that sign, I didn't know how to say it. I just kept thinking, my entire life, one time I was at this conference and I was like, you have to say math, not sin. Someone came up to me, it was so funny that you kept saying math not sin, I'm like, what do you mean, how do you say it? I am very happy that I carry a personality where if I say that, people think it's a joke and not that I'm dumb. That is joyful to me. Okay. So JavaScript actually has a math not sin, I will continue saying sin, I don't care. It's try to add math dot sin, I think you have to remove the plus.

JASON: 7?

SARA: Yes. I want to see what happens because I don't remember. Yes. So this will actually have to be multiplied, I'm pretty sure I know what I'm saying, but I'm not entirely sure I know what I'm saying. Let me open up my -- nope, nope. That's my keyboard.

JASON: Do we get the current frame in here?

SARA: Yes. So that is in state. You get state from it. No, it's two different things. You get state as -- yes. Then you have state -- you don't need anything else.

JASON: Oh, we get state, delta, and the third one is the frame.

SARA: You don't really need the frame because you can get state at elapsed time.

JASON: So state dot clock dot elapsed time.

SARA: That's the time that's passed since you started doing the thing.

JASON: This feels like it's going to get real chaotic so I'll just let it rip.

SARA: It did not get that chaotic. It just goes very slowly. You can multiply the elapsed time by 4 or 3 or something. I think you have to put it in brackets. That's the math thing. That worked, okay, that's cool. Okay. But it's going.

JASON: Okay. So that's doing a thing. And then what we -- so what I've seen done, and I'm trying to remember here, there's like a -- because we want it to oscillate, right?

SARA: Yes.

JASON: And to do that, we get oscillation by --

SARA: Math as sin?

JASON: Even if we're using the math dot sin -- oh, we want to scale it by time, not by --

SARA: I'm looking at my own code, when I did this.

JASON: Let's see what happens here.

SARA: Oh, yeah, no, that's it.

JASON: It is. Thank you, Chow. Oh, Chow, what's up? Dope. That's very cool. Then we would probably need to do -- it looks like this is taking us above or below the plane, which is why we use it halfway.

SARA: Yes, we can do 2 or 1 plus math dot sin, that will start it basically at 2.

JASON: Now we have a hover cone.

SARA: Isn't that cool? We could also change the camera. Make it slower, make it faster. You can do this with rotation as well. So rotation works in an interesting way, zero is zero, but 360 is actually math -- 180 is math dot pi. Oh, my God, sign, not sin. There's no G in there, why am I saying sign? Let's say you want to rotate it. Can you copy the same thing and put rotation instead of position and remove the plus 2?

JASON: Okay. Rotation. And we're rotating the Y still?

SARA: You can rotate whichever you want. Let's put the Y, yeah. Actually no, let's put X, because Y, you can't really see it. Is it Z? No, it's X. As you can see, basically the same thing happens. We can do this with pretty much anything, you can make anything oscillate.

JASON: I like it, now that we've turned it a little bit, you can kind of see the --

SARA: You see the shadow move.

JASON: You see the shadow move, it's got like a 5. Looks like a bell swinging or something.

SARA: It does have a vibe. Okay. So let's make a clock, guess. First of all, let's adjust the camera. So roll up that page. Looks like shit. Okay. If you go on the canvas, you can pass a camera prop.

JASON: Okay.

SARA: Then I think in there you pass position. You need another object.

JASON: Another object.

SARA: Position, right? Okay. So just set zero zero zero and see what happens and we can fix it up from there. You're inside the cone.

JASON: We're inside the cone.

SARA: The Z wants to come back. So, minus 3. Try minus -- no, minus 3 is way too little. Minus 10. Okay. There we go. Cool.

JASON: Nice.

SARA: This is what we want, right? Do you wish to rotate it, sir? It seems like you wish to rotate it. Because you just rotated it.

JASON: Let's rotate it a little bit. We can do that --

SARA: In the same place, we can rotate the camera, if you want.

JASON: We just kind of give it one of those and see what happens? No.

SARA: Now you need to -- it was like, no. Nah nah nah nah. You can pass rotation instead of position. That's for position. What we want to do now -- wait, is it? No, that doesn't make sense, actually. No, that doesn't actually make sense, I'm an idiot, it's the position, you are correct, I am so sorry. I am an idiot. You need to move it to the right.

JASON: There we go, hey, hey.

SARA: Cool.

JASON: This is great. So we're tolling the bells here with our little guy. And we can lift this up, and now we've got kind of a top view.

SARA: You can rotate the camera, if you have a top view, and you want to do this, you can rotate the camera, X, Y, Z, all that stuff. Tough divide shit by mesh dot pi.

JASON: We're moving the camera around the subject, it's on a circular track.

SARA: Yes, you need to do this on the X, maybe.

JASON: This could be a fun thing to figure out, what if we want a sweeping Michael Bey shot where the camera is going around the thing.

SARA: We can do that.

JASON: We have to animate the rotation of the camera.

SARA: No, you have to -- yes. You have to animate the position as well, right?

JASON: I think so.

SARA: Right? You start here, if the thing is here, you have to go around like this. You have to make it go in a circle. And that sounds like a pain.

JASON: We can skip that if there's something else you want to show.

SARA: To ease around it, sounds like a pain.

JASON: It does sound like a lot of math. Because the camera would be moving like this, but then we need to rotate it.

SARA: While we move it around.

JASON: Right. We would need to be adjusting the X and Z positions.

SARA: All the time.

JASON: While pointing the camera at the center, which is a lot of math.

SARA: Yes. I think there are helpers for things like that.

JASON: Feels like the sort of thing where I would Google that, because somebody's done that math already.

SARA: Someone has definitely done that math before. Like there is no way. But there are -- okay. So -- yeah. I don't think we're doing that. Mostly because that sounds very painful for me. And I don't know if I want to.

JASON: I get it. I get it.

SARA: But like that's basically -- by default, all cameras are perspective cameras. So things make sense. So like you have a normal perspective of things. You can also use ortho graphic cameras. Give me a second. I need to Google ortho graphic camera. It uses orthographic camera, thank you, Threejs, versus perspective, it's hard to understand, it's hard to explain. Okay. There we go. Okay. So if I copy image, can I -- can I? I don't think so. Can I paste an image on your machine?

JASON: I think you could like share the link to the image address, share that, it should pop up.

SARA: That's the difference, right? So you can also make an orthographic thing. There's a bunch of videogames that work in an orthographic sense. There is an ice cream man in my neighborhood and every time this person comes, I am in a meeting. I have not seen him. And like this is --

JASON: We all understand if you need to go out real quick.

SARA: No, I've tried running, I have not seen this man. I'm not sure it's a man. Maybe it's a nonbinary person. But I have not seen this person. It's been so hot, and I hate it. I'm on the third floor, I will die, Jason, on these fucking stairs. So that's basically the difference. We can also use an orthographic camera.

JASON: Got it.

SARA: What should we do now? I was thinking maybe we should try our best to try and put a model in there, right?

JASON: Let's do it.

SARA: To do that I would go to Sketchfab and download anything you would like from Sketchfab.

JASON: Let's see what we can find. Talk a little bit about what this is.

SARA: Epic Games bought Sketchfab, probably the only good game development company that's big. And I will die on this hill. They help in ways that -- Sketchfab is basically just -- think of it as for 3D artists. That's actually arts station, never mind. Which Epic Games also bought and made better.

JASON: So I can come in here and search for anything.

SARA: You can type something. Not all of them are loadable, some of them you can't see. You can change that to -- put that. And now get a hot dog.

JASON: Okay. We get a hot dog. Let's look. Here's -- this is a good looking hot dog.

SARA: You like it? That's your liking, sir. Okay, cool. Click on download model.

JASON: Now it's my turn to have a noise, the blower guy is here.

SARA: I am so sorry. You need an account.

JASON: That's okay, I feel like I did have one, I did something with Sketchfab before. I know, I have too many emails.

SARA: Are they all active? I have that a lot, I have a bunch of emails, everyone is not active anymore.

JASON: We'll save that so I can do that again in the future without having to figure out what's going on.

SARA: So you have all of these different formats. GLTF is usually the format used for the web, or GLB. I would use GLB because it's one binary, GLTF usually has two files, one binary and one texture file, and I like it to have one file. So before we do this, let's open it and make sure it's working properly in Blender.

JASON: I happen to have Blender. I have not updated Blender in a while.

SARA: That's fine, you don't need to update. Click anywhere else, now click A and X to delete everything. Yes. Okay. So file import. Is it import? Yes, GLB. You should have a GLB, GLTF, almost the last one.

JASON: Oh, or GLTF, okay.

SARA: I think they send you as a zip file. Do they? No, you're good. You can't drag it. Oh, I hate you. So if you want to move around, tough click on the mouse wheel and move, basically. Mouse wheel.

JASON: Oh, actually click on the mouse wheel. Got it. I understand.

SARA: There's no textures, that's because we're using the default render for Blender. Let me get the thing. If you go way up here, you have three, four different things. First one is wire frame. If you click on this one -- I'm sorry, I have the other stuff on. You can see these are all the vertices that are made up of this hot dog.

JASON: It seems like a reasonable amount. I feel like one time we did this, we had a model that came in that was like this really simple ghost but it had infinite lines in it, it was like so many.

SARA: Like if you want to do that, you can go into the hot dog and just do command 2.

JASON: Is that one of those things I'll regret doing?

SARA: It subdivides the hot dog into more and more pieces. Like if you go on the mode that we were before in here, you can see that it's absolutely --

JASON: I ruined it.

SARA: I can help you find this, you can remove it. Just go here. I am on -- okay, cool. This button here.

JASON: Got it.

SARA: You can just remove this on the X. Oh, my God, wrong screen. Okay, cool. That's it. Cool. So if you click on the third thing at the top, you can have shading which allows you to actually see the materials in it. All of the lights are generated by Blender and all that stuff. If you go on the last one and you click on it and that's like normal, actual shading, you can see that it's for some reason still working, because this is weird.

JASON: Maybe this one is like a photo texture or something.

SARA: Still, it should -- can you go down here? Oh, it does that, that's cool. Yep, just has -- oh, it has some lights, probably, somewhere. I guess it has some lights. No. It's just weird. That's cool. We don't care. It actually doesn't matter for this case. If you do command A right now, so I can just show what I mean -- is it not command A? Shift A. Yes, mesh Q, click on the Q. You can see that it has no color, no nothing, but if you go on the other mode, now you can see it.

JASON: Got it.

SARA: It's a different kind of material they use that's weird and still works. We could fix that but I don't think that's an important thing right now.

JASON: Got it.

SARA: Now select your Sketchfab model. And let's go on file, let's export it. You can click export and GLB-GLTF and put it on the public folder of your project, basically.

JASON: Oh, boy. What has happened here? Here we go. Okay.

SARA: There we go. Public, call it whatever you want. No! Sir, there were things I wished to show. No, seriously, there are things I wish to show, now otherwise it's all going to look like crap.

JASON: Okay, let me get rid of this, we'll try again.

SARA: File export.

JASON: And I'm going to calm myself.

SARA: Yes. Click on include.

JASON: We'll call this hot dog. Include.

SARA: Important to click select an object. Otherwise, in this case it may not matter because you don't have anything else, but by default it exports everything.

JASON: Okay. Okay.

SARA: And the other thing is, not transform, go down, go down. That's all fine. Oh, you don't have it because you have an older version of Blender. If you have a newer version of Blender you have something called -- you can use minimization. We're going to a website. We're going here to see if it worked. There we go. So you drop it there, to see if it's working properly. I made this website, I do not make any money from this, that would be really cool. Yes. So you can see it worked. We have a hot dog. The cool thing about this website is that it basically like gives you the JavaScript you need, like the React you need to use it on your website, on your project. So you just copy that. Actually if you type on the options up here at the top, go there, and -- cool. So now if you copy all of that, select it and copy it, you can create a new file called hot dog dot DSS.

JASON: This is a component?

SARA: This is a component, you're basically creating a component.

JASON: We're going to create a components folder and we'll get hot dog dot TSX. Here I should be able to import -- was that a default export? Export function model. Let me rename this. Now we'll import hot dog. And then down here, can I just drop it wherever I want?

SARA: Yes. No, you can't drop it inside of a mesh, it's its own mesh.

JASON: It's its own mesh.

SARA: Yes. There. After the mesh or before. Or you can just comment the mesh out.

JASON: Actually I want to see what happens if we try to throw two on the same page, because I've never really seen this stuff before.

SARA: It's inside.

JASON: My hot dog is inside the bell. Okay. That means we need to -- let's see. Load that. Now we've got our -- good, good. So then we need to reposition this. Do we have controls on this and stuff?

SARA: Yes, you have position. It passes the props down to the mesh.

JASON: My position needs to be like minus 8 -- or no, the Y would need to be higher, we'll make the Y 5, then maybe we'll move it forward. Look at us go, everybody.

SARA: And now you have a hot dog.

JASON: Let's put the hot dog on the ground. It's not a magic hot dog. What have I done here?

SARA: Oh, no, every -- no, yeah. Oh, I guess -- okay. If you go on the hot dog, the TSX, it may already have positions of its own. It may already positions of its own. It may be screwed up with the scale. There's a lot of random stuff that needs to be done in Blender that we did not do.

JASON: I'll do magic numbers until it's perfect.

SARA: That's what I do with basically everything.

JASON: Now we've got a bell and we've got a hot dog on the ground.

SARA: What else could we possibly want? Let's add some HTML, literally anything. The way to actually -- let's say you have these two measures, right? You want to add a bun, you can click on the hot dog. I mean, you can already click on the hot dog, you know what I mean. Let's say you want to add something that says $2.99 for limited period of time, the next five minutes. You can literally import something called HTML. Yes.

JASON: Okay.

SARA: Then type HTML inside of it.

JASON: Okay, all right. So we'll do a button. And that button is going to say --

SARA: Buy my hot dog.

JASON: Let's do this, pick up the hot dog, and we'll make it the ten-second rule.

SARA: Okay.

JASON: And we can like -- we could if we wanted to count that down. Already amazing. Already amazing.

SARA: The thing is, this all works in -- if you want to make the bun bigger, you can just pass style and move the bun around, because this all just works with position.

JASON: Is this HTML going to respect the app dot CSX?

SARA: Yes.

JASON: Hot dog button. Then in here -- oh, I need to make it a class name because it's React.

SARA: You don't, but --

JASON: I don't want it to yell at me. We get our hot dog button and we'll make this color red to make sure it's working. Look at it go. All right. So then I can just do whatever I want?

SARA: Yeah.

JASON: It's all position absolute, you said?

SARA: The pairing of it is, yes.

JASON: So --

SARA: Top 20 pixels and see if it works.

JASON: This is so good. Okay. We'll do top 20.

SARA: It's position relative now, that's fair. The parent is position absolute but that one is not. That makes sense. Cool. Carry on.

JASON: So we'll do one of these, get the hot dog here.

SARA: You're having so much fun.

JASON: This is exactly what I always want to do with a project like this, do something completely silly. So then in here, we want the ability to click this button and then cause an animation to happen.

SARA: Yep.

JASON: Okay. So if I want to do that, can I just create like a function of like move hot dog, and that function is going to -- I guess we do const hot dog ref, use ref, and down here we need to attach our hot dog ref. And then I can do something like hot dog ref current, and we would say Y, and just set it to 2.

SARA: Yes.

JASON: We could animate this. I think for the sake of proving that this works, I do that, and can I add an on click to the button that runs this function?

SARA: I think so. I'm pretty sure.

JASON: Let's --

SARA: I'm pretty sure, but I can't be --

JASON: What did I call it, move hot dog, I think. Move hot dog.

SARA: Okay. Oh, no!

JASON: I missed a piece. What did I miss? It says cannot set properties of null. So I missed something. Oh, yeah, I definitely missed something. It's the position.

SARA: Oh, the position, yeah.

JASON: Okay. There's my hot dog. And I've still missed something.

SARA: Oh, there's no current. Can you go on the hot dog that's -- is it passing the ref down?

JASON: Oh, yeah, why would it do that? It has no reason to do that. So hot dog is --

SARA: Oh, yeah, I guess you should just do it -- no, that doesn't make sense. That's my only thing, I don't know if it's passing it.

JASON: Can I just do --

SARA: Doesn't ref come in another prop, you have props and then ref? There's a whole fucking thing, that's why I would just move the HTML over there and just do it there.

JASON: That's a better idea, let's do that. We're going to take the HTML out, we're going to move it in here, we need a fragment.

SARA: We need a fragment, good old fragment, baby.

JASON: Then we'll take our hot dog and drop that here. Or wait, no, that's going to go in here.

SARA: Then you just have to create the ref.

JASON: Then I'm going to bring my ref in -- whoops.

SARA: You pass it to the group. You can think of a group, exactly like a group in S3G. What's happening, sir?

JASON: I'm just having a really hard time positioning.

SARA: Okay. Scroll down. Then you have the group there and you can pass the ref to that group.

JASON: Hot dog ref. Then I need to -- what are you mad about?

SARA: Oh, it didn't import it.

JASON: Then you need to be imported.

SARA: No.

JASON: Already imported. Then theoretically --

SARA: That should just -- yes.

JASON: Perfect. Now we have the ability to do that.

SARA: Yeah, you need to delete it from there. Oh, no, no!

JASON: What am I doing? Get that out. So now we've got our refs cleaned up. We've got our hot dog there. We want to get it off the ground. So we pick it up. Okay. And then we can do something really silly like we could just go in here and do a count joint at which point we would remove the click handler.

SARA: Yes. Yes. The time out keeps you going down, basically.

JASON: We'll do a set interval and this is going to need -- this is use effect. And then we're going to do one of those, because I remember how React works. And then call this our interval. And we're going to set an interval so that we have our -- oh, my God. You know when you have an idea and you're like, this is a really silly idea, and then you --

SARA: Realize how many set states you have to do, yeah. How many set states. It starts at 10, no?

JASON: Yes, it does. Auto import. There we go. You're going to start here. And then we will say set count to.

SARA: Okay. One thing about React. How did you learn to do that? Because I've had people ask me, how did you learn that that function is in a recurrent state? And I'm like, I have no clue whatsoever.

JASON: I think I learned it because something didn't work, and then I had to like -- what was it? Yeah, it was like I Googled it and realized that that didn't work, and so I had to like memorize that that's how that functions.

SARA: Right. I've never seen it in the docs or anywhere, it's one of those things that you hear from someone.

JASON: Yeah. So we'll go with less than or equal to zero. Then we will clear the interval and stop counting. Oh, and then we would also remove the click handler. So we would do hot dog ref --

SARA: Just remove it in the on click.

JASON: We'll just do this. If count equals zero, return. But what we can also do is we can hot dog ref, current dot query select, oh, my God, what am I doing? I want to get -- no, I can just do a document dot query select, get my hot dog button, and then I can set the inner text --

SARA: Why are you not doing this in React?

JASON: Hot dog is -- let's say -- ten-second rule has passed. Right?

SARA: Yep, that should work fine. It does not. What?

JASON: Oh, it's fine. That's silly.

SARA: Okay. Oh, you need to put the count in the button itself.

JASON: You are absolutely correct. Okay. So for each of these, we will button dot -- so this needs to live out here. And then we can button dot inner text.

SARA: Is it not inner text, does the text not exist?

JASON: It's yelling at me because it doesn't think it exists on type element, but that's because I didn't declare -- like I could get our button --

SARA: As HTML --

JASON: Element -- no. What are you doing? Button element.

SARA: Okay, cool.

JASON: But then this one -- so we would say -- damn it. Pick up the hot dog, time remaining. I'm doing this the hardest way possible.

SARA: I'm like, you have all of the tools there to make this easier for you. [Laughter] What happened? Also it's not actually changing. Because it's less than zero.

JASON: What have I done? Why am I not using the count --

SARA: I'm very confused with what you're doing.

JASON: I'm so broken. I'm out of the React happen here. Ten-second rule has passed. Okay. That's fine.

SARA: No, it's not. Oh, no, it is working now. Okay, cool. Just put it disabled if count equals zero, just in case.

JASON: That's a great idea.

SARA: Thank you. Oh, but then it's not -- okay. So we're like almost -- we're almost there.

SARA: You could just do it in there, right?

JASON: I definitely could.

SARA: I don't know why you're --

JASON: Why was I doing it the hard way? I don't know.

SARA: Just that count is going to be zero.

JASON: Oh, that's a good idea.

SARA: Did I tell you I'm in the business of the code? I'm in the code business.

JASON: We will change this to say if it's count, then we'll return this.

SARA: The cat has moved.

JASON: How much pain did I just put everybody watching this in?

SARA: I think mostly confusion. I think like I was just like, sure, jquery.

JASON: Sometimes you have to do it in the most frustrating way possible to remember why we use React in the first place. Ten-second rule. Let's try it again. If count. So that works. Now does it actually time out?

SARA: It should. Yes.

JASON: What did I do? If count is less than or equal to zero, clear the interval.

SARA: Wait, does clear interval stop the interval?

JASON: I thought it did. Am I wrong?

SARA: I don't know. I'm Googling it. This is not one of those, oh, my God, Jason, how dare you.

JASON: Wait, I have an idea. Math, max.

SARA: Yes, cancels it.

JASON: That will just keep it at zero.

SARA: That works, yes.

JASON: That way it shouldn't be possible for this to count down.

SARA: And yet.

JASON: Let's see. Counting down. It's at zero.

SARA: Yes. Okay. It's working.

JASON: Look at it go. Perfect. So that solves that problem. Is it still counting, though? Because it shouldn't be counting. That's the part I'm worried about. Is that it isn't in fact clearing our interval. We'll just call it --

SARA: Yep.

JASON: Oh, it ticked once because then it cleared the interval.

SARA: Okay, no, I guess it's not then. What the hell is that? You can remove the button, that inner text.

JASON: Can remove the button dot inner text, that is a great idea. And then we are returning -- okay. If I do this, it should tick ten times. Yes. I should turn down the number of seconds that this is allowed. Also it's the five-second rule, isn't it?

SARA: It is, that's actually a very good point. It is. Five is fine, but ten, Jason, come on. I think you just have to change the count from five to ten, everything else is using count variable.

JASON: That's true. If we decide it's five, it says it's five, but it does keep ticking. I'm confused about that. Why aren't you clearing your interval? If count equals zero, clear the interval. So we get our five ticks.

SARA: And it continues.

JASON: It continues to tick. I'm bad at intervals, apparently.

SARA: That's so weird. Can you go so low count? After the tick. What? Oh, it never changes the count. It doesn't track it. Because it doesn't rerender the page.

JASON: What!

SARA: You would have to use the ref. The page never rerenders.

JASON: Bro.

SARA: I think it's that.

JASON: Then how the hell is -- how is this one updating?

SARA: So the set interval I think actually only runs once, like the first part of it.

JASON: Oh, oh, oh, you're absolutely right. Yeah, okay. So I think we can even put it in a thing, like a set int, and then we can just clear this to be -- it will start out null, and then we're going to set int to be our interval. And then type of number is not set state action null -- oh.

SARA: Go to zero or something, yeah.

JASON: Do one of these. Clear int.

SARA: The int at the bottom as well. Oh -- oh, no, it's fine.

JASON: I think I refreshed something in the middle. Why aren't you counting down?

SARA: Oh, but it stopped, I think. No, it didn't.

JASON: This is still ticking. I'm so confused. You know what, does it matter?

SARA: No.

JASON: I think I'm going to be okay with this, this is fine. If somebody knows what we're doing wrong.

SARA: You have to use the ref, I think, that's the thing.

JASON: You have to use a ref?

SARA: The refs update even when the page doesn't update. Even when React doesn't rerender, ref still updates. So if you use a ref, refs are observables, I think.

JASON: Okay. So then what I would be doing instead is I would be saying, int ref.

SARA: No, I would do, instead of set count, I would do a ref, basically. And start with a current of 5. Does that make sense? Do everything you were doing before with the const and everything, but instead of using use state for count, use ref.

JASON: What? Okay.

SARA: Can I?

JASON: Go ahead, please [laughs].

SARA: Instead of using a state here, you can use -- oh, Jesus. Okay. Yes. No. Yes, no. It's acting like my mother. Okay. Count, current. If this doesn't work, now I'll look very dumb, because I'm over here being like, how dare you not know this.

JASON: It's count equals.

SARA: Sorry, it doesn't type at the same time I'm typing.

JASON: It's a little -- yeah. Then we got one extra -- yeah. Oh, it's helping so hard.

SARA: Right? There we go. Okay, cool. This is current. And this is const int equals. And then you just do -- we got an error here. Why? Is it this?

JASON: What's it mad about?

SARA: Okay. It was just this.

JASON: We need to fix --

SARA: I'm walking over there. I'm walking. I'm walking here. I'm going to New York for the first time. Okay. Let's see if that works.

JASON: Our count log up here was not changed either. So we'll count dot current that. And let's see how we do. Hey!

SARA: Yes.

JASON: You were correct. I have never used --

SARA: I've used refs like this all the time because React will only change things if the component -- like if it runs this use effect again, but it doesn't, because you only run it at the start.

JASON: This is fantastic. I love this. We have made incredible progress here today. And we implemented our own version of the five-second rule which I love.

SARA: Are you very proud of it? I'm very proud of it.

JASON: I'm very proud too, this is more than I would have expected to be able to do. We got our own little custom cone here with reflections and all those bits. We got a hot dog on the ground. We -- I broke something, but we're out of time. I'll tell you what. For folks who want to learn more about this, I'm going to send them to -- where did your website go? Oh, right, we had your website here. I'm going to send people to your website.

SARA: Sure.

JASON: Where else should people go if they want to learn more?

SARA: Mostly the website, you can reach me on Twitter or email.

JASON: Okay. Let's drop links to React-three-fiber.

SARA: React-three-fiber, React-three-drei, or GLB, they're very interchangeable, it will give you your React code. That is probably the only website tool that I've ever made that's actually useful to me to this day.

JASON: It's great.

SARA: I made it so long ago.

JASON: It's so useful to have this kind of stuff, it truly is nice.

SARA: A wonder of its time.

JASON: This is great. Sara, thank you so much. One more shoutout to Netlify who covered the live captioning. We've had Lee from White Coat Captioning here all day, taking down all the words that we've been saying, thank you very much for that.

SARA: Thank you, Lee. I'm sorry.

JASON: We've been using Tuple for the paired programming, Sara has been able to take over the screen and draw and all that stuff. Now that we're done, we can even celebrate a little bit.

SARA: Oh, my God, yes, do you want to see Jason's computer just like shredding it? It's just like the FBS just drops tremendously, so good.

JASON: I love it. While you're checking out things on the site, make sure you look at the schedule because we've got all sorts of good stuff coming up. We're going to have Ryan Carnioto on the show to talk about solid start. We've got Matt Pococ and a lot more coming up that I haven't had a chance to put on the site yet. Stay tuned, subscribe, do the like buttons and shares and all the things you've got to do. Sara, thank you for spending time with us today.

SARA: Thank you so much for having me.

JASON: See you all next time.