Glitch is a simple tool for creating web apps with a strong collaboration component. It allows us to remix existing apps or clone projects from services such as GitHub or GitLab. In our case, since we'll only want to create a simple demo web page, we will use Glitch to store both the HTML page and the 3D models. To create a new Glitch project, follow these steps:
- First of all, go to https://glitch.com and click on the Sign-in button. It will automatically create an account.
- In the top-right corner of the page, click on New Project to start a new project. Then, click on the first option, hello-webpage:
Selecting our project template
- You will be directed to a board that will look similar to this:
The Gitch board
Take a look at the README file as it explains the main functionality of the page.
- The next step will be to change the name of the project that Glitch has provided us. Click on the name in the top-left corner of the page and provide a name and description:
Changing the default name of the project
- Now, from the dropdown button 'Show', select 'Next to The Code':
Selecting how to see the final web page
- This will divide our window to show us the result of the code we are writing:
The window shows the code on the left and the result on the right
- Let's upload our models. Click on assets on the left-hand bar and drag and drop the three models of this project, that is, gearbox_planetary.glb, gearbox_worm.glb, and gearbox_conical.glb, onto the square:
The assets window
- Once the models have been uploaded, they will appear on the dashboard:
Assets listed in the assets window
- Selecting each model will allow you to Copy the link to the asset or Delete it:
Link to the assets and a button to delete it
Glitch saves every key we press, so there is no need for us to manually save the code.
With our basic elements ready, let's write the web page code, starting with the style sheet and then the HTML page.