3D in React With Triplex, a Visual Editor for react-three-fiber

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 on the show, we've got Michael, how are you doing?

MICHAEL: Great.

JASON: It's going well. Do I have your audio coming in? Give me a check?

MICHAEL: It's on Zoom, hello.

JASON: I can hear you. But I don't think your audio is coming through into -- into here yet. Had a little bit of an issue. Made the mistake of updating a computer. And now nothing works. So, that's always fun. Let's see... where is my? One more audio check.

MICHAEL: Hello.

JASON: Okay. You're coming in just fine.

MICHAEL: Michael Dougall here.

JASON: I forgot to hit the "Go live" button. So, now we're actually here. All right. We're here. Hello, everyone, and welcome to another episode of Learn with Jason. And today we have Michael Dougall. How are you?

MICHAEL: Doing well.

JASON: Also just completely shattered the illusion of me being professional at all with this startup today. Starting at a different time of day, which already threw me off. And then I updated my Mac and everything is just super-weird. I shouldn't have done it. I knew better. You Jennifer update software.

MICHAEL: Well, to be honest. I did the same thing. I updated Triplex last night. See how that goes.

JASON: Brand new version of Triplex, brand new version of Mac OS, full chaos mode. But it's going to be cool. You're working on such cool stuff, we're going to have a blast. For folks who aren't familiar with you, do you want to give us a little bit of a background on yourself?

MICHAEL: Yeah. Absolutely. I will start with the fun stuff first and then maybe talk about career and tech and things. I am a not-so-recent father. But I have a 2-year-old daughter and she's absolutely beautiful. Spitting image of me and per mother. Absolute handful. I live in Sydney, Australia. So, right now it is 7:06 a.m. And luckily we were able to push back the stream a few hours. I didn't have to get up at 3:00, probably 2:00.

JASON: I still can't believe you were willing to get up at 3:00 --

MICHAEL: Do it for the fans, man! Do it for the fans. I was on Discord just before saying I'll be on this livestream and someone was like, it's Thursday. It's not Friday. Where do you live? And I'm like, Sydney, Australia. Oh --

JASON: Greetings from the future, right?

MICHAEL: Yeah, exactly. And yeah. I also play ice hockey for fun in Sydney, Australia. Avid fan and avid player. Recently got a gold medal in our div three competition. Very happy about that.

JASON: Congratulations.

MICHAEL: Thank you so much. Yeah. And professionally I have been working at Atlassian on the design system for six years. I'm principal software engineer over at Atlassian. We do a lot of interesting things, problems at scale. And most recently, contributing to a CSS-in-JS library called compile for work to add features we need. We can talk about that another time. Today is for 3D, not CSS-in-JS.

JASON: Exactly.

MICHAEL: Exactly. Yeah. And Triplex, obviously we're here to talk about that today. And I'll -- I guess I can explain a little bit about that later. But I started that in like November last year. So, I was on paternity leave. I had a lot of free time because Atlassian also gives very generous paternity leave. And I was trying to make games in the browser. And it was annoying. And I was like trying to move things around in code. And it was insane. And then I'm like, but what if I could just move it to the spot that I want it to be in? And that was kind of the origin story. Frustration and hair pulling.

JASON: So, was this one of those true developer origin stories where you set out to build a game in the browser. You realized there was a problem where you could solve it by building a tool and you have still never built a game in the browser because you spent all your time on the tool ever since.

MICHAEL: Yeah, basically. I will say -- I will say -- I -- there's a prototype that you could technically go it to that's listed on Vercel. I can link it later. People love the prototype, it's a point and click game and there's a chicken. Oh, there's the chicken

JASON: Games are one of those things -- I've built a hand full of very rudimentary games. But I haven't gotten to things like collision detection. Nothing advanced at all. It's one of those things, I wish I had the time to dig into that and do it. But again, you know, like you said, there are just things that always trip me up about it. And one of the biggest things for me is this idea of like a model and, you know, you either have a sprite and you are trying to manipulate that sprite based on where they're facing. Or you have a 3D model, I don't know how to start on. One of the reasons I'm excited you're here. And that's before you get into -- you have got physics. You have all of these things that are probably not hard. But they feel too big whether I start thinking about all the things I would have to learn if I wanted to make a game. So, I guess without getting into like a full sidebar on my own existential struggle with capabilities of that sort, let's talk a little bit about kind of what got you down that path in the first place? You had this idea on paternity leave. Had you built games before?

MICHAEL: Not exactly. So, a little bit of the -- a little bit of the background is when I was in high school, so, we're talking a long time ago, I really liked doing 3D modelling. So, I started 3D modelling actually in primary school, I think. Using a software application called MilkShape 3D. If anybody did half-life mods, you would see that cool. And there was a mod for half-life, like a Dragon Ball Z mode. I loved those. They were great. I was in the forum when is I was 14, in the forum, obviously before Twitter days. You would make little images. Here is how to skin your model better or something.

JASON: Oh, yeah.

MICHAEL: Here's how to make vertices. And I always wanted to get into game Dev. But I never did. And I think it's probably a common trend for a lot of folks in the industry. That said, I hear being a professional game Dev is not the best. Probably worked out.

JASON: I have heard that.

MICHAEL: Yeah, exactly. It's still a passion. I really wanted to get into game Dev. Never did. Had a little bit of experience. And then just kind of decided to like 15 plus years later pull the trigger and just say, well, let's figure out how to do this. React 3.5 is a thing now. You can make games with pretty much anything.

JASON: Right.

MICHAEL: And web tech. And let's just kind of flail and figure it out.

JASON: And it seems like now we've got access to the GPU is in the browser. We've got WebGL. Weave all these things that previously you just couldn't do that much in the browser because the browser was limited in what it could access and the computer's capabilities. But it feels like those walls are coming down and now we're seeing these really intense 3D experiences built in the browser and they're not laggy. You're not like burning any more performance than you would be if you were running it as a native act. Which is really exciting. So, I guess like so we've done a show in the past with Paul about React-three-fiber. It was super-fun. We were able to get -- I think we got a little 3D model of a rocket in the browser. You could kind of spin it and do fun stuff with it with your mouse. But it was like -- it was a little head-bendy to me because so much of that was -- okay. Now there's this math you got to do. Or there's this like setting you got to tweak and you just got to know what that setting is called. It led to me never actually going back and doing any more 3D modelling because, again, I just felt this gap of what I wanted to do and all the things I felt like I needed to know before I do it. And then I saw your demo. And I saw Triplex. And one of the things I got really excited about in Triplex is the way that I learn, typically, is by twisting knobs. Right? If I can look at all the settings that are available and poke stuff, I can piece together, all right, this affects that thing and this affects that thing and now I can sort of see it happening. And so, you've built, effectually, a user interface. Like a Figma-like or Photoshop-like, Blender-like kind of experience for getting a React-three-fiber component, a 3D model, and like twiddling with knobs.

MICHAEL: Exactly. The -- it's -- exactly. I've remade Figma. Except it's 3D. Done.

JASON: Done. Ship it.

MICHAEL: VCs, my DMs are open.

JASON: So, had you ever built anything like this before?

MICHAEL: Not to the level that Triplex is. But I have a lot of side projects that I'm sure everyone listening probably has one or two in their back pockets. Like that -- so, I've never made anything like Triplex. But I've made a few things that build on the technology that Triplex is using. Like that CSS-in-JS I was talking about, it's called Compile. And it started as a side projects and got carried away, Atlassian picked it up. That's a library that helped me get into the mindset that I need to be for Triplex. It's very time-heavy as well. Whether I was in CSS-in-JS lands, and this was 2 plus years ago. I was learning a lot about TypeScript compiler and how that all works. I literally have a little handbook about writing -- not writing in TypeScript compiler. But how to use it, right? That's on my GitHub. But it's just like different aspects kind of all led me to end up making Triplex. Like I have my 3D background, and that again contributes. And then, I work on the design system very knowledgeable about the UI space and React. And again, all this mishmash just kind of led me to, you know -- you know --

JASON: Yeah. Did we -- you still with me?

MICHAEL: Hello.

JASON: Yeah, sorry.

MICHAEL: I live in Australia. I don't know. Bad Internet.

JASON: All good, all good. So, okay. So, I'm very curious -- it seems to me like -- and I know we're just -- we're probably not gonna get into like the building of an app like this. But you mentioned AST transformations, you mentioned being TypeScript-heavy.

MICHAEL: But just for those curious, AST is abstract syntax tree in case you're not familiar with what it is. Imagine your code and imagine a data structure and that's kind of the AST.

JASON: Michael is doing my job for me today. Thank you so much.

MICHAEL: Oops.

JASON: That was one of those things that I for whatever reason that was a hurdle I could overcome and get into AST transformations. And I had an absolute blast. It makes you feel like a wizard, right? It's like true alchemy where you can take something that is in JavaScript and then you can sort of grab all the component pieces out of it and reassemble it in something else. But it's syntactically or informationally the same. And that just feels so cool to be able to do that. Or to, you know, transform like I did some stuff where I was taking image elements and I needed to replace the images with a version that was hosted on a CD... we could do automated optimization. It was like Cloudinary. I'll never be able to do that. It's too hard. You can't modify HTML like that. Sure enough, ASTs, wait, you can. You were able to build this stuff that I was 100% convinced was impossible. You can't write a Regex that good. That's what happened in my head. Now like where this is sort of grown to for you is you are able to take that knowledge, you are able to take your TypeScript knowledge and the other compounding knowledge of, you know, being in 3D modelling and everything. And you have built -- if I can be as reductive as possible -- a set of user interface controls that are mapping my user input when I twist knobs or change numbers or settings. You are taking that through an AST transformation which is updating the React-three-fiber component. Or the -- the code --

MICHAEL: Yeah, just updating source code.

JASON: So, that's really cool. Because that was the big gap for me. Was that I didn't know that some of those knobs were existed to be twiddled in the first place because the defaults are all there. And, you know, I'm not gonna write every single available prop into my every single available React-three-fiber component. So, I don't know that I can like, oh, you can twist this and spin it. Or, you know, something like that. That's really cool. And it also -- it makes me feel really good about the -- how much further I could do, right? Like you're giving me a little bit of a boost as a budding 3D enthusiast to actually go out and try stuff in a way that maybe I wouldn't have had the courage to do if I had a wade through a ton of docs to make it happen.

MICHAEL: Yeah, for sure, man. Triplex is really keen on lowering the barrier of entry. But also scaling up to very complicated use case. I like to say it has that scale-down, scale-up aspect. You could go in and do a box, change its color can you're fine. The simplest scene you could make. But you would scale it up to large-scale web games as well.

JASON: Cool.

MICHAEL: And it wants to do both.

JASON: Nice. So, well, so, I'm -- I think I'm abstract enough here that this isn't really -- for anybody watching this, probably not connecting exactly what we're talking about. So, why don't I switch us over into the pair programming view so that folks can see what's going on. And before I start talking about Triplex, a quick shoutout. This episode, like every episode, is being live captioned. We have Amanda here with us today from White Coat Captioning. Thank you so much, Amanda, and made possible through the support of our sponsors, Netlify and Vets Who Code. Making this show more accessible to more people. Thank you very much. And we are talking to Michael, and I've forgotten your Twitter handle to link to.

MICHAEL: _Douges. Hey, it's me.

JASON: There you are, all right. And this is actually the post that I saw that got me excited to talk to you. Also, folks who have been watching the show for a while, may have noticed, I'm experimenting with light mode.

MICHAEL: My eyes!

JASON: We're gonna see how this goes for me. So, this -- this is if you want to go follow Michael, you can get over there. And we are talking about Triplex today. So, this is Triplex. This is in the back is a 3D model, you can see it's reacting to my mouse as I go left and right, the shadow moves. And this is all done in the web, right? There's no -- this is not video. This is a 3D model rendered in the browser.

MICHAEL: It's a 3D model rendered in the browser. Exactly.

JASON: Extremely cool stuff. And I'm starting to see more and more 3D showing up in websites now. It seems like this is going to be one of the next visual trends is trying to get 3D play a bigger role in web design and web development. So, it feels like now is the time to figure out how this stuff works so we can be ready when we start to show up and our clients start demanding it.

MICHAEL: It's ripe.

JASON: It does feel like now is the time. So, earlier, I downloaded this to make sure I had it ready. It's Mac-only at the moment?

MICHAEL: It's Mac and Windows.

JASON: Mac and Windows.

MICHAEL: Basically if you go there, it will tell you depending on your OS if you can download it or not. Mac, Windows, no Linux yet. But there is a little bit of ask for Linux. I just kind of need to get a parallel -- macOS parallels to run it and see if it actually works.

JASON: Nice, nice.

MICHAEL: It's all web tech. Technically, it all runs like across OS, right? But the --

JASON: Sure.

MICHAEL: Yeah. Anyway.

JASON: So, I'm just making an assumption that now that I've downloaded it, which would be step one, I can open it. As you can see, I'm opening this for the first time. So, I have no prior experience with Triplex today. We're gonna learn together today. What should I do first?

MICHAEL: I love this pair programming session, by the way. So, the first thing I want to do is create a project.

JASON: Okay.

MICHAEL: So, we have done nothing. Maybe need a getting started thing. We want to create a project. What you want to do is find a folder to start a thing. If you have that projects folder -- exactly. Click create. And then you'll be presented with something else.

JASON: Is it -- okay. This is fine. All right. Npm.

MICHAEL: We're gonna be here for a while. Oh, wow, this is really quick!

JASON: I got that fiber Internet.

MICHAEL: Damn!

JASON: I'm gonna split this one off to -- I'm gonna go over here. We'll give ourselves a full screen window. Okay. Oh.

MICHAEL: Since it's October, the template is currently a Halloween theme. So, yeah. It's aments scene put together. And yeah, I'll let you explore and ask questions.

JASON: Did you model this and let's make a starting project and you just threw this together?

MICHAEL: No. So, basically on Twitter, there was a bloke who -- it's kinds of like a quick long/short story. Someone on Twitter made these assets. Someone else on Twitter was like, three JS, like vanilla three JS. And that's a great idea, steal that for Triplex. Triplex has joined the Halloween challenge. And now I updated one of the templates, added a new template, sorry, for Halloween.

JASON: Nice.

MICHAEL: When Christmas is around the corner, expect a Christmas theme. It's going to be snowing or something.

JASON: This is great, though. So, looking at this, just kind of getting my bearings, we've got a -- what appears to be a pretty straightforward like 3D scene. And from my very limited experience in times like Blender, it looks like I can grab one of these things and then I should be -- yeah, I can like move them around. And now we've got a -- like a flying lamp post. Yeah. This is cool. Okay. And then you can like threw it through the ground if you want. And then I see over here, we've got things like -- so, these I don't exactly know what these are.

MICHAEL: So, if you press just for -- if you press shift F for a second --

JASON: Shift F.

MICHAEL: So, this is the post component. Now, we're inside the post component right now.

JASON: Okay.

MICHAEL: And then there's -- like I was going point to all of my screen. But obviously, you won't see that. There's like a little actions thing and it looks like a go back, or like an exit. Goes that way.

JASON: This one here?

MICHAEL: Yeah, yeah. Exactly. Click.

JASON: Okay.

MICHAEL: So, now we're back in the scene component. So, in the left-hand side, you basically see every like top-level component that's rendered by the scene component. And then when you're opening -- like that -- for that carat or whatever, accordion, you will see all the components, all the elements rendered in that component. When you open post group glTF and point light, that is rendered by the post component.

JASON: Got it. Okay. So, we're kind of looking at like I have -- in React parlance here -- I have my fence component and that's this one here. I've got another instance of that fence component. And what's interesting about this -- we've got two fence components, but one of them is kind of busted. Then we have two posts. So, two instances that have component. Different tree components. So, there's the -- the kind of like dead trees and then we've got this like autumn tree here. Are these like -- are these fences like this is one fence component and there's like a toggle for busted?

MICHAEL: Exactly. So, in the right-hand panel, you'll see --

JASON: Okay.

MICHAEL: -- all the props that are available on that component.

JASON: Okay.

MICHAEL: So, for example, the variant prop could do interesting things.

JASON: Ooo... oooo! Oh, yeah. And you can change it into a pillar. Broken pillar. Oh, cool.

MICHAEL: This is just a React component. These are just props on a component that just render different things.

JASON: Right. That's cool-looking.

MICHAEL: For fun, if you press command Z, and command shift Z, you can undo, redo.

JASON: All right. Okay. So, command Z, shift Z. Okay. Great. Come in here on one of these and then we can kind of see -- you got all sorts of --

MICHAEL: That was big. There was like 50 assets. Whoa, this is gonna be a big Halloween.

JASON: That is super-cool. I love this. This is really cool to see. Yeah, we got the little shrine, we got the crypt. Like, this is dope. Shrine candles, regular shrine.

MICHAEL: Oh, also, if you press F, you can focus in the scene. Like you'll focus the camera into --

JASON: Oh...

MICHAEL: The thing as well.

JASON: And then you're nice and close to it so you can see what's going on.

MICHAEL: exactly.

JASON: Nice. That's great. This is -- like, okay. So, I'm already -- I'm further along now than I would be if I were -- holy crap. Look at this. Look at all these different trees you can do. Yeah. I could -- I mean, I can see myself playing around in here, having a good time making myself a, like, cool little Halloween scene.

MICHAEL: Yeah. Like you -- you definitely need to think about like what's the most basic thing you can do. And really the most basic thing is just building a scene. You just want to position things in 3D space and get it exactly what you want. And being able to do that in like a visual editor is so much easier than it would be if you were to do it in code. Like if you were to move --

JASON: Right.

MICHAEL: -- something to a specific spot and then save it. And try to do the same thing in code, it's insane.

JASON: Yeah. I'm just thinking like here. We've got these three positioning things. And I'm assuming are like X, Y, Z.

MICHAEL: Exactly, yeah.

JASON: And so, to move this feels like I don't -- I don't even know -- yeah. Like, okay. So, 3.5 off of center. 3.5 the other direction off of center over here. And then like I broke this so it should be zero. But like it's -- this would be a night mare if I was looking at it in code. I can -- I can sort of visualize things on a grid. So, I would be able to get there. But like, boy, would it be nicer to just come in here and say, all right. I want this one to be a little closer. I'm gonna drag it this way. And I want this one to be a little closer, so I'm gonna drag it this way. That is much better. That feels a lot nicer.

MICHAEL: Yeah, this is literally the origin story of frustration. If you did this in code, you would be tabbing back and forth between your IDE and the browser. Is that good enough? No. Keep going back and forth. This is unnecessary. Unproductive.

JASON: And this is great too. Because then you can, but one of the fine-grained tweaking. I picked it up off the ground, I can set it back to be zero. It's right on the ground. Then these, I don't care if these are weird numbers. This is great. This is, like, and then these asset packs, I can Google around and find somebody who has made an open asset pack and make whatever I want with it, right?

MICHAEL: Exactly.

JASON: If I want to add -- okay. I'm gonna add another tree. So, if I want to do that... and find --

MICHAEL: This is great right now.

JASON: Let's see, assets, assets. Fence for the tree. I'm gonna add another tree. And we'll add this one. I'm gonna stick that thing -- oh, cool. You can skin it? That's dope. Or you can have it fall over if you want...

MICHAEL: If you see the controls at the bottom middle, those are the transform controls.

JASON: That's cool. All right. So, then I can switch it this way.

MICHAEL: And there's the keys, T for translate, R for rotate, S for scale.

JASON: Nice. And if I hover over these -- yeah. It shows you the hot key to get into that. That's nice. Great. Then I can come back out here and -- now, wait. It's this one.

MICHAEL: Sorry, you had a little bit of a gotcha. Because you added the raw asset to the scene.

JASON: Oh!

MICHAEL: Which works... which works.

JASON: But I'm seeing that I lost my variant.

MICHAEL: Exactly. If you go back to the add drawer. Also delete that component.

JASON: Okay. I'm gonna delete is that one. Back to my add drawer. Components. Oh, look at this! I've got a pumpkin. We're putting the pumpkin in.

MICHAEL: Drag and drop doesn't currently work. Sorry.

JASON: And there is my pumpkin. This is great. And like -- you can just see -- okay. And I'm already seeing like how quickly I can make this stuff work. All right. Now I've got a coffin and go to the coffin. And rotate it a little bit. And put it over here and then come back over here. And like -- this is so cool.Ist I would not have imagined that within what we're 34 minutes into it. I probably jabbered at you for the first 20. In the first 15 minutes to opening this app, I'm actually building a scene.

MICHAEL: You're an expert now.

JASON: This is much further than I thought I would have been able to go in a single day. The last time I played in 3D, I was able to get somebody else's molds and put it into a website. I did not change those models. It was like, here sales of free model of a rocket and you're going to do that. I could mess with color, but I'm not moving anything. This is really cool. This makes me -- this makes me feel like, you know, I could go out and actually play with this a little bit and make a little level in a game or something where you've got a crypt where you -- oh, here's some obstacles and a stack of coffins you need to climb. That would be fun.

MICHAEL: If you want to for a second, go side by side with the IDE. View source on the top left.

JASON: View source top left.

MICHAEL: That may or may not open something...

JASON: It did.

MICHAEL: Nice.

JASON: Okay.

MICHAEL: Two-thirds in Triplex, it's not the main thing. But we can save it and see the source code update. That's a party trick, I'm sure. So, if we go into the editor, command S. Bam! Source code is updated.

JASON: There's my pumpkin.

MICHAEL: And if you change the source code to like delete the pumpkin, for example. Or do whatever.

JASON: All right. I'm gonna delete the coffin because the coffin is currently in the viewport. There it is.

MICHAEL: Nice.

JASON: Saved and --

MICHAEL: Syntax error.

JASON: Where is my syntax error? Wait. What did I do? Oh, I lost my fragment. Okay. Deleting my coffin. And there it goes.

MICHAEL: Bam!

JASON: Bring it back. Ah, that's cool. That is very cool.

MICHAEL: And if you have repos set up with Prettier, it will use Prettier to format your code when you save. Yeah. By default it uses the TypeScript formatter. If you don't have Prettier. But obviously,it doesn't work fantastic sometimes.

JASON: This is... yeah. Because, look at this, y'all. Like this is -- this is what I was dealing with before that just made me walk away. Is like, sure, there's stuff I could do in here. But like, I'm not gonna do that. Like -- and like, you know, maybe -- does this -- does this have -- oh. It does.

MICHAEL: It has intellisense.

JASON: That would help.

MICHAEL: I will say the entire editor, one of the backbones that make everything possible is TypeScript and types. So, like Triplex hasn't -- has nothing hard-coded to say what props should be what. It's literally just reading the types from your components and JSX elements and then rendering them -- or getting the data and then using that data to then render the UI. If you render or remove props, the UI will update. That's kind of one of the promises I think for this technology. There's no hard-coded assumptions. It is all dynamic.

JASON: Yeah.

MICHAEL: And if you squint, it's not even specific to 3D.

JASON: Oh...

MICHAEL: It's just JSX elements.

JASON: Yeah. So, theoretically speaking, this editor has additional uses.

MICHAEL: Exactly. VC funds. DM me.

JASON: I mean, this is -- this is one of the things that I think a lot of companies have tried for. And it tends to be, you know, this is a really -- it's a tough problem space to be in. Because, you know, the idea of like having code as a source of truth I think is relatively new. I think what we have been seeing in the past is that everybody treated whatever the original asset was as the source of truth. And we see that in like Figma 2 code. Or those other, you know, document 2 code or whatever. Where you're trying to generate code from whatever the original product was. And we're starting to see this go the other way. There's a company called Storybook to Design that's been on the show. You can find the episode if you search for it. Where they go the other way and they use storybook components or their own design system components to export into Figma. So, the code is the source of truth. And Figma generates components based on those components. And this is kind of that same idea. And I remember having a conversation with Dan Mall a while back on the show where he was saying, you know, ultimately when it comes to design with a design system or your 3D rendering or any of those things, all of these things are -- are targeted toward when you're building for the web the code that shows up on the website. Everything else is an intermediate asset. And it's effectively trash. Because the only thing that ultimately lives is the code that shows up on the site. So, if you're -- if you're optimizing for an asset that isn't the final product, you're putting yourself in a weird space. This feels like it's doing it -- it's doing things in a way that I feel confident in using. Because if Triplex suddenly, you know, you decide you don't want to work on it anymore and it goes out of date, I've still got my code.

MICHAEL: Exactly. Exactly. I find that's one of the value props, right? Like Triplex doesn't make you do anything that you don't want to do. The model is -- you write your code and without adding literally anything, we can render it in the UI. You can have controls. You have undo/redo and a very powerful productive editor. And if you decide that, you know, there's either something else or something that you'd rather move to or you just don't want to use visual editors anymore out of principle. That's fine. But your code is still unchanged and you can do whatever you want with it. I find that pretty cool.

JASON: It's really cool.

MICHAEL: Yeah. A lot of the editors as well, like, even in the design space or 3D space. So, I'm talking let's say the design tools like Figma. The no-code tools like -- god, what is the -- framer? For example. Right? Then the 3D variations. Sublime. They are all fantastic. But they're proprietary. They own the backend. They own the output. They own basically everything. If you flip it and you go code-first, but you still have the same visual editing experience, you're in control. You're not driver's seat. And you can also scale it up and down to literally whatever you need. Because you can just code it rather than waiting on a feature that they need to build.

JASON: Yeah.

MICHAEL: And obviously there's like non-engineers can also jump in here and change things as well. So, that's also --

JASON: And I kind of think that's -- to me, that seems like the really killer feature here is that we -- I can give it to a designer and say, get this scene looking the way that you want it to look. Can then I'm not trying to translate that into code later. I just get to take what they built it put it into the web page and no go make it interactive or whatever the thing is. There's a really good designer-to-developer handoff if that's necessary. If you're not the person doing all of the work here. Yeah, Cauldron. This is fun. I could sit in here all day and design this scene. Like this is -- this is extremely fun.

MICHAEL: So, there's another fun tool, a fun feature, sorry. So, in the top left, next to where you exited the component, if you click that little dial... so, if everyone is familiar with like React providers, this is the provider config. So, in the same vein, you define a provider component. You give it some props and now you can change these values for every -- for just like the entire environment, the entire scene. So, again --

JASON: Oh!

MICHAEL: -- no hard coding. This is just props given to a component that's been represented in the UI.

JASON: That's cool... I love that -- and yeah. It's a little -- it's subtle. But like look at that. You kind of get these little spooky effects. That's fun.

MICHAEL: And, you know, I can keep pointing things out as we go. I don't want to give all the secrets just yet.

JASON: Great. I mean, no -- this is great. And like while you were pointing things out, I was able to -- you know, I added a few more decorations. I messed with some things over here. Like this is really -- you know, it's coming toking. It's very spooky.

MICHAEL: Yeah, exactly. So, like -- I'm sorry, keep going?

JASON: I was gonna ask. So, the next thing that I was thinking about is, like, from here, I would probably want to start messing with a little bit more light, right? So, I can see that you've got a few things here and I see this point light. And is -- so, is this the sort of thing that like this is an asset in the pack? Or are there things built into Triplex for like I need to, you know, give -- give something a light source? How do I -- how would I do that?

MICHAEL: Yeah, awesome. Great question. So, it's not built into Triplex.

JASON: Okay.

MICHAEL: But there are environments, for lack of a better word, like host elements, similar to React.

JASON: Okay.

MICHAEL: So, React-three-fiber has host elements from ReactJS. You're able to use those. So, for example, if you go back to the add panel. And you go to built-in. Now you've got lights. And you can filter them with the filter selection if you want to, you know, type stuff in and see it filtered. But yeah, you can find a light here and add it in. And yeah. So, for example, directional light or a point light could be fun.

JASON: Okay. So, here's my point light.

MICHAEL: Yep.

JASON: And than --

MICHAEL: So, Three.js changed how light works. Now they call it physically-correct lighting. So, before with an intensity of 1, a light would kind of light up an entire sign. Now you have to do intensity of 50 or something. So, I'll let you figure out where that is.

JASON: So, down here, I'm looking at my --horse my intensity --

MICHAEL: There's also a search un-put if that helps.

JASON: Look at it at that. You can kind of decide how bright your lights are. Get into some color... we want spooky green light. Oh, here's what I want to do. I want to put this in this Cauldron. That's the right move. We want spooky green light coming out of the Cauldron. How fun is this? How long could everybody spend just doing exactly this? Because for me, it would probably be the rest of my life. Oh, that's so fun. So, then we got like spooky green light coming out of our Cauldron.

MICHAEL: And if you click --

JASON: And intensity, we can keep turning it up until it's wild. Or we can take it down to something that's probably a little bit more spooky ambient.

MICHAEL: Exactly. And if you slap on "Cast shadow," that will also look pretty good.

JASON: Oh!

MICHAEL: So, if you press F, we can like really zoom in and --

JASON: Look at this!

MICHAEL: Nice.

JASON: You kind of drop it in. You get like... real spookiness. Okay. This is fun. This is the sort of thing I could definitely play with all day. And then there's a whole bunch of buttons that I don't know what they do. But we can start checking buttons and figuring out what they are for. Name it.

MICHAEL: Yeah, there's definitely a lot -- especially with the host elements, there's a lot of props that you're like, I don't understand what these are. But they usually come with descriptions. So, for example, if you hover over decay, it might tell us what it is. I actually don't know what decay does to be honest.

JASON: The amount light dims along the distance of the light. So, the lower the decay is, the more intense the light remains. But this is like -- ah, it's not very strong light. It's just kind of like a spooky little green glow. It's the kind of stuff that like, it's minor. But look how much atmosphere it provides to do something like that. Where you get like a little bit of spooky green glow.

MICHAEL: Exactly.

JASON: Tuck it inside there. It's dope!

MICHAEL: And while we're here, you'd press that toggle button next to the color input that maybe you didn't know what it does. Do you want me to tell you about it?

**JASON:**Ly a guess because I pushed it a couple times and it look the like it was cycling through different styles of color input. This one is pretty obviously a color picker. Don't know what that one is, but I know this is an RGB input.

MICHAEL: Yeah.

JASON: So, what's this one?

MICHAEL: I think it's technically hexadecimals. It might be a number.

JASON: Oh, it gives you some...

MICHAEL: Input's not really made for it.

JASON: Yeah, for sure.

MICHAEL: But you're right, it's cycling through input times. Again, this isn't hard-coded in Triplex. This is all Typescript getting the data and using the data. So, this prop is a union time of three values. String, number, and probably a tuple of three values, RGB, which are all values as well. So, it's not hard coded.

JASON: This is super-cool. I -- I love this. Like this is super-fun. There's so much -- all right. So, just in the, you know, general sense of like play, this is ticking a lot of my boxes.

MICHAEL: Nice.

JASON: You can get in here and have a lot of fun with this. I don't know what I did to make these visible. But whatever. They're fine.

MICHAEL: Oh, the lights?

JASON: Yeah.

MICHAEL: They're just light helpers. This is technically sort of hard coded. But not really. Triplex will render scene helpers for you without you having to do anything. So, if this was a regular Three.js scene and you opened it in your browse, you wouldn't see where the lights are. You would have to write code to show where the lights are to then be able to move it somewhere. Or at least see where it is to then move it somewhere. With a visual editor, and with the leverage it provides, you don't have to do that. You don't write any extra code. You just render what you need to render. And you let the editor handle the rest.

JASON: Super-cool. Are there any -- are there any helpers for like, I want to duplicate this a bunch of times? Because this looks like it's tiled, right?

MICHAEL: Yeah, there is a feature request. I haven't implemented it yet. It's high on the list, but just not yet.

JASON: Cool.

MICHAEL: Sorry, you have to meticulously press that button 20 times.

JASON: Which is all good. Because you can -- yeah. And you can -- like -- this is -- this is so fun. And then we've got our floor items here. And we can pick different things. Doesn't look like somebody requested leaves. I don't see leaves in this pack. But we can do a rib cage.

MICHAEL: Yeah, in this universe, there's no leaves, sorry.

JASON: Just have like a hanging rib cage there. Or maybe we can do... a chest. Great. This is fun. Just some bones. Like --

MICHAEL: How much better is this than regular web Dev? Who cares about buttons? You can do bones!

JASON: Exactly right. This is how I feel. I don't want to write another line of code ever. I just want to make spooky graveyards. No, I love this. This is -- like, what I like about these sort of visual things is it gives you that immediate feedback loop that's really challenging when you don't have -- like when you're writing code and there's a chance that you put the code in the wrong format and something breaks and all that kind of stuff, it makes it really challenging to get into the flow of just playing. And these visual tools, like I'm sure I can get myself into a corner here with some of this stuff. But like being able to just come in here and say, I don't know. Let's just put a few more bones on the ground, that's going to be really fun. Keep moving these around until they look right. You just kind of find yourself in this space where instead of worrying about what numbers I need or what the syntax of the code is, I can just keep hitting plus and adding things to the scene and it continues to look more and more like what I'm seeing in my head. I could sit here for hours and just tweak this. It's got the same immediate effect of me wanting to continue playing with this and tweaking it as something that I have practiced at for a really long time -- like CSS -- where I'll sit and want to tweak the CSS. Oh, I can do it like this, I is can see this happening. I have been doing that so long, like somebody playing piano their whole life, they can sit down and play. I have been doing it my whole life. I can't do that with 3D. But I did it with this tool because it eliminated the barrier to entry for me and I can just play. That gets me really excited and it gets me, you know, I don't know. It like -- I feel like there's a lot of promise in these types of tools because it shouldn't require years and years of practice to be able to sit down and play.

MICHAEL: It's a funny parallel to be honest. Because like you kind of said it yourself. When it comes to web development, for anyone who has been in the game for a while, like it's second nature. I don't need a visual editor. I got my browser and my IDE. Why would I use a visual editor? It's going to slow me down. I genuinely think that's a friction point whether it comes to getting web developers into a visual editor environment. Like, Triplex isn't the only game in town when it comes to this style I saw you did a post from Wix, right? They've got their own visual editor for React called Codux. And yeah. It's a funny -- it's a funny market, to be honest. Because no developer I've spoken to is excited about that. Even if the tech is amazing. But for everyone else, it could be the best thing since sliced bread, I don't know.

JASON: And I think it's -- it's sort of like this space that we're in right now is interesting. Because we -- when you already have a skill-set, it's easy to devalue things that make it easier to acquire the skill-set. Not out of any like -- we tend to call it gatekeeping. But I think it's more just, we're all selfish enough that when we imagine something new coming in, if it doesn't have an immediate benefit for us, we down play it.

MICHAEL: Yeah.

JASON: And that I think is part of it. But then the other part of it too is that, you know -- I know that I put in a lot of time and there were a lot of hard challenges getting from not being able to build a website to being able to build the website like I can today. And so, when somebody promises to make it easy for anybody who hasn't learned the things that I've learned, my default is skepticism. Like you're not gonna be able to do it as good as I can because you haven't suffered the way I've suffered, right? And that is gatekeeping. Like -- [Laughs]

MICHAEL: This is kind of a parallel with three and React-three-fiber. Keep going. I'll keep talking a bit.

JASON: No, I think that for us... it's difficult to perceive the value of a tool that wasn't designed for you is really what I -- what I think it is. But for all the times I've said I wouldn't use like a no-code web editor, as I'm using this, I'm getting the experience of using something that is -- this is for me. I'm not a professional 3D renderer. I'm not a -- I don't know any of the -- like, there are a bunch of words in here that I'm seeing for the first time. I saw something called a frustum. I don't know what that is. But I used it. I leveled the playing field, am I going to make the best 3D scenes in the worlds? No. Am I gonna generate my own assets? No. But I can use these assets and it will be cool. And that will hopefully give me a running start to stick around to learn the rest of it. And that's the piece that's underestimated. It's not like use this tool so you never have to learn. It's use this tool so you can get results and understand how fun it is to get those results so that you want to learn more and get even better results. Like that type of -- I don't know. It's like why kids play tee ball. Whether you don't have the the skill, it's not fun to play baseball. You miss it every time, that makes you feel sad. But put it on the tee, and you get to hit it. That was really fun. I like to keep learning.

MICHAEL: Fish soil, I really empathize with that. Even in the 3D space, even if you're an absolute professional, top of your game, you're still going to need something like this to be honest to be productive. It's just too much friction otherwise. Or it just -- a lot of extra boilerplate code you have to write and maintain and evolve as your code evolves. And if you don't have to do that --

JASON: Right.

MICHAEL: To get the same effect, that's pretty good.

JASON: Right. And like saying in the chat, I want to learn how to add a ghost to this. There's no ghosts in the component pack that I see. Okay. You're gonna have to learn how to do a ghost. But I don't have to learn how to do a ghost and a shrine. You can go in -- it makes me feel like I would actually follow through on something. Like, you know, that feeling of being like, all right, everything I'm doing is gonna come from scratch is like, yeah. I'm busy. I have a full-time job. I can't -- I can't do all of this extra stuff to have a hobby. But now I can. And like you said, as you get further into this, we're also looking for maintenance shortcuts. Because when you build out something, you have to maintain it. And if the maintenance is tedious, or really difficult, or, you know, you have to fully build your mental construct of how all this stuff fits together before you can make any changes at all, you're also not gonna do did, right? So, making the maintenance of a 3D model faster is a huge power-up for a pro. I don't know. I love this.

MICHAEL: And I'll also say, technically, this is a 3D scene. Just because when we're talking about ghosts and like the creation of assets, that's 3D modelling.

JASON: And that's gonna happen somewhere else.

MICHAEL: Exactly. That will happen in Blender or 3D max. Can you find a ghost model on the Internet. That's exactly where I was going to get to. Like sketch pad exists and there's also people just making assets that are just free. So, you can go to these kinds of websites. And you can find what you want. And then you just download it as a web native glTF file, add it into the compiler. Maybe we can do that now. It will be fun. We're already doing that.

JASON: Let's take a little bit further and see what we can get done. If I'm looking for a ghost.

MICHAEL: Click the licenses and click "free."

JASON: Licenses...

MICHAEL: Drop down from the left. Just clique all of these, maybe?

JASON: Yeah, these -- as long as I add attribution. We got all those.

MICHAEL: The main thing is we want to find a free one that is in essence comes with no strings attached.

JASON: Yeah. These are fun, these are fun. How about... I like this one. This seems like -- this is the right ghost for us.

MICHAEL: 120,000 triangles.

JASON: Is that fine?

MICHAEL: It should be fine. Hey, it's a lot, but...

JASON: Just a single triangle, actually.

MICHAEL: Uh-oh...

JASON: Where do they keep the triangles?

MICHAEL: Hidden. For the mesh. For those who don't know, a quick 3D primer. 3D models are made out of triangles. Vertices, edges and triangles. Position vertices in space, and three edges make a space, three edges make a triangle. And then you add a bunch of those together and then you get a mesh. Yeah.

JASON: That one -- this one's spooky. That one's a lot less triangles.

MICHAEL: It's a lot less triangles. That's really good. I like this.

JASON: Yeah. All right. Let's do this. Let's get this one. So, I'm gonna download this 3D model and I'm gonna do that using... here. Sure.

MICHAEL: I'm sorry you're being shoehorned into a creating --

JASON: No, that's totally fine. Oh, I must already have an account. Fine. We're -- this is -- this is okay. We'll go with Jason1.

MICHAEL: Yeah, exactly.

JASON: You suggested that username, how is that one not available? Oh, come on.

MICHAEL: I love it.

JASON: What would I like to -- well, I would like to go back and get that model that I just had.

MICHAEL: Can you skip this? No? Oh, my gosh.

JASON: Enthusiast. I'm an enthusiast.

MICHAEL: Budding enthusiast.

JASON: Oh, no, did I lose my model?

MICHAEL: No!

JASON: Hold on. Where is my ghost? You?

MICHAEL: That is -- what? Maybe if you refresh. Is there a bug? That doesn't even look like the ghost.

JASON: That was like their loading screen.

MICHAEL: We found a bug!

JASON: I'm logged in. I got this thing. We'll make sure that we get the -- I'll copy this. And glTF?

MICHAEL: Yeah, glTF.

JASON: Is there any TL;DR on these for what each one is for?

MICHAEL: So, they're all different formats of representing 3D models. And actually, GLB might be the better one to download. So, I can tell you the difference between GLF and GLB because I know what they are.

JASON: Okay.

MICHAEL: And fbx, proprietary formats, I can't remember who owned them.

JASON: Okay.

MICHAEL: Google is one step away, or AI that's taken over. But GLF is basically a representation of an open format for the web. And the GLB is the binary form that have.

JASON: Okay.

MICHAEL: So, it's just slightly more compressed.

JASON: Should I get the little baby buddy

MICHAEL: Yeah, I think the difference just the texture size. Maybe just do one mega byte and see how it goes.

JASON: Let's see. All right. So, I have downloaded a ghost. Oh, I literally have a ghost in the machine right now.

MICHAEL: Ha, ha, ha -- that's a fantastic show, by the way.

JASON: Okay. So, I've got my GLB here. I have my code over here.

MICHAEL: So, if you open the hall project, or at least a file explorer. I will say this is something Triplex wants to handle later where you can just drag and drop assets into the assets drawer. You can't do that right now. Sorry. Sorry. If you go into public.

JASON: Into public. Here is public.

MICHAEL: Exactly. Drag the asset into the assets folder. Make a folder if you want.

JASON: So, there's my -- okay. So, yeah, I'll make a folder. Call it ghost. Put our fantasy ghost in here. I turned on this feature in arc that I think was the wrong thing to do where it renames things. And it always leads with an apostrophe.

MICHAEL: So weird. Is this arc AI?

JASON: I think it is arc AI. It's being very AI-level helpful. Okay. So, I have my -- I have my ghost. I have added it to an asset. It's in here.

MICHAEL: All right.

JASON: So is it auto-discovered? Can I just go grab it now?

MICHAEL: Let's find out.

JASON: Oh, here's my components.

MICHAEL: I hope it is. I'm pretty sure it is. Yeah, increase assets. Ah!

JASON: How big is that ghost? That is -- okay. All right. Yep. Okay. Let's take you down aments -- oh.

MICHAEL: So, I just to want paint a picture. Imagine that your scene like this is all code. And like you didn't have any helpers or something. Like I guess the point I'm trying to make is, you could spend a long time in code to realize that it's weighed to scaled. And you couldn't see it, you know? But with the visual editor, you can see it immediately. You can focus on it. It's all sorted.

JASON: This is cool.

MICHAEL: Maybe we should do a follow-up for like getting into the tech. There's a lot of interesting things. But as a quick, you know, thought, there is a very fun WebSockets layer that I built that's built on React Suspense. And all modern React paradigms that basically syncs from the backend Node server to the frontend. And it works really well. Because it didn't let me down just now.

JASON: Yeah. This is -- this is super-cool. Definitely some weirdness with this model, though. Because the poor ghost's face fell I have a or something.

MICHAEL: Yeah.

JASON: But from this angle, it looks amazing.

MICHAEL: I actually know what this is. It's not a bug with us. It's definitely a bug with them.

JASON: I did download like the teeny tiniest version. It might be like --

MICHAEL: It's either, yeah, something wrong with the file. Or it's a 3D model that's been built from an image or something. At one view, it looks correct.

JASON: Oh, you twist it and -- I think that's the angle it was designed at and everything looks right. You move and the eyeballs get all weird.

MICHAEL: But that was pretty easy.

JASON: But we got a ghost in this graveyard in like 4 minutes. I'm feeling pretty good about that.

MICHAEL: Good job. It's so bright, though. Oh, my god.

JASON: How do we take this -- take this down just a touch. I don't know how I would go about even doing this.

MICHAEL: To make it slightly opaque?

JASON: Yeah.

MICHAEL: Believe it or not, in three JS, it's not the web. Or at least it's not web tech.

JASON: Okay.

MICHAEL: When I first started to get into Three.js, I was like, I just want to get a group and then set that group and everything below it to be slightly opaque. Like, 50% opacity or whatever. Can't do it. That's not how 3D stuff works. You basically need to give it a material and then that material you make slightly less. Yeah. I would say it's a little bit too much messing around to get it working on stream.

JASON: More than we would to do right now.

MICHAEL: Yeah. But it is possible. Maybe I can show you what it would look like natively in -- if we made a box and I can show you that. Or you can show us that and I'll just walk you through it.

JASON: Sure.

MICHAEL: And you can build up that learning from there.

JASON: Okay.

MICHAEL: It applies in the same way.

JASON: So, we add --

MICHAEL: Add a mesh.

JASON: I add a mesh?

MICHAEL: Yeah, it's a bit mind bendy, you add a mesh, then add a box to the mesh. In the left-hand side, clicking that, add a child to the mesh. Search for box. Just type b-o-x. And click box. We've added a box.

JASON: We've added a box. All right. I'm going to focus on this box.

MICHAEL: Yeah, just move it up a little bit so we can see the full box in all its glory.

JASON: In its full boxy glory.

MICHAEL: Yeah. High res. It's all white and doesn't look like anything. And the reason is because it doesn't have a material. So, we need to add a material to this box. In the same vein, that is a child a of mesh. So, it's actually not that. Got ya.

JASON: Okay. We have material.

MICHAEL: Yes. And then we can add a mesh standard material.

JASON: Standard material.

MICHAEL: It's all the same. Physical is fine.

JASON: Okay.

MICHAEL: So, now we've got all the material. We can change the color.

JASON: Okay.

MICHAEL: And we're also able to make it slight opaque.

JASON: Okay. So, then we can take like you... wait.

MICHAEL: I want to touch on you going into the negative values in a second and say, man, isn't that annoying. And Triplex has something for that. Type a value, zero to one, and click transparent. Yeah it should... right? And then maybe smash command R and see what happens.

JASON: Hey!

MICHAEL: There we go.

JASON: There we go. Hey, we -- we made a ghost. This is so much better. Look at that. Get this ghost out of here. This is the best ghost I've ever seen.

MICHAEL: Exactly. Yeah, this is the basic principle, right? You're not really -- it's not web development. It's not HTML. So, you need to kind of use -- like use it in the way that it wants to be used, I guess. Or you make a custom component that does this all internally which is obviously fantastic. Because you don't have to redo the same thing twice.

JASON: Right, right and so, you know, if we -- if we were to -- actually, why don't we just look? Where did my... somewhere in here is the code editor. Here it is. And we go look at our source. We've got our scene. And down at the bottom we should have our mesh.

MICHAEL: If we save.

JASON: Yes.

MICHAEL: And then in you scroll all the way to the right, because the formatting sucks.

JASON: Oh, right. Because it's all the way over here.

MICHAEL: Yeah.

JASON: To da!

MICHAEL: I'll look into that. That could be improved.

JASON: I'll just save to get Prettier to work. And then we've got our mesh, our box geometry, our mesh material, I could componentize this sucker and just use it anywhere now.

MICHAEL: Exactly.

JASON: I'm gonna be a 3D modelling genius by the end of this. Very proud of this ghost.

MICHAEL: Yeah. So, currently when you change some values that don't have constraints by default. Technically in Three.js, you can put whatever value you want and it's annoying, but it's fine. And the visual editor that can help you control what's rendered can add constraints. So, for example, for Rayleigh in the provider config. Try to put whatever value in it like a thousand. Just click off. I don't think that works. Technically it didn't apply. It looks like something did. So, if you click it and drag.

JASON: Oh, yeah.

MICHAEL: It has a constraint, a maximum of 1 0 or minimum of zero.

JASON: Got it.

MICHAEL: This is available on any prop. It's not magic, it's just JSDoc. If you click view source on the provider config.

JASON: Click view source.

MICHAEL: In the panel.

JASON: Oh, boy.

MICHAEL: We've got the technology. Not that one, sorry. The next one under provider config.

JASON: This one.

MICHAEL: No. In the middle.

JASON: Oh.

MICHAEL: That's learn more. We're going to get too much information.

JASON: What am I doing?

MICHAEL: Ah, my brain.

JASON: Several things just happened. One, I didn't realize when I was clicking view source, it's opening the side panel. It's opening and window and hiding it. I'm looking all over the monitors to see where it went. Two, I can't read. And three, I got thrown by the flip on these.

MICHAEL: Yeah, yeah. I'm sorry.

JASON: Okay. All right. I have viewed source.

MICHAEL: Okay.

JASON: So, we have the Rayleigh.

MICHAEL: Exactly, it defaults to 0.5 and we can say what constraints we want.

JASON: That's very clever.

MICHAEL: Maybe I need to put up a pull request against Three.js to add all the constraints that are implicitly there, but currently not like here defined.

JASON: And so, this is JSDoc. Are these standard JSDoc things or are you sort of overloading the JSDoc syntax?

MICHAEL: I don't think they're standard things. But I think that's fine, right?

JASON: I mean, they're comments. Like at the end of the day, comments are there for you to do whatever the heck you want.

MICHAEL: Exactly. And technically, it helps you even if you weren't using Triplex. It's helpful to know what values should be. Even if it takes a number that could be infinity.

JASON: Right.

MICHAEL: Like for opacity, you can only ever define zero to one. Anything outside of that is just technically probably just capped to zero and one. But it also could be undefined behavior.

JASON: Yeah.

MICHAEL: So, it's --

JASON: This is like --

MICHAEL: The editor --

JASON: And you could probably put that into a types package too, right? Which could be pretty dang cool.

MICHAEL: Yes. What do we mean?

JASON: Well, like, you know, how you can install like @type/node so that you get those sorts of things. So, if these are -- if this is a type definition and you have the JSDoc in it.

MICHAEL: Oh, yeah, exactly.

JASON: Type /react-three-fiber. Even if they don't want the PR, you could still potentially provide this in a way that would update the UI. It would probably suck to maintain that as a parallel package. But you know...

MICHAEL: Yeah, it could. Probably wouldn't -- I think they're quite open to changes.

JASON: Nice.

MICHAEL: I might just do it because it will improve the Triplex experience.

JASON: It's always nice when you get some guardrails from the UI. That does seem to make -- it makes life just a little bit easier.

MICHAEL: Yeah. Exactly. If you remember earlier when you hovered over some of the props and got a description, like, that's all powered by TypeScript.

JASON: That's this?

MICHAEL: Type definitions, yeah, exactly. So, if you hover over Rayleigh, you will get the description.

JASON: I've got to focus on the app.

MICHAEL: There grow.

JASON: I mean, this is like -- this is very, very cool. And it's also like -- it makes me happy that you didn't have to invent a bunch of stuff to build a UI that feels like this.

MICHAEL: If I did, it's Unity, you know? Like we're just making a proprietary thing again.

JASON: Right. And that I -- yeah, right? And that's kind of what we all I think want to avoid. I really love the idea of the source of truth being code and remaining code in a way that isn't like -- because I've also seen like your code is your source of truth. But also, like we put so much proprietary weird stuff into your code that it's no longer like a portable source of truth, you know? And I that nothing -- you're overloading JSDoc a little bit. But to me, that's just helpful documentation. That's helpful when I look at the source code, okay, minimum is zero, maximum is 10. I like that. When I look at something like this and going down to the mesh and I go to copy/paste this out to be a ghost. Actually -- how much time do we have? We have like 5 minutes left, right?

MICHAEL: We have the technology.

JASON: I am -- yeah. We've got 5 minutes. I'm gonna make a component.

MICHAEL: Yeah, do it.

JASON: All right. So, in my components, I'm gonna make a new file. We're gonna call this ghost because this is the best ghost ever created. And then I'm going to export function ghost. And return this mesh. And I assume I'm probably gonna need to import some things for that to work properly?

MICHAEL: Not -- the stuff.

JASON: Okay. They're all built-in, okay. Great. And then up here I can import --

MICHAEL: But you could do it in the UI instead. It's already there. If you want to.

JASON: Oh, what? For real?

MICHAEL: Yeah.

JASON: Okay. So, let me come back up here.

MICHAEL: WebSockets!

JASON: The magic. All right. I'm coming down, I'm going to my components. And I have a ghost.

MICHAEL: Bam!

JASON: Where did my ghost go?

MICHAEL: Press F, let's go find it. It's on top of the one that already exists, probably.

JASON: Whoa. I just broke everything. F.

MICHAEL: Because we have -- there's two -- there's probably two ghosts, right? The one that we defined before and then -- yeah. And then the other one. So, it's there. Just press F, you can focus it.

JASON: Okay. All right.

MICHAEL: Yeah.

JASON: I'm gonna delete our manual ghost. Now we've got our new ghost.

MICHAEL: Nice.

JASON: Okay. Everybody's happy. Good. All right. Now let's -- now what I want to do is I'm going to save this. And we see our ghost now. That's good. Then I'm gonna come back in here and I want to add some props. So, let's just add a single one. We're gonna do opacity and I'm gonna control that piece. So, I'm gonna say spookiness is going to be by default we'll say like .7. And then that is gonna be defined as spookiness. And that's gonna be a number. And I guess we'll make that optional since it will be defaulting. And then down here, the opacity, we're gonna set to be spookiness. Okay. So, then you said I can do something like this... how spoopy should this ghost be?

MICHAEL: Very spoopy.

JASON: Turn it up for maximum spoop. All right. And then I can set a min. We'll say is .1. You'll need to be able to see the ghost. And then the max will be 1.

MICHAEL: Exactly.

JASON: Okay. So, so I save this. Our ghost just changed. Did everybody see that? And then I come in here. And I can... drag. I drag! Look at that.

MICHAEL: Constraints are set. Changing the UI. Didn't have to reload anything. It's all there. It's pretty cool.

JASON: This is cool.

MICHAEL: And you might notice the transforms are disabled because it doesn't take a transition prop. In case you were wondering.

JASON: Oh, cool.

MICHAEL: If you wanted to change it, you can in the left hand bar. If you expand the ghost in the editor.

JASON: Expand the ghost in the editor.

MICHAEL: So, bottom left, expand that. Click the mesh.

JASON: And then I can start messing with this part.

MICHAEL: Exactly.

JASON: Which isn't really what I want to do. Instead, I would take something like this here and we can...

MICHAEL: It is an option.

JASON: Drop this here. Nope. Like that. And then this becomes position, instead. Working on the tiniest thing alive and so, now looking at my ghost.

MICHAEL: You might have to type it as a tuple.

JASON: Oh, right, right, right. Position is going to be -- what is it? Just like that?

MICHAEL: Tuple. So, in an array, number, number, number.

JASON: Number, number, number.

MICHAEL: There's definitely a song about number, number, number, I think.

JASON: Okay. And now we got our settings here. So, if I come back out, I zoom out. I can select -- maybe I can select my ghost? There's my ghost.

MICHAEL: Yeah.

JASON: And now I can move my spooky ghost around the scene. Holy crap. Maximum Halloween. This is the best thing ever.

MICHAEL: There you go.

JASON: Ah. All right. So, as I said, I cannot believe it's already been the full -- like almost the full 90 minutes. This through by because I having a blast and I want to just keep playing for the rest the day. Michael, for folks who want to do more, where should they go next? Like what are -- what are next steps?

MICHAEL: So, I would say there's two to three Discords that you would want to look to jump on to just join the community first.

JASON: Okay.

MICHAEL: It's very friendly. So, one would be the Discord where React-three-fiber is I guess just made, Poimandres. We could link in the show notes. The second is the Triplex Discord. Nice. Google win.

JASON: That just worked, I can't believe that. Sorry, what was the other one?

MICHAEL: The Triplex Discord. So, we have a Discord where you can jump in. See behind the scenes features that are being created, ask questions, get help. If you press slash and search for Discord, you'll get the -- you know.

JASON: Okay.

MICHAEL: I think that's gonna be a link. Yeah. And yeah.

JASON: And you have a third one?

MICHAEL: The third one would be probably -- there's four. The three JS Discord and the web Dev Discord. They're fabulous. I don't use the three JS one that much primarily because most of the fun people converged on web game Dev and any the questions you would ask in Three.js you would ask in the web game Dev Discord anyway. That's not it.

JASON: I'll tell you what, send me a link later. I will put it into the show notes and we'll go from there.

MICHAEL: exactly. I have one anyway. Which I'll just put in the chat for you. Done.

JASON: Perfect.

MICHAEL: Yeah.

JASON: I'm also going to re-share it again because then it goes through my bot.

MICHAEL: Okay.

JASON: I'm gonna tell everybody to follow you on Twitter as well. For updates on Triplex and things. And yeah. All right. So, I'm gonna give one more shoutout to our captioner, Amanda, who has been here all day keeping us in the accessible captions. Thank you. That's from White Coat Captioning. And it's made possible through the support of you are sponsors, Netlify and Vets Who Code. Thank you very much for sponsoring the Show. Make sure you go and check out the schedule. We've got a lot of fun stuff coming up. It is going to be just -- just fun. Just fun, fun, fun. So, make sure you go. You can get on the Learn with Jason Discord, the news letter, add it to your calendar. Whatever you want. Whatever makes you happy. With that, I think we're gonna call this one done. Michael, any parting words to everybody?

MICHAEL: Give it a go. Jump in. 3D spaces, very interesting. Barrier to entry, reducing every day. And everything is more fun with friends. And I think Sunil would love me for loving that.

JASON: Wait, is your websocket stuff built on Partykit?

MICHAEL: It is not. It's just using a...

JASON: We still love you, Sunil.

MICHAEL: Hey, I talked to Sunil and asked him. We had a chat about it. Right now there's not a huge use case. But might be later.

JASON: Got it.

MICHAEL: Does more interesting cloud services. VC... so, yeah. Just have a go. Have a go. And jump in Discord. It's great.

JASON: All right, friends. Thank you very much, Michael, for being here. We will see the rest of you next time.

MICHAEL: See ya folks.