Creative Web Development with Three.js and Blender – 3D Portfolio for Beginners

Learn Creative Web Development with Three.js and Blender! This beginner-friendly course will teach you to create an immersive 3D portfolio. You'll begin by diving into Blender to learn the fundamentals of 3D modeling. With your 3D assets complete, you will learn Three.js to bring your 3d models to the web.

Code, Credits, Fixes, Updates & Blender File: https://github.com/andrewwoan/bellas-park

Website: https://www.bellas-park.com/

Course created by @andrewwoan

https://ko-fi.com/andrewwoan

❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp

Chapters:
- 0:00:00 Introduction & project demo
- 0:01:58 Prerequisites
- 0:02:16 What is creative web development?
- 0:06:37 Learning first steps with Blender
- 0:14:05 (optional) Learning exercise - Think like a 3D artist
- 0:15:44 Modeling tree (bad and good ways)
- 0:42:16 Modeling character
- 1:16:33 Starting materials
- 1:29:37 (optional) Other things you can model
- 1:37:37 Modeling ground & level
- 1:41:34 Adding image textures for projects
- 1:51:35 A look at modeling some paths
- 1:53:57 A look at different cameras
- 1:59:03 How I modeled my scene
- 2:09:04 Adding text & signs
- 2:18:52 Preparing to export: checking normals, deleting faces, etc.
- 2:27:47 Export model
- 2:30:43 Viewing exported model with three.js editor
- 2:33:43 Starting coding with VS code
- 2:37:47 Getting started with three.js
- 3:07:07 (optional) Learning exercise - Make your camera move away
- 3:09:35 Quality of life adjustments
- 3:19:50 Loading & preparing our model
- 3:26:45 Updating camera & lighting
- 3:48:33 (optional) Learning exercise - Change a material color with three.js
- 3:51:48 Object interactions with raycaster
- 4:18:22 Character movement with GSAP
- 4:42:46 Collision detection implementation & custom movement
- 4:59:30 How to understand and approach difficult code from three.js examples
- 5:03:45 Collision detection implementation & custom movement
- 5:29:31 A look back on analyzing difficult code
- 5:31:02 Code & scene cleanup
- 5:32:02 Make camera follow player
- 5:35:27 (optional) Learning exercises: loading screen, mobile movement, theme switcher
- 5:37:41 Deployment with GitHub and Vercel
- 5:38:46 Final words and thoughts

🎉 Thanks to our Champion and Sponsor supporters:
👾 Drake Milly
👾 Ulises Moralez
👾 Goddard Tan
👾 David MG
👾 Matthew Springman
👾 Claudio
👾 Oscar R.
👾 jedi-or-sith
👾 Nattira Maneerat
👾 Justin Hual

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news Receive SMS online on sms24.me

TubeReader video aggregator is a website that collects and organizes online videos from the YouTube source. Video aggregation is done for different purposes, and TubeReader take different approaches to achieve their purpose.

Our try to collect videos of high quality or interest for visitors to view; the collection may be made by editors or may be based on community votes.

Another method is to base the collection on those videos most viewed, either at the aggregator site or at various popular video hosting sites.

TubeReader site exists to allow users to collect their own sets of videos, for personal use as well as for browsing and viewing by others; TubeReader can develop online communities around video sharing.

Our site allow users to create a personalized video playlist, for personal use as well as for browsing and viewing by others.

@YouTubeReaderBot allows you to subscribe to Youtube channels.

By using @YouTubeReaderBot Bot you agree with YouTube Terms of Service.

Use the @YouTubeReaderBot telegram bot to be the first to be notified when new videos are released on your favorite channels.

Look for new videos or channels and share them with your friends.

You can start using our bot from this video, subscribe now to Creative Web Development with Three.js and Blender – 3D Portfolio for Beginners

What is YouTube?

YouTube is a free video sharing website that makes it easy to watch online videos. You can even create and upload your own videos to share with others. Originally created in 2005, YouTube is now one of the most popular sites on the Web, with visitors watching around 6 billion hours of video every month.