Skip to content

rogerjaffe/aframe-demo-shapes-animation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

APCSP: A-Frame Demo 1

A-Frame demonstration program with A-Frame.

Getting Started

Log in to your Cloud 9 account and create a new HTML 5 workspace. When you're creating the workspace you must clone the repo to initialize your workspace.

Start the web server

In the Cloud 9 terminal enter the comment sudo service start apache2

Opening the webpage

  • Click the Share link in the top right corner of your Cloud 9 workspace
  • Click the middle link, then click Copy
  • Open a new web browser window and paste the URL you just copied

You'll see a 3D page with several shapes and some animations (movement)

Explore the code

Open the index.html and javascript files in the js folder. Make small adjustments in the code, save the changes, then reload the webpage to see the effect of your changes.

See if you can adjust the code to do the following:

  • Change the color of the sky
  • Change the location of the directional light
  • Move the camera up by increasing the value of the y-coordinate
  • Change the size of the box
  • Find an image file (jpg or png) with a red color and change the color of Makey the Robot to red
  • Change the scale of Makey the Robot to make him bigger
  • Make the box spin slower
  • Make the box spin around the x- or z-axis
  • Make the Earth spin faster
  • Make the Earth spin the other way (crazy time zone changes!)
  • Move Slimey away from the camera

About

A-Frame demo project #1 for APCSP, shapes and animation

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published