Listing 1<\/strong>: The Standard Hello VR World App: A Cube!<\/p>\n<html>\n <head>\n <script src=\"https:\/\/aframe.io\/releases\/1.0.3\/aframe.min.js\"><\/script>\n <\/head>\n <body>\n <a-scene>\n <a-box position=\"-1 0.5 -3\" rotation=\"0 45 0\" color=\"#4CC3D9\"><\/a-box>\n <\/a-scene>\n <\/body>\n<\/html><\/pre>\nIn listing 1, you get your first exposure to an A-Frame Web app. You can see that the A-Frame code is included in the header within the script tag. With that in place, you can create a VR scene using the a-scene tag. In this case, the scene being created is a simple box that is slightly rotated. You can see the results in Figure 1. If you execute this listing in a modern browser, you should be able to use your mouse to move the angle at which you can view the box. View it in a VR browser and you’ll be able to look around as well.<\/p>\n
Figure 1<\/strong>: An A-Frame web page showing a box<\/p>\nThere are a number of basic items called primitives within A-Frame, including the box shown above. There are primitives such as a-box, a-sky, a-sphere, a-cone, and more. Using the primitives, you can begin to build more complex scenes such as the start of a snowman that is created in Listing 2 and shown in Figure 2.<\/p>\n
Listing 2<\/strong>: An A-Frame Snowman<\/p>\n<html>\n <head>\n <script src=\"https:\/\/aframe.io\/releases\/1.0.2\/aframe.min.js\"><\/script>\n <\/head>\n <body>\n <a-scene background=\"color: #7BFAFA\">\n \n <a-box position=\"-1 0.5 -3\" rotation=\"0 45 0\" color=\"#FFFF00\" shadow><\/a-box>\n <a-sphere position=\"1 1.25 -5\" radius=\"1.25\" color=\"#FFFFFF\" shadow><\/a-sphere>\n <a-sphere position=\"1 3.00 -5\" radius=\"1.00\" color=\"#FFFFFF\" shadow><\/a-sphere>\n <a-sphere position=\"1 4.50 -5\" radius=\".75\" color=\"#FFFFFF\" shadow><\/a-sphere>\n <a-sphere position=\"1 3.00 -4.01\" radius=\".05\" color=\"#000000\" shadow><\/a-sphere>\n <a-sphere position=\"1 3.20 -4.04\" radius=\".05\" color=\"#000000\" shadow><\/a-sphere>\n <a-sphere position=\"1 2.80 -4.05\" radius=\".05\" color=\"#000000\" shadow><\/a-sphere>\n <a-sphere position=\"1.05 4.30 -4.05\" radius=\".06\" color=\"#000000\" shadow><\/a-sphere>\n <a-sphere position=\".80 4.30 -4.05\" radius=\".06\" color=\"#000000\" shadow><\/a-sphere>\n <a-cylinder position=\"1 4.75 -5\" radius=\"0.5\" height=\"1.5\" color=\"#000000\" shadow><\/a-cylinder>\n <a-cylinder position=\"1 4.75 -5\" radius=\"1.0\" height=\".01\" color=\"#000000\" shadow><\/a-cylinder>\n <a-plane position=\"0 0 -5\" rotation=\"-90 0 0\" width=\"6\" height=\"6\" color=\"#00FF0F\" shadow><\/a-plane>\n <\/a-scene>\n <\/body>\n<\/html><\/pre>\nFigure 2<\/strong>: The snowman created from Listing 2<\/p>\nThe shapes that you build with are simple entities that share a common API which allows you to manipulate positioning, rotating, scaling and attaching components. Building basic shapes, however, only scratches the surface of what a tool like A-Frame will let you do. You also have the ability to incorporate materials, attach physics, apply lighting and more. You also can work with gaze-based interactions using an included cursor component along with a camera component.<\/p>\n
The framework uses a standard ECS or Entity-Component-System architecture, which is common in 3D and game development. Additionally, you can write your own components using JavaScript that will allow you to mix and match components that you can then configure, reuse, and share. If you’ve created more complex models with tools such as Blender, Sketchfab, and Autodesk Maya, then you can load those models as glTF and OBJ files.<\/p>\n
I’ll include one last listing to show the addition of physics into an A-Frame VR scene. This can be done by simply including an additional package in the header, as shown in Listing 3. In this listing, a ball and a plane are included. The ball falls from above when you load the scene.<\/p>\n
Listing 3<\/strong>: Adding a Bit of Physics to Your VR Scene.<\/p>\n<html>\n <head>\n <script src=\"https:\/\/aframe.io\/releases\/1.0.3\/aframe.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/aframe-physics-system@1.4.0\/dist\/aframe-physics-system.min.js\"><\/script>\n <\/head>\n <body>\n <a-scene physics>\n <a-sphere position=\"0 6 -4\" color=\"#ABABAB9\" dynamic-body><\/a-sphere>\n <a-plane position=\"0 0 -5\" rotation=\"-90 0 0\" width=\"6\" height=\"6\" color=\"#000000\" static-body><\/a-plane>\n <a-sky color=\"#ECECEC\"><\/a-sky>\n <\/a-scene>\n <\/body>\n<\/html><\/pre>\nFigure 3<\/strong>: The Ball dropping in the scene<\/p>\nIn Conclusion<\/h2>\n A-Frame gives you a lot of power to build Web-based VR worlds. The framework removes a lot of the internals so that you can focus on the interface and interactions. If this article has piqued your interest, you can find more details at the aframe.io site.<\/p>\n","protected":false},"excerpt":{"rendered":"
Virtual Reality is making its way onto the web. Several tools have been released to help developers create solutions that tap into web-based VR and AR. One of these tools is A-Frame, which can be found at https:\/\/aframe.io\/. The nice thing about A-Frame is that you don’t have to be a hardcore developer; If you […]<\/p>\n","protected":false},"author":24,"featured_media":1658,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30618],"tags":[960,3448,3385,828,1297,2544],"b2b_audience":[29,37,34],"b2b_industry":[],"b2b_product":[68,118,86,30818,94,67,99,113,98],"acf":[],"yoast_head":"\n
Web-based VR Made Simple with A-Frame | HTML Goodies<\/title>\n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n \n \n \n \n\t \n\t \n\t \n