Svelte Cubed + 3D In Browser

spend a little bit more time playing with 3 d stuff because this This stuff is so cool. Yeah. And it's easier than you'd expect, which is I think the biggest thing is that when you think three d in the browser, you see the GitHub globe, you think that stuff's gotta be So what is three j s itself? Three j s is basically the JavaScript three d library. There are other 3 d libraries out there. Three JS has been around for a long time, and it is is that

but what I can do is I can have the three d department Welcome to Syntax.

around in the the capacity I could have used it for. So I was like, okay. Well, I I don't I can't do anything with this three d model, Stoked.

Awesome. Well, it seems exciting. It makes me wanna

a 250 So So in typical three d, if you're if you want orbit controls, they're, like, baked into whatever. But orbit controls is a click and pan and interactivity and it looks like it has a depth even though it's just a bump map. So there's a lot of, like, really neat stuff that goes along with that. But, basically, you have this canvas.

photos of this thing so that you could have, like, a smooth thing. And then I just had every time you click and drag, it changed the photo one over or one over. It was, like, totally fake 3 d, and it it looked and it worked, but you're using a massive amount of assets to have it feel like fake three d. And and I just, like, think, like, how easy would it have been to just import this model into 3 JS and have it, you know, click and drag and orbit controls would have been a smoother, better individual meshes which are like objects, And, Right? If you if you're looking at things, You don't just look at something. You have a camera pointed at something so you can move that camera around. You can position it. You can change everything that you would want to change about a camera, whether it's The f stops or any of that stuff. When I did some three d, that was probably the hardest part about getting up to and running because there's this whole I can do some really, really neat stuff. It. And, honestly, the hardest part about me diving into 3 d was trying to learn let's talk about how 3 JS kind of works.

Head on over to syntax.fm And it's just shocking how not hard it is. So, check it out. Svelte cubed, I think, is probably the easiest way to get up and running with 3 d on the web, And, I'm loving it. So check it out. Svelte cubed. I have a a link to my course in the notes here. I also have a link to a number of a stack blitzes that I've created that are just, like, nice little finders, but you can also just straight up dive into look, I'm I'm shocked, and I I really get to play around with some of these little things in here and build these little fun little examples but at the end of the day what it should do is open your brain to some of the cool things you can do with both it. 3 d. And then the browser, It feels like it's not implemented, right, if this says to do. Well, the cool thing about Svelte cubed. This is just essentially a wrapper around 3 JS. So any of the things in here, whether it is the ambient light or it is, you know, it could be as simple as just having a three d model that spins around, or it could be a full on game, like a a straight up you're driving a car around game. There are some really, So that way, you can do physics stinks to write. It it's hard for me.

brands are gonna be expecting you to understand 3 JS

we had that you have a a 3 d car, and you need to spin the car around. Right? You click and drag, and you spin the car around. That was one of my tasks was to build it. That widget. And at the time, they're like, well, we have a three d model, and, like, 3 JS was definitely not, You know what else I'm stoked about is 2 of our amazing sponsors, Prismic and the LogRocket. It. LogRocket is the perfect place to see all of your errors and exceptions happen Or drop a review if you like this show.

you think seeing more 3 d around the web. The the globe on GitHub's homepage is 3 JS.

you hear questions Questions from people who've been like, how do I do this in x, y, and z? It's like, no. This is just a layer. Yeah. This is a layer. Exposing you to anything else to add or should we wrap it up? I think we can wrap it up. Alright. Thanks for tuning in. We will catch you on Wednesday. Peace.

ambient light,

When I'm working in this stuff, I'm mostly just looking at the 3 JS docs. Yeah. And sometimes you Imperative. Imperative? So So that that kind of really gets at the heart of it is you have this canvas.

So anything you possibly wanna know about properties or or any of those things, that's where you go. I I, in fact, hardly look at the Svelte cube documentation imperative is if And declarative is somebody just declare the component you want. Yeah. So so think about it that way and say, like, okay. Well, declarative is Now that we're declaring we have the structure of things, and that's how it is. And when you think about, like, 3 d, Like, for a full archive of all of our shows. And don't forget to subscribe in your podcast player My name is Scott.

The thing that's underneath, which is 3 JS in our case.

And because this thing is brand new, you might be thinking, alright. The if I go to lights, ambient light, it says to do. I might be confused. What can I do with this ambient light? Augmented reality experiences on the web. Imagine that. Right? Peace.

is any of the things that are there, any of those properties that are there are going to be in the Svelte cubed. And so that's how you you can get around it. Because I have seen people say, like, I really wanted to use Svelte cubed, but it feels like it's not done. The documentation doesn't tell me, like, what can I do with this thing? And the answer is 3 JS' documentation The types of The experiences you can build with 3 JS are really pretty incredible.

massive. It is absolutely massive. You could spend probably an entire year playing through the 3 JS documentation.

For 3 JS written in Svelte. And extremely easy. If you can write if you can write a basic, you know, a Svelte website or would be hard in 3 JS or or cumbersome or maybe a little confusing in 3 JS or as Simple as dropping in a component.

if you worked with React 3 Fiber at all, using a scrubbable video replay it. Where you can actually see the user click on the thing that broke the thing, and then you get access to the tools that you typically know and love, like the network requests, error log, and more all around. If I was tasked with that today, you know, it would be a different experience.

Svelte Cubed

and three d in the browser. I know that you just did a course on this. I'm really excited to it both for you, the developer, but also your end users who are putting this thing together. So Prismic really focuses on this thing called slices, which means that you can create these little slices, which are call to action or description

Well, it's basically an interface this little small little thing, Fifty lines of code. Wow. Holy cow. That's so cool.

All right. So let's get in to For your headless CMS is awesome

within your browser. It's really cool. Imagine being able to see, It's hardware accelerated, so uses your GPU to run really efficiently, and you can do some really amazing stuff in browser with it. You can even do virtual reality, augmented reality stuff with it pretty easily.

Boss, and Scott, El Toro Loco,

website builder for your end users. You want to check this out for your next website at prismic.io development experience for you, the developer, But it's also a really nice

the tastiest web development treats coming again hot. Here is Wes, Barracuda,

Which is a headless CMS. It's not only a headless CMS. We've there's millions of headless CMSs out there. What's really important is that the editing experience

you can create those slices. You can preview what they're going to look like right inside the editor,

Tolinski.

the craziest,

forward slash syntax. That's going to give you some really cool examples to get you started. Thank you, Prismic, for sponsoring.

or people that are in your organization. And,

And then you click together those different slices into an entire page. So not only is it like a really nice component driven

Monday. Monday. Monday.

Stoked.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest,

I've never worked with three d before, and you have another axis that you're

or you have an object three d, which is a collection of meshes tied together.

You essentially have a canvas element, and then you have a light element, Oh, yeah? Yeah. This is it's it's just one of those things that, like, as if the you were the user who did the thing and broke the thing. You can see all of that in in your own browser, and via all of LogRocket's amazing tools. Not only that, but they have a lot of really amazing performance tracking metric tools now as well. So So check it out at logrocket.comforward/syntax why why would you use that over regular 3 JS? Well, the biggest reason is that it's declarative. And

it. Not used to working in, and there's camera and light. And light. Yeah. Coming from different angles, and you can change those things. But then once Once you understand, okay, these are the basics of modeling in three d, which is kind of funny because, like, you can approach this as a JavaScript developer

And then you have maybe a group of meshes like West. I I think in maybe about 15 minutes, you could create a cannon where if you hit the spacebar,

You have individual objects, and then you put them on the canvas. In the case of Svelte cubed.

Or you can approach it as a 3 d person who knows how three d works but is learning

another world of something that

or you have light sources and a camera.

you just And you'll be I think you'll be shocked at just how cool it is. Awesome. Cool. Well, thanks for that. And

to drop an orbit controls, And, like, that right there is enough to make you go, So what happens is when you declare, the documentation, do the getting started, if you don't know what those terms mean, people often throw declarative around like everybody knows what it means. But, it. Basically, declarative is that instead of giving your code step by step instructions, you're declaring what we want. You can think of it as instead of, like, Do this, then do this, then do this. You're giving it a component. Right? So, like, React is declarative. You have your component tree. It's declarative. Declarative, same with Svelte, right? The exact reason why we don't have if statements in React, because it. Because this all exists within Svelte, Svelte's context, it's even though your the end result is drawing on an on a it. Canvas, you can use any of your Svelte templating stuff. For instance, we did, like, a fake version of the GraphQL or the the GitHub contributions jobs. You know? Yeah. I think about that too because it's like, yeah, if you come from the 3 d world, it. The lights and camera, that's going to feel very at home. It's gonna feel like, alright. I need to put a light. I need this type of light, whether it's ambient light or directional light or pain light or whatever. I need these lights. And I also need a camera to position itself. I understand, you know, the the camera camera draw distance and things like that. So there there's a a lot of different angles you could be coming at this app.

into this thing where you where you're, like, kind of changing the the the cam the camera position, but it's not the real camera. It's like your your visual look for the whole thing. So what's neat about this is that to drop in which is also a React it kind of, renderer for 3 d on the web.

you use it, and then that's it. And that's what's so cool about this stuff is that it. It really feels like

things that So

Oh my gosh. I'm like, if I'm not talking, it's because I'm lost in the examples of this. It's unreal.

A whole thing about any of this. And one of the the examples that we do in the level of tutorials course was it the Framer Motion people? They had, like, done a 3 d star first and foremost? the mesh or the primitive or the skeleton or any These things, they're the exact API that is within Three JS. So if you go to Three JS's documentation inside of a box type of deal, but it was like this. This is a 3 d object On this 4 100 and 49th episode of Syntax is Wes Bos. Hey, everybody. Excited to be here. Yeah. I'm excited to be here. I'm excited that You're excited to be here.

lines of cubes, and you can create these really neat three d graphs.

component, and then you have a cube component, so to say. It's a mesh component that you you say is a cube.

I haven't done that myself, but So that's why declarative So, And with me, as always, or or 3 d assets on the web, it. It's hard to think about it, and, like, first thing I need to do is create a cube, then I need to apply a mesh to a cube, then I need to apply a texture to a cube. It feels way more like you're working with something substantial if you're saying, I don't know if you've gotten in in your your, quick look, Wes, if you've gotten to, like, the orbit controls. I have. Yes.

you'll be shocked at the type of things you can do.

really substantial.

Any WebGL, Open GL graph where it's the Light green squares or whatever. So we generated an array of data, So you might be the WebGL, Open GL person, but Me, not so much. That's a lower level language.

If you go to 3js.org modeling or Blender or any of those things. It is fun to generate a cube on the screen and to pan around it with your clicking mouse. There's Just something a lot of fun about it. So, let's get into it. What is Svelte cubed It makes me feel like I've gained some sort of superpower that I can now say a spinning cube, like an animated spinning cube in three d space that you can augment and play around with binded variables, which is an implementation of Canon ES physics CS simulations.

to render.

WebGL is a super low level language that you don't wanna write. Trust me.

rather than SC, which is Svelte cubed. You create a a physical object, And then you bind it using Svelte's bind syntax to the cube, Blender to create a model. Like, I was like, I'm gonna I'm gonna create a 3 d model for our course it. Just so we have something to use that I know is not licensed to anything. I don't have to be beholden to any sort of license. I'm just gonna create the 3 d model myself. And the hardest part for me Was working in Blender to to figure out anything like that. Once I got the model out, like, adding this thing to a website or making it have physics was like it was just, like, effortless. So You import our orbit controls, Specifically with Svelte Cube, but but also just kind of in general. My name is Scott Talinski. I'm a developer from Denver, Colorado.

and now this cube has these physical properties to it whether or not it is Creating a simple cannon So sometimes you just have to you understand how it works with the Svelte cubed or whatever it is you're using, and then you go to the the mother library to get all of the documentation for that thing. Yeah. And if you if you wanna, like, pick up Svelte cubed and you don't wanna buy a course, what you do is you go to Svelte cubes website. We'll have a link in the show notes. You click on the getting started. You do the getting started. By the end of the getting started, you have a And you look up the class for, On this Monday, hasty treat. We're gonna be talking about 3 d in the browser, So, in addition, we we talked to like, you have a mesh. Right? And a mesh is essentially something that can be just like the vertices, and they can be attached to anything so you can attach a geometry to a mesh. So let's say I create a mesh, and then I attach a a cube geometry to it. It's gonna look like a cube, And then I attach a material to it, and I say, this material has metallic properties, a shiny, whatever. It reflects light. It casts shadows, three d feels a lot better than What what is the opposite of declarative? It's here about both 3 d in general, but also how you inter integrated it into Svelte, which seems pretty neat. Yeah. And It's fun because 3 d in the browser is just it's one of those things that's just straight up fun no matter what. Even if you don't know 3 d, You don't know, You'll know that declarative Basically, it creates an HTML canvas element, and that canvas element is where all of the three d takes place.

with 3 d in no time using the same declarative approach. And what's interesting about this is What you do is you create a physical object using PE The, that's being utilized as if it were an image, but the three d itself is interactive because it's a canvas. Right? It. So you have a lot of neat neat options there.

It just shoots a cube out into the into the ether, and then it bounces. And then maybe they can collide. Because I I've created stacks of cubes that fall over. I've Created, like, marbles dropping from the sky. I've created all sorts of cool things. I I really wanted to create, like, try to create, like, a little miniature game it. With this because it it is as simple as saying, alright. I have this item. Here's the gravity it has. It maybe has normal gravity or normal mass. It exists in this world. You bind it to the actual three d element, and it just works. These things bounce on each other, and they it's it's incredible. Like yeah.

and it integrates with HTML.

So for me, personally, So this uses Canvas.

And because it works so simply, you can do even, like, or even 3 d models in some regard. I remember when I worked at Ford,

And it all happens in, like, Fifty lines of code. Right? Like, some of the stuff that we're doing in the course is, like, this

You're you're you can do a each statement or anything like that. You can build some incredible stuff.

You have a renderer, which is going to be essentially the canvas that renders the entire scene. You have your scene, which includes a number of things. It includes a, If we're if we're talking about future of web future of web experiences, it feels like that's the type of thing that's pretty high up on the list of things that you You may end up finding yourself writing at some point in the future of your career. Right?

like, a a drawing canvas for any of this stuff, And you just look at this giant wall of examples, sign up, and you'll get 14 days for free. Thanks so much for LogRocket for sponsoring. We're also sponsored by Prismic, just export Those types of deals, and then I can assign maybe even, like, a texture to it. And those textures will do more than just look like the thing. It can even actually add, like, Bump map textures where the bump bump map where where it actually looks physically bumpy,

And the cool thing about Being in Canvas is that Canvas is just an HTML element, so you can do anything you want with it. Right? You can treat Canvas as an image if you'd like. In fact, I saw some amazing examples from then we each over that data, and then we use that data to assign a height a To a cube. So what you end up having is this big, long grid of 3 d cubes that are color changed or it. Tall based on the number value, but it's just using a simple each statement to output the cube and then offset it by a certain amount. And so in under 50 lines of code, you can have this giant generative On an ambient light, I just drop in an ambient light component. It works. Right? Now if you go to the cube the Svelte cube documentation, Drop in the orbit controls component.

I just have a cube, and here are the properties of said cube. And they exist within this canvas or whatever. Right? You're gonna see a ton of to dos everywhere.

three d feels so good Because you're basically defining the things as they are.