Designing and Building Virtual Environments - Chapter 4

Designing and Building Virtual Environments - Chapter Four

• This chapter focuses on object and scene modeling using A-frame.

A-Frame Code Editors

• Brackets: A modern, open-source text editor specifically designed for web development, supporting HTML, CSS, and JavaScript.
• Glitch: A collaborative, in-browser coding platform ideal for quickly building and deploying web applications, useful for prototyping and real-time collaboration.

Using Brackets

• Download Brackets from https://brackets.io/.
• Open Brackets on your computer.
• Create a new file by going to File > New.
• Save the file as HTML by navigating to File > Save As...
• Name the file with the .html extension (e.g., index.html).
• Choose a location on your computer to save the file and click Save.

A-Frame using Brackets

• This section details how to use A-Frame with Brackets to model objects and create scenes.
• Images illustrate steps within a file editor to generate different types of objects.

A-Frame

• A-Frame is a popular framework for creating VR experiences.
• It is built on top of HTML and the DOM (Document Object Model).
• A-Frame utilizes 'polyfills' for extending HTML functions to add VR-specific tags (, , ), directly within HTML.
• A-Frame integrates seamlessly with numerous web development libraries (React, Vue.js, Angular, D3.js, and jQuery).
• This compatibility allows combining VR capabilities with interactive user interfaces, data visualizations, and dynamic web content.

A-Frame with Code Example

• A code example displays a light blue box positioned slightly left, raised, and rotated 45 degrees around the vertical axis.
• The box becomes a VR element in an A-Frame-compatible browser.
• The example uses HTML attributes for defining the box's position, rotation, and color.

A-Frame Primitives

• A-Frame offers built-in primitives for creating 3D objects like boxes, spheres, cylinders, and planes.
• These primitives are fundamental components for building complex 3D models within the A-Frame environment.
• Users can add , and elements to add images and define the viewer's perspective.
• Developers can add cursors to interact with VR objects.

Customizing A-Frame Primitives

• Developers have the flexibility to create and register their own custom primitives in A-Frame.
• A custom primitive is registered using AFRAME.registerPrimitive(name, definition).
• The primitive name must contain a dash (e.g., 'a-foo').

A-Frame Primitives - Example

• Visual representations of various A-Frame primitives such as , , , , and are shown in the context of an A-Frame scene.

A-Frame Primitives - Extended Example

• A more comprehensive code example using A-Frame primitives showcases creating different elements like boxes, spheres, and cylinders with specifications.

Meshes and 360° Content

• Meshes represent 3D shapes in A-Frame.
• 360-degree content, such as photos, videos, and backgrounds, surrounds the user.
• Example: Using <a-sky src="path/to/image.jpg"> creates a 360-degree background.

A-Frame Camera

• A-Frame automatically includes a default camera, allowing viewers to interact with the scene without explicitly adding one.

Transformations in A-Frame

• Transformations in A-Frame include scaling, rotation, and positioning.
• Scaling: Affects the size; factors for the X, Y, and Z axes can be positive or negative (signifies reflection).
• Rotation: Defines the orientation of an entity; uses pitch (x), yaw (y), and roll (z).
• Position: Locates an entity in 3D space; represented by x, y, and z coordinates.
• The order of operations for transformation is Scale, Rotation, Position.
• Transformations are relative to their local coordinate system rather than the global coordinate system.
• Transformations nested entities are multiplicative.

Resource

• The resource for this A-frame framework is: https://aframe.io/