-
7 lessons (4 Hours 28 Mins) -
5 downloads
-
Audio: English -
English, Spanish, French, Japanese, Italian, Portuguese
-
course included in the creative pass
The fun process of creating lively interactive 3D scenes for the web
Freelance Creative Developer - Software and Robotics engineering student @ EFREI Paris
full creative pass
Get access to this course and over 100 more for digital designers and creative developers, all for just $12/month
Subscribe now!Creative web-development has always been a fascinating way of building new media art especially with 3D. Within this domain you can have fun mixing 3D modeling, game dev mechanics, web design with a dash of software engineering and data architecture all in one place.
| Category | Course format | Language | Duration | Level |
|---|---|---|---|---|
| 3D, Interaction | Online | English with Subt. | 4 Hours 28 Mins | Intermediate & Advanced |
Requirements
Basic understanding of web development (HTML, CSS, JavaScript). Basic math knowledge (High school level). You'll need a working copy of Blender, Vscode is recommended.
Description
This course will show you how to plan, create and host a 3D online interactive piece from inspiration to showing your production on social media. Only using free and open source software, this masterclass will allow you to discover new doors of creative expressions and a good sense of what, how and where to learn next all by yourself.
Apart from the absolutely fascinating process of actually creating fun immersive 3D experiments, your work can then attract clients, designers or companies that will want your craftsmanship and skills on bigger scale projects.
If you are a designer looking forward to learning more about the asset building process for real time experience, a dev trying to get some more tips and tricks in your arsenal or a tech enthusiast searching for a workflow case study, you should find it all right there !
You will learn
- Plan out an immersive real time 3D web application
- Basic 3D modeling optimized for real time apps
- Three.js bare essentials
- GLSL shaders bare essentials
- Blender bare essentials
- Texture baking
- External 3D model imports in Three.js
- Industry used Blender/Three.js workflow tips and tricks
- Using basic algebra and trigonometry for JavaScript animations
- Using basic algebra and trigonometry for GLSL shader development
- Deploying your app for free on the web
The course includes
- 4h28 minutes of industry used tips and tricks to create glorious real 3D web apps
- Online course documentation, roadmap and additional video information
- Blender and code sources
- Tailor made boiler plates and JS tools
- Valuable links and resources to continue to evolve on your own
- Certificate of completion
Course Content
Explore Every
Course Chapter
-
Lessons
-
Lesson 1A bit of context
-
How has this course come to be ?
-
Let's just have some fun creating stuff
-
-
Lesson 2Side Note
-
Course documentation
-
-
Lesson 3Some fundamentals
-
Blender, the basics
-
WebGL with Three.js, the basics
-
Shaders, shaders, shaders…
-
The fascinating and important process of tool building
-
How I roll about getting more skills
-
-
Lesson 4Before creating
-
Visual inspiration
-
Technical inspiration
-
Plan of action
-
-
Lesson 5Let’s create
-
Dev environment and workflow overview
-
3D modeling and layout
-
From Blender to browser
-
Model manipulation
-
Oh yeah, Shaders
-
Audio Reactors
-
Particles
-
GUI and customization
-
Let's add UI
-
Details, details, details…
-
-
Lesson 6Show ya work
-
Hosting your piece online
-
If you like it, other people might
-
Working with designers
-
-
Lesson 7See ya
-
What's next ?
-
Meet the teacher
Marius Ballot
Fascinated by 3D and interactive contraptions, I developed a deep love for software engineering and especially with this “creative developer” designation. This allowed me to finally become independent in an environment that fits my creative needs. I am currently working towards using those software and algorithmic skills in the robotic-medical industry.
Course Content
Requirements
Basic understanding of web development (HTML, CSS, JavaScript). Basic math knowledge (High school level). You'll need a working copy of Blender, Vscode is recommended.
Description
This course will show you how to plan, create and host a 3D online interactive piece from inspiration to showing your production on social media. Only using free and open source software, this masterclass will allow you to discover new doors of creative expressions and a good sense of what, how and where to learn next all by yourself.
Apart from the absolutely fascinating process of actually creating fun immersive 3D experiments, your work can then attract clients, designers or companies that will want your craftsmanship and skills on bigger scale projects.
If you are a designer looking forward to learning more about the asset building process for real time experience, a dev trying to get some more tips and tricks in your arsenal or a tech enthusiast searching for a workflow case study, you should find it all right there !
You will learn
- Plan out an immersive real time 3D web application
- Basic 3D modeling optimized for real time apps
- Three.js bare essentials
- GLSL shaders bare essentials
- Blender bare essentials
- Texture baking
- External 3D model imports in Three.js
- Industry used Blender/Three.js workflow tips and tricks
- Using basic algebra and trigonometry for JavaScript animations
- Using basic algebra and trigonometry for GLSL shader development
- Deploying your app for free on the web
The course includes
- 4h28 minutes of industry used tips and tricks to create glorious real 3D web apps
- Online course documentation, roadmap and additional video information
- Blender and code sources
- Tailor made boiler plates and JS tools
- Valuable links and resources to continue to evolve on your own
- Certificate of completion
Features
- English
- English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
- Intermediate & Advanced
- Access on mobile and Desktop
- Full time access
- Certificate of completion
-
Marius Ballot
Teacher at awwwards.com
If you have any questions about this course, please contact us
