Creative Web Development: Blender 3D Modeling to Three.js Portfolios

Introduction to Creative Web Development

• Creative web development is a broad field encompassing roles like creative technologist, UI engineer, and 3D artist.
• The core idea is creating something cool that makes others happy, whether through UI design, shaders, 3D art, or coding.
• Skills are transferable across fields, allowing for career flexibility and continuous learning.

Blender Fundamentals for 3D Modeling

• Learn to navigate 3D scenes using middle mouse button for rotation, Shift + middle mouse button for panning, and scrolling for zooming.
• Basic transformations include scaling (S), grabbing (G), and rotating (R), which can be locked to specific axes (X, Y, Z).
• Edit mode (Tab key) allows manipulation of vertices, edges, and faces for detailed modeling.
• Key modeling operations include inset (I) to create smaller faces within existing ones and extrude (E) to pull faces out.
• Loop cuts (Ctrl+R) add geometry for more detailed modeling, and extrude along normals (Alt+E) can shape objects outwards.
• Modifiers, like the mirror modifier, enable procedural modeling by mirroring changes across an axis, speeding up workflow.

Bringing 3D Models to the Web with Three.js

• The course teaches how to export models from Blender and import them into a Three.js application.
• Three.js is a JavaScript library that simplifies working with WebGL, the web standard for 3D graphics.
• Key concepts in Three.js include scenes, cameras, renderers, and meshes.
• A mesh combines geometry (shape) and material (appearance) to create visible objects.
• Raycasting is used to detect when a user clicks on an object in the 3D scene.
• GSAP (GreenSock Animation Platform) is introduced for smooth animations, including character movement and jumping.

Scene Setup and Optimization

• Collision detection is implemented using a collider mesh (an invisible bounding box) and raycasting to prevent the character from passing through walls or obstacles.
• Octrees are used to efficiently manage collisions in complex scenes by dividing space into smaller regions.
• Optimizing models by removing unseen faces and compressing textures (e.g., using WEBP format) is crucial for web performance.
• UV mapping is essential for correctly applying 2D image textures to 3D models.

Interactive Elements and Deployment

• Image textures are applied to planes in Blender to create project billboards that users can interact with.
• Text objects in Blender can be extruded and styled for in-scene signage.
• Models are exported as glTF (.glb) files, an optimized format for web 3D.
• The final project is deployed using GitHub and Vercel, making the 3D portfolio accessible online.
• Event listeners for mouse clicks and keyboard inputs are used to control character movement and trigger interactions.