This is a small practice to get familiar with the A-frame 3D/AR/VR web framework. This is part of the Real Time 3D-XR Visualization course at the Université Jean Monnet.
- Make sure you have installed npm’s live server by running the command
npm install -g live-server
. - Go to the
src/
directory. - Run the
live-server
command.
Build a 3D model of the head of Mickey Mouse which is only composed with several a-sphere and basic transformations (position, scale, rotation)
- Recreate the earth with a sphere associated with the following texture “earth_4096.jpg”.
- Place this earth above a pink plane on which it will cast a shadow.
- What is happening if your use a box instead a sphere? R/ The texture is being loaded in each of the box’s faces.
Add a pseudo moon as satellite of your earth (which will use the texture “moon_4096.jpg”). This pseudo moon must be associated to the coordinate system of your earth. It is hierarchically dependent to the earth (ie. when the earth turns on itself the moon follow this motion)
- Now you will animate this earth by making it turn on itself.
- What is happing for the moon? R/ See point 3.
- Of course, your moon will also turn on itself
Test the different lighting methods available in a-frame with the previous 3D visualization. R/ In this case, a spot light was utilized for simulating the light of the sun.
Place you head of Mickey Mouse on the surface of your moon which turn around the earth and on itself.
Build a robot arm like the one in the following image:
Where each red sphere corresponds to a kneecap with 3 degrees of freedom allowing to animate this arm by simply changing the values of the corresponding angles (see below).
Add a pair of pliers similar to the one in this picture:
Finally, animate it.
You already finished everything? Congratulation, now you can create and animate the Boston Dynamics dog robot. Do not forget to add some nice textures on it!