Scribd
Upload
25 views3 pages

Frontend Assignment

The assignment requires the creation of a mobile-responsive web page featuring a 3D simulation of the solar system using Three.js. It includes building a scene with the Sun and eight orbiting planets, implementing real-time speed control for the planets, and optional bonus features. A demo video and submission of code files in a zip format are also required for evaluation based on specific criteria.

Uploaded by

adarshgautam5760
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views3 pages

Frontend Assignment

The assignment requires the creation of a mobile-responsive web page featuring a 3D simulation of the solar system using Three.js. It includes building a scene with the Sun and eight orbiting planets, implementing real-time speed control for the planets, and optional bonus features. A demo video and submission of code files in a zip format are also required for evaluation based on specific criteria.

Uploaded by

adarshgautam5760
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Frontend Assignment

Frontend Developer Assignment:

The assignment is a single mobile-responsive web page.

Objective

Your task is to build a 3D simulation of the solar system using Three.js, a powerful
JavaScript library for rendering 3D graphics in the browser.

This assignment will test your skills in 3D rendering, scene creation, object animation, and
user interaction using pure JavaScript — without using any CSS animations.

1. Web Page + Styling

You must create a web page with a 3D canvas containing:

●​ The Sun at the center of the scene​

●​ All 8 planets orbiting around it (Mercury to Neptune)​

●​ Each planet rotating around the Sun at a default speed​

●​ Realistic lighting, camera, and orbit animation​

Use Three.js to:

●​ Create the 3D objects (spheres for planets)​

●​ Set up lighting and camera angles​

●​ Animate planetary orbits using THREE.Clock, requestAnimationFrame, or GSAP


(optional)​

The scene should load quickly and work on all modern browsers.
.

2.Speed Control Feature (JavaScript)

Implement a control panel on the page that allows users to:

●​ Adjust the orbital speed of any individual planet in real-time.​

●​ Use sliders or input boxes for each planet.​

●​ When the speed is changed, the planet’s animation should reflect it immediately.​

This should be built using plain JavaScript, interacting with the Three.js animation loop.

3. Bonus Features (Optional)

These are not mandatory, but if you can implement them, it’ll strengthen your submission:

●​ A “Pause/Resume” animation button​

●​ Background stars in the scene​

●​ Labels or tooltips on hover over each planet​

●​ Dark/light toggle UI​

●​ Camera movement or zoom on click

4. Demo Video

Your screen recording (2–3 min) should show:

1.​ The 3D solar system in motion​

2.​ Speed control working in real-time​


3.​ Explanation of how planets and orbits were created​

4.​ Folder and code walkthrough (with voice)

5.Submit the following:

●​ A zip file named Your Name.zip containing:​

○​ All code files​

○​ README.md with clear steps to run​

●​ A demo video showing your project in action​

●​ Subject line: Frontend Assignment – Your Name

6.Evaluation Criteria

●​ Accurate and clean use of Three.js​

●​ Smooth and responsive orbit animations​

●​ Correct handling of user inputs to change speed​

●​ Clear code structure and comments​

●​ Neat UI and demo presentation

You might also like