3D on the Web & WebXR

Creating an AR Scene

3D on the Web & WebXR

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

The "Creating an AR Scene" 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 converts the VR scene to an AR scene by using the ARButton component and updating the renderer. AR experiences use the setAnimationLoop method on the renderer object since they require higher frame rates than the requestAnimationFrame function can provide.

Preview
Close

Transcript from the "Creating an AR Scene" Lesson

[00:00:00]
>> We are actually going to change that now to an AR button in fact. So it's but everything else will be the same, and only instead of the art we are going to save it as AR. And because we already had, added the button now the button itself is going to just change to AR instead of VR.

[00:00:35]
We don't have to do anything differently, remember to run NPM run NPM dev NPM run dev. Also, sometimes the problem is when we change anything on the HTML file, we have to restart our server because those changes doesn't get picked up. And if that's the reason why you should be able to solve it by restarting your server.

[00:01:12]
Right, again we are having an issue with ARs. And ART is line 30. So, I was getting an error if you just downloaded what I had. One of the things that we were missing was a comma inside our mesh Pong material. We are still adding the VR button but instead, I should add the R button and this time, I will add the optional feature, which is the hit test.

[00:02:12]
Sorry, it was an optional feature, it was a required feature. So this demo itself is going to require the hit test, which is when you see a surface and you think you can put something on it. We detect that surface with the hit test. So that your objects are not flying around, but they look like they're in the actual environments.

[00:02:36]
Once I fix the button issue now are both in turn into AR and it's not supported on this device so I'm not going to be able to see it there. But if you go back to your, devices, inspect devices, I should be able to open it and debug it there.

[00:02:58]
So, if you are able to see this you few things that you could do, you can focus on this tab reloaded or inspected. It's going back to into a VR environment although it has it says AR, so let's take a look at it where we have the issue.

[00:03:22]
First thing we did is to download button which is good, and we requested attendance create render and required feature hits us, which is also good. One of the things that we have to do for AR and VR experiences is to change request animation frame to render a set animation loop.

[00:03:49]
So this is a special function, now 80 of the render for especially with xR. Most of the normal animations on the web, they have to run 60 frames per second. But in the case of xR, usually that's much higher if you're on a VR headset that could be 90 pictures per second or even higher.

[00:04:19]
So we have to make sure that we use that, so let's go back to it and refresh it All right now I am seeing through the camera that means that this is an AR experience. But what is happening is that my Earth is in this corner and when I move my camera it moves with my camera.

[00:04:54]
So that's not what we want, so this is where the hits us comes in. Now we have to find a surface and make sure that we are hitting that surface before we place our 3D model.

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

Not sure where to get started?

Answer three short questions and we'll recommend the best learning path for your experience level and goals