FAQ: Introduction to A-Frame - Review

This community-built FAQ covers the “Review” exercise from the lesson “Introduction to A-Frame”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn A-Frame

FAQs on the exercise Review

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in Language Help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to Language Help and Tips and Resources. If you are wanting feedback or inspiration for a project, check out Projects.

Looking for motivation to keep learning? Join our wider discussions in Community

Learn more about how to use this guide.

Found a bug? Report it online, or post in Bug Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

i am trying the lego piece challenge but i am unable to make it as it shown, i didn’t able to set the angles properly… please anybody help me with that!!!

      <a-box 
        color="red" 
        position="0 2 -5"
        rotation="20 45 20" 
        scale="2 1 2"></a-box>

here is the code i am using…

1 Like

having the same issue here, i’m trying to move the cylinder to fit the box

. I used this code and it appears similar like the lego piece.

I’m having the same problem. It is supposed to be on the box, but my cylinder is far behind it!

@beta1029425651 @laurentmisso26936928 @hrithikarya
Here’s the code:

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene background="color:#222222">
      <a-box 
       color="red" 
       position="0 2 -5"
       rotation="0 45 45"
       scale="2 1 2">
        <a-cylinder position=".25 0 .25" scale=".15 1.2 .15"></a-cylinder>
        <a-cylinder position="-.25 0 -.25" scale=".15 1.2 .15"></a-cylinder>
        <a-cylinder position="-.25 0 .25" scale=".15 1.2 .15"></a-cylinder>
        <a-cylinder position=".25 0 -.25" scale=".15 1.2 .15"></a-cylinder>
      </a-box>
    </a-scene>
  </body>
</html>

There’s a supermedium discord server where a guy share this code with me. I highly recommend you joining in. He is using child-figures (something familiar to all of you because of knowing HTML) and same happens with a-frame.

If any of you guys have SO I recommend you posting it there, for future people having the same issue just googling for getting the solution. I still don’t have but I should sign up. Next time I will do it.

Happy coding and have a great day.

Edit: There’s also an Slack server and all this information you can find them on the documentation.
Here for example the section about HTML & Primitives: https://aframe.io/docs/1.0.0/introduction/html-and-primitives.html.

2 Likes

Cues Up Everything is Awesome

I don’t know if it is the solution but it is a solution to the AFRAME Lego piece. I was getting rather frustrated with the limited transform tool the unit introduced us to… thinking there was a solution in the beginner building blocks. Spoiler Alert Maybe No?

First stop was here and @hrithikarya was partially on the right path with the rotation but I felt like the CC piece still looked a little different than that. So I fiddled.

I tried your solution @pa_u_los but:

This is what rendered in my browser… Now granted that might be a me problem … but I think too your solution needs a color tag in the a cylinder. Equally they map on to each other with the given coordinates also map on to each other ??! I did however, take your advice and read through the documentation…

The documentation on Primitives and specifically noticed the example code for cylinders in the had a height and radius dimension SO:

 <a-box 
        color="red" 
        position="0 2 -5"
        rotation="30 50 30"
        scale="2 1 2"></a-box>
      <!-- Change the code below: -->
      <a-cylinder
      position="0.9 2 -5" 
      radius="0.5" 
      height="1.3" 
      rotation="30 50 30"
      scale="0.5 1 0.5"
      color="#FFC65D">
      </a-cylinder>
      <a-cylinder
      position="-0.9 2 -5" 
      radius="0.5" 
      height="1.3" 
      rotation="30 50 30"
      scale="0.5 1 0.5"
      color="#FFC65D"></a-cylinder>
     <a-cylinder
      position="0 3 -5" 
      radius="0.5" 
      height="0.15" 
      rotation="30 50 30"
      scale="0.5 1 0.5"
      color="#FFC65D"></a-cylinder>
      <a-cylinder
      position="0 1.9 -4" 
      radius="0.5" 
      height="1.5" 
      rotation="30 50 30"
      scale="0.5 0.2 0.5"
      color="#FFC65D"></a-cylinder>
    </a-scene>
  </body>
</html>

That’s what I came up with. I think I could still tinker with the scales and heights and what not. I also found it helpful to use a different color whilst tinkering with the cylinders instead of all red everything.

This is what it looks like rendered

3 Likes

Thank you everyone for the comments. It’s 2024 now and I’m so happy these were here as I start my journey with A-Frame. I took a first stab at it and this was the code I came up with:

<a-scene background="color:#222222">
  <a-box 
    color="red" 
    position="0 2 -5"
    rotation="-25 230 -25"
    scale="2 1 2">
  </a-box>
  <!-- Change the code below: -->
 <a-cylinder 
    color="crimson" 
    height="1.3" 
    radius="0.3"
    position="0.5 2 -5"
    rotation="-25 225 -25">
 </a-cylinder> 

<a-cylinder 
    color="crimson" 
    height="1.3" 
    radius="0.3"
    position="-0.5 2 -5"
    rotation="-25 225 -25">
 </a-cylinder> 

 <a-cylinder 
    color="crimson" 
    height="2.5" 
    radius="0.3"
    position="0 2 -6"
    rotation="-25 225 -25">
 </a-cylinder> 

 <a-cylinder 
    color="crimson" 
    height="0.3" 
    radius="0.3"
    position="-0 2 -4"
    rotation="-25 225 -25">
 </a-cylinder> 
</a-scene>

Then, I came here and saw all the helpful info and made a few changes and I’m happy with the result. It’s not the same but baby steps :slight_smile: thanks @ngwolfhare since most of my enhancements to the code were using your code snippets.