Build an Interactive 3D Portfolio Website with Three.js

Struggling to stand out from the pack? Learn how to create an interactive, 3D web developer portfolio with your own personalized avatar!

❤️ Like this content? Support me on Patreon: Patreon: DanGreenheck

⭐️ SOURCE CODE - https://github.com/dgreenheck/threejs...
⭐️ LIVE DEMO - https://dgreenheck.github.io/threejs-...

☑️ AVATURN - www.avaturn.me
☑️ READY PLAYER ME - www.readyplayer.me
☑️ THREE.JS - www.threejs.org
☑️ MIXAMO - www.mixamo.com
☑️ USING AVATURN AVATARS WITH MIXAMO - https://docs.avaturn.me/docs/importin...
☑️ BLENDER - www.blender.org (I used Blender v3.5 in this video)

0:00 Intro
0:30 Creating a 3D Avatar
1:39 Finding Animations
3:00 Combining Avatar & Animations in Blender
6:07 Initial Code Setup
8:22 Loading Avatar Model
10:53 Setup Renderer
13:00 Camera & Orbit Controls
14:34 3D Scene Setup
16:04 Render Loop
16:47 Lighting
17:49 Pedestal
19:05 Animating Avatar
21:21 Adding Interactivity
24:50 Fixing Bugs
27:19 Final Product

• #science_technology
• #three_js_tutorial
• #three_js_portfolio
• #three_js
• #three_js_website
• #three_js_portfolio_website
• #web_development
• #web_development_tutorial
• #web_development_portfolio
• #3d_website
• #3d_website_tutorial
• #3d_website_portfolio
• #3js_portfolio_website
• #3d_portfolio_website_tutorial
• #3d_portfolio_website
• #3d_website_portfolio_tutorial
• #how_to_make_a_3d_portfolio_website
• #3d_personal_portfolio_website
• #3d_portfolio_website_html_css_javascript