https://github.com/persephonepunch/drillog
Three JS Chair
https://github.com/persephonepunch/drillog
threejs webgi
Last synced: 2 months ago
JSON representation
Three JS Chair
- Host: GitHub
- URL: https://github.com/persephonepunch/drillog
- Owner: persephonepunch
- Created: 2023-02-17T16:08:32.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-02-26T18:05:44.000Z (over 3 years ago)
- Last Synced: 2025-02-23T16:34:05.324Z (over 1 year ago)
- Topics: threejs, webgi
- Language: TypeScript
- Homepage: https://redchair.netlify.app/
- Size: 10.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- 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).