Want to edit your scene without guessing desired values and reloading your code each time? The inspector helps us do just that.
Similar to the regular web inspector, we can open the A-Frame inspector by clicking inside the browser and holding down a keyboard shortcut:
- Mac: control + option + i
- Windows: ctrl + alt + i
The left-hand panel lists all of the entities in the scene. The right-hand panel displays information about a selected entity’s properties. Click on one of the entities to see its
scale, etc. This panel will also show us if a material or texture is attached to an entity.
Once the inspector is open, we have a couple of options for transforming your entities:
In the Inspector Panel
On the right-hand side of the inspector panel, we can click on a property value and type in a new value, which will immediately transform your entity in the scene. If you’re not sure which value you’d like to use, or you just want to play around with positioning, you can use your mouse wheel to scroll through values.
In the Scene
The inspector also allows you to navigate through the scene and manually transform objects. To re-position an entity, click to select it and then use the handlebars to move it around:
- The red handle changes the x position.
- The green handle changes the y position.
- The blue handle changes the z position.
Open up the inspector using the hotkeys. And take a moment to look through our list of entities.
Try doing the following:
- Move the text a little bigger and higher.
- Move the character so that it’s closer to the default camera.
- Rotate the scene so that you’re looking up at the character through the ground.
Just remember — if you make any changes in the inspector, they won’t carry over unless you copy the new values over into your code!