Become Proficient in WebXR: Create XR Experiences Using A-Frame/

...

/

XR Scene Setup and Object Decomposition

XR Scene Setup and Object Decomposition

Learn to configure A-Frame and get an introduction to XR objects and their basic components, such as position, rotation, and scale.

We'll cover the following...
Press + to interact
Press + to interact
Press + to interact
Press + to interact
Press + to interact
Press + to interact
Press + to interact
<html>
  <head>
    <title> Car prototype using A-Frame </title>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>

  <body>
    <a-scene>
      <a-assets>
        <img
          id="sky"
          src="/udata/MvYQRVanpqG/SKY.jpg" />
      </a-assets>

      <a-sky
        src="#sky"
        rotation="0 -60 0">
      </a-sky>

      <a-plane
        color="gray"
        position="0 0 -3"
        scale="1000 1000 0"
        rotation="-90 0 0">
      </a-plane>

      <!-- Car -->
      <a-entity
        id="car"
        position="0 2 -3">
        <a-box
          id="body-1"
          color="#FFFAAA"
          position="0 0 -2"
          height="0.05"
          width="1.5"
          depth="0.75">
        </a-box>

        <a-box
          id="body-2"
          color="#FFFAAA"
          position="0 -0.75 -2"
          height="0.05"
          width="1.5"
          depth="0.75">
        </a-box>

        <a-box
          id="body-3"
          color="#FFFAAA"
          position="0 -0.4 -1.65"
          rotation="90 0 0"
          height="0.05"
          width="1.5"
          depth="0.75">
        </a-box>

        <a-box
          id="body-4"
          color="#FFFAAA"
          position="0 -0.4 -2.35"
          rotation="90 0 0"
          height="0.05"
          width="1.5"
          depth="0.75">
        </a-box>

        <a-box
          id="windshield"
          color="#FFFAAA"
          position="1 -0.25 -2"
          rotation="0 0 140"
          height="0.05"
          width="0.75"
          depth="0.75">
        </a-box>

        <a-box
          id="bonnet"
          color="#FFFAAA"
          position="1.25 -0.6275 -2"
          scale="1 0.3 0.74211">
        </a-box>

        <a-box
          id="back"
          color="#FFFAAA"
          position="-0.7275 -0.375 -2"
          rotation="0 0 90"
          height="0.05"
          width="0.8"
          depth="0.75">
        </a-box>

        <a-cylinder
          id="wheel1"
          color="#444444"
          rotation="90 0 0"
          scale="0.15 0.15 0.15"
          position="1.251 -0.8765 -1.7219">
        </a-cylinder>
        <a-cylinder
          id="wheel2"
          color="#444444"
          rotation="90 0 0"
          scale="0.15 0.15 0.15"
          position="-0.448 -0.87162 -1.71224"></a-cylinder>
        <a-cylinder
          id="wheel3"
          color="#444444"
          rotation="90 0 0"
          scale="0.15 0.15 0.15"
          position="-0.448 -0.87162 -2.2753"></a-cylinder>
        <a-cylinder
          id="wheel4"
          color="#444444"
          rotation="90 0 0"
          scale="0.15 0.15 0.15"
          position="1.242 -0.8698 -2.2624"></a-cylinder>
      </a-entity>
    </a-scene>
  </body>
</html>
Final implementation of the car example