https://github.com/ektogamat/drill-webgi-tutorial
A template for buildind scrollable landing pages with Gsap, ScrollTrigger and webgi engine in typescript using parcel bundler.
https://github.com/ektogamat/drill-webgi-tutorial
course gsap-scrolltrigger pixotronics threejs threejs-boilerplate threejs-learning
Last synced: over 1 year ago
JSON representation
A template for buildind scrollable landing pages with Gsap, ScrollTrigger and webgi engine in typescript using parcel bundler.
- Host: GitHub
- URL: https://github.com/ektogamat/drill-webgi-tutorial
- Owner: ektogamat
- Created: 2022-09-14T13:05:44.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-02-12T21:10:54.000Z (over 3 years ago)
- Last Synced: 2025-03-10T22:37:52.313Z (over 1 year ago)
- Topics: course, gsap-scrolltrigger, pixotronics, threejs, threejs-boilerplate, threejs-learning
- Language: TypeScript
- Homepage: https://drill-webgi-tutorial.vercel.app/
- Size: 4.18 MB
- Stars: 165
- Watchers: 2
- Forks: 51
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Threejs + GSAP + WEBGi
## 100% Free Course
This is a template used in my fast course "building scrolable pages with ScrollTrigger and Threejs" for a vanilla (no ui-framework) project with webgi engine in typescript using parcel bundler.
⚡️ Live Link: [http://drill-webgi-tutorial.vercel.app](http://drill-webgi-tutorial.vercel.app)
## Course content
On my YouTube channel, you can find a **step by step** video on how to use this source code to build your own pages.
- Chosing a model
- Use WEBGi editor to create images
- Design the page using exported images from WEBGi
- Setup the WEBGi boilerplate into VSCODE
- Change the model
- Create the html and CSS
- Import GSAP and setup the library
- Create the ScrollTrigger animation for the camera
- Final adjustments
[Click here](https://www.youtube.com/watch?v=mpTZbJPYZas) or on the image to visit the Free course on Youtube.
## Getting started
First install the dependencies:
```bash
npm install
```
To run the project in development mode:
```bash
npm start
```
Then navigate to [http://localhost:1234/index.html](http://localhost:1234/index.html) in a web browser to see the default scene in a viewer.
The assets are stored in the `assets` directory.
To build the project for production:
```bash
npm run build
```
## Documentation
About webgi: [https://webgi.xyz/](https://webgi.xyz/)
For the latest version and documentation: [WebGi Docs](https://webgi.xyz/docs/).
## License
For license and terms of use, see the [SDK License](https://webgi.xyz/docs/license).