Giter Club home page Giter Club logo

drill-webgi-tutorial's Introduction

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

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 or on the image to visit the Free course on Youtube.

Getting started

First install the dependencies:

npm install

To run the project in development mode:

npm start

Then navigate to 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:

npm run build

Documentation

About webgi: https://webgi.xyz/

For the latest version and documentation: WebGi Docs.

License

For license and terms of use, see the SDK License.

drill-webgi-tutorial's People

Contributors

ektogamat avatar moshuying avatar repalash avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.