Check out a free preview of the full Web Components course

The "Fun & 3D Components" Lesson is part of the full, Web Components course featured in this preview video. Here's what you'd learn in this lesson:

Dave demonstrates a web component library that adds accessibility to older elements like blink and marquee. There are web components for rendering immersive 3D experiences in the browser which provide an easy API for scaffolding a 3D scene.

Preview
Close

Transcript from the "Fun & 3D Components" Lesson

[00:00:00]
>> Maybe you want to go a bit older, right? You don't want this new stuff, you want the old stuff. Well, my friend Alex has you covered, Alex has this thing called geo elements which is reimplementing deprecated web 1.0 tags and [LAUGH] custom elements, the blink tag and the marquee tag.

[00:00:20]
But he's doing it in like an accessible way, which is these things didn't have the greatest accessibility. But if you want to prefers reduce motion, if you want to reduce them. Better, right, now we're not getting motion sick I probably should have given a warning before that. But, yeah, so you can turn off the blink tag, if you prefer reduced motion.

[00:00:46]
It's hideous, Alex makes terrible things, but, Your mileage may vary. It's all in a G background. [LAUGH] The old BG tag or where you could like BG color and stuff like that. And we have a font tag, and we have a marquee tag, and a blink tag. It does everything you want, from a Geo City's aesthetic.

[00:01:10]
So if you're building geo city sites still, Alex has you covered. Ugh, none of these work in the metaverse, I know. We've been doing two dimensional websites. How boring? Let's go into the far future, we saw the past. A frame is a library from I guess the old Mozilla Firefox reality team, did a lot of work on this Chrome team, like the Chrome Daydream VR team did a bunch of work on it too.

[00:01:48]
But you're able to build 3D scenes in the web browser Kind of cool. I'm just using my WASD keys to walk around my 3D world I invented here. And the API is pretty cool. Let's begin this because we can. We want HTML, so you know CSS, no JavaScript.

[00:02:15]
No CSS, no JAVA, we just have HTML. And the API is pretty cool. We have a script tag, we go to a frame, and we create a-scene, right? And inside a-scene is a-sphere, this guy, it has a position in 3D space X, Y, and Z that's confusing, but it has a radius of 1.25 meters basically, because in VR the Size matters.

[00:02:48]
[LAUGH] I guess you can't say it's 18 pixels, you reference things in use or meters and we give it a color, right? And then there's also a box which has position has a bit of a rotation with height and depth, and how we have a cylinder, and we have a plane, not an aeroplane but a two dimensional surface, a plane on the bottom.

[00:03:11]
And then we have a sky, which is just a giant sphere, I think it's 90 meters or more? It's a giant sky, a giant sphere that's colored on the inside. So, and a scene gives us the camera and everything like that. And we can kinda even control the camera height if you're not one point, I think the default is 1.6 meters tall.

[00:03:38]
So if you're not 1.6 meters, I know every American here is just paralyzed with not understanding [LAUGH] meters, but if you're not in America, you'll understand it just fine. But the neat thing is, I'm gonna click this VR. And if I was in a VR headset warm, I'm in the metaverse like I entered the metaverse.

[00:04:00]
But here because my computer in this PowerPoint does not support VR, we just get a full screen 3D scene that we can walk around and see kind of we can even go in the sphere, that's weird but clipping. So that's it, that's a kind of an interesting thing, you can kind of build 3D experiences, I Dave Rupert do not know how to code WebGL, I do not even know how 3JS works.

[00:04:27]
This it gives me a declarative API to use 3JS without any of the, I guess, troubles or worries and so I can build things. I've built tons of things, this is kind of my list of shame here. Well, there's my [LAUGH] there's my profile, wasn't expecting that. We'll go to collections, and then I think I have yeah, I was trying this like 30 days of Web VR.

[00:04:52]
And I was like, could I just be on Mars and yeah I could I took this like 3D photo from a rover, it doesn't look good but it looks pretty good on a Google Cardboard, is all right, I was I made these guys talk. This is probably my favorite one.

[00:05:12]
This one is a whale that you can talk to. It's like a little life coach. I just thought that would be cool to wake up every morning, talk to my whale friend and he dispenses agile advice to me.
>> [INAUDIBLE]
>> Yeah, it's just beautiful, blends with the speech synthesis API.

[00:05:39]
Just amazing. Really what's possible. [LAUGH] I can't make cool things, but you can and I think I'm really excited for what you're able to do. Building your own 3D worlds in the metaverse so all right and then if you use it too much the API expires and it starts reading out like cores errors, so [LAUGH] it's great, the future is now.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now