3D on the Web & WebXR

Creating a Scene Using AFrame

3D on the Web & WebXR

Check out a free preview of the full 3D on the Web & WebXR course

The "Creating a Scene Using AFrame" Lesson is part of the full, 3D on the Web & WebXR course featured in this preview video. Here's what you'd learn in this lesson:

Ayşegül demonstrates the AFrame library. Web components are used to compose a scene in HTML. VR functionality is included by default in the framework.

Preview
Close

Transcript from the "Creating a Scene Using AFrame" Lesson

[00:00:00]
>> Lastly, we have AFrame, which is another library that is written on top of Three.js, which gives you a more declarative way of defining your 3D scenes. And here is our scene, that we can take a look. So basically what it does is creates these web components and gives you an opportunity to define everything through their properties.

[00:00:30]
So this is a really cool way of creating an application and prototyping things really fast. But at the same time, I feel like it's hiding what working in a canvas is, and I find it a little confusing because I have a totally different model of what HTML is versus what's canvases.

[00:00:59]
And seeing things that are on canvas as HTML is a little confusing to me. But it is a awesome library. And if you don't want to codes a lot of things, don't wanna write all of those functions, this is a easy and fast way of creating the same scene.

[00:01:19]
So, as you can see here we do have a scene object that is the container of our scene, and everything in our scene. And we have a box, sphere, cylinder, and all of the properties that we would normally define in a JavaScript, you can define it here with the position, rotation, color, animation.

[00:01:44]
One cool thing about this is you can start with a frame, but when you have hit a block where you are not able to do what you want to do, you can still use some Three.js. The other really cool part of this is that they have VR sets from the get go.

[00:02:09]
So you don't have to worry about adding any VR checks or buttons, it's already there.

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