🚀 Just built my interactive 3D portfolio - and it's designed to stand out! I created an immersive 3D experience using React Three Fiber and Three.js. What I built: ✨ Hero section with animated 3D computer model 💼 About section with interactive tilt cards ⏱️ Animated experience timeline ⚛️ Technology showcase with floating 3D spheres 🎨 Project cards with tilt effects 🌍 Contact form featuring rotating Earth model with starry particle background 📱 Fully responsive across all devices Tech Stack: - React Three Fiber for 3D rendering - Three.js for graphics - Tailwind CSS for styling - Framer Motion for smooth animations - Email.js for contact functionality - React Router for navigation - Vite for blazing-fast builds Key Features: → Realistic lighting with hemisphere, point, and spotlights → Orbit controls for interactive 3D exploration → Performance optimized with Suspense and preload → Higher-order components for clean, reusable code This project pushed me to master 3D scene composition, camera positioning, lighting systems, and performance optimization - all while maintaining professional code quality. The result? A portfolio that doesn't just list my skills - it demonstrates them. 💻 GitHub: https://lnkd.in/dyv3wKEJ 🌐 Live Demo: https://lnkd.in/dRE5BhVT What makes a portfolio memorable to you? Drop your thoughts below! 👇 #WebDevelopment #React #ThreeJS #ReactThreeFiber #3DWeb #Frontend #Portfolio #JavaScript #TailwindCSS #FramerMotion #CreativeCoding

🚀 Just launched my 3D Developer Portfolio! 🎨✨ Built using: 🧩 ThreeJS – for rendering and animating stunning 3D models ⚛️ React Three Fiber – to seamlessly integrate 3D graphics in React 🎨 TailwindCSS – for clean, modern, and responsive styling 💫 Framer Motion – to bring life to every interaction with smooth animations 🔍 In this project, I explored how to: Load and customize 3D models with realistic lighting and camera positioning Create reusable and scalable components using best React practices Implement a working contact form with email sending functionality Optimize performance and responsiveness across all devices 🌐 Check it out live here 👉 https://lnkd.in/gXrrwFmG #React #ThreeJS #ThreeFiber #FramerMotion #TailwindCSS #WebDevelopment #3DPortfolio #FrontendDevelopment #Vercel #ReactJS

Hello everyone! 👋 “What if we could eliminate the RETOPO and UV-IN stages from the pipeline?” So, I decided to test this idea in practice. I built a concept model that ended up as a quite heavy high-poly mesh (~28M polygons), rigged with around 400 bones, including several IK chains. Texturing is fully using procedural nodes and decals, comprised with low-frequency masks. 👉 Concept and mechanics breakdowns: https://lnkd.in/dTWtkjS7 After texturing, the asset was saved to USD and relinked to the bone rig with a simple Python script — keeping everything consistent and editable. 🧠 What I’ve Learned ✅ Pros: -Great for concepting: Quickly validate ideas without retopo. -Fast production: The final quality is quite good, even with a heavy triangle mess from the high polycount. -Solid Blender performance: Even with textures, the viewport stays responsive. -Easy iteration: Modify parts on the fly, re-import for animation, and keep moving fast. -Can be used in production with some limitations, especially under tight deadlines — and it actually performs well for shots production where assets don’t need to be fully optimized for real-time. ⚠️ Cons: -Works best for hard-surface setups — one mesh ↔ one bone; multiple bone influences/weighting aren’t ideal. -Hardware hungry: High RAM & GPU Memo usage (USD textures aren’t memory-efficient). -Not real-time ready (yet): ~28M tris is too much for engines like Unreal without another optimization pass — ironically, the one we’re trying to skip. 💡 What’s Next Next, I’ll be testing this workflow on high-poly organic meshes with multiple bone influences, to see how it handles animation complexity and deformation. Animated version: https://lnkd.in/dxjsQ78Q If this experiment sounds interesting — stay tuned!🎥 #3DArt #Blender3D #ZBrush #GameDev #ProceduralTexturing #CGI #USD #Retopo #Animation #Python #IK #ConceptArt #TechnicalArt #Workflow

𝗝𝘂𝘀𝘁 𝗽𝘂𝘀𝗵𝗲𝗱 𝗺𝘆 𝗹𝗮𝘁𝗲𝘀𝘁 𝟯𝗗 𝗽𝗿𝗼𝗷𝗲𝗰𝘁: an interactive prosthetic demo built from scratch! Took a deep dive with Three.js, Blender, and GLSL for the first time! 🚀 Why? Challenge myself to learn new 3D technologies. 💡 ∙ Downloaded a 3D model & rigged it in Blender (armature + vertex weights). ∙ Built an interactive scene in Three.js (first time using it!). ∙ Added features: zoom/orbit controls + 3 custom material modes (original, wireframe, custom GLSL shader simulating wood). ∙ Implemented inverse kinematics 🦿 using CCDIK in Three.js add-ons. ∙ Learned GLSL for shaders (my XP before was only HLSL/Unity). 𝗧𝗵𝗿𝗲𝗲.𝗷𝘀 and 𝗚𝗟𝗦𝗟 were completely new to me, so I invested a lot of time in research, exploring documentation, and learning from mistakes. This project became a playground for turning curiosity into practical skills. 👉 Check out the project here: https://lnkd.in/eNVAd3gH Initiatives like this help me stay adaptive, a key trait for developers in any stack. If you’re interested in 3D, graphics, or developer workflows, let’s connect! 🤝 #ThreeJS, #Blender3D, #GLSL, #WebGL, #LearningInPublic, #42Wolfsburg, #3DGraphics

Best Practices for Textures? - Asset Creation - Unreal Engine Forums The content discusses various technical aspects related to Unreal Engine 4 (UE4), including materials, shaders, and technical art. Key topics include coding in HLSL and C++, fluid simulation techniques, as well as advanced rendering methods such as Parallax Occlusion Mapping (POM) and Curved Surface Mapping. Find more about us at: http://yoneeka.com

I used to think editing was a step that came after something was made. But I've changed the way I think about this and my approach to it. Now I try to pre-solve edits ahead of time. And build systems to help me do it. Understanding the project's desired destination, I can backtrack up to our current position and make note of all the forks in the road. Each fork represents an opportunity to make a change. Sometimes it's a change of mind/heart (usually there's good reason). Other times there's new information. But the end point is the same - and we must get THERE! Not everything can be anticipated and surprises DO happen. Which is why I try to systemize as much as I can, allowing for changes and revisions to be executed as painless as possible. Thinking ahead and building systems makes it easier to course-correct and ensure you stay on track. #ProblemSolving #Systems #Goals #KineticTypography #AfterEffects #Expressions #JavaScript #Math #Animation #DataVisualization #2D #3D #Design

SVG is one of those web technologies that’s both elegant and, at times, infuriating. In this article, pioneering author and web designer Andy Clarke explains his technique for animating SVG elements that are hidden in the Shadow DOM.

Felix and His Spinning Tetrahedron 🔺✨ Felix built this elegant 3D tetrahedron animation in P5JS — complete with a floating sphere at its center. Every face rotates smoothly in color and symmetry, each line drawn not by hand, but by logic, math, and imagination. He calculated vertex coordinates, rotation angles, and even placed the inner sphere at the geometric center — a blend of geometry, algebra, and art, all inside six seconds of motion. The joy of teaching kids to code isn’t about syntax — it’s about seeing them recreate beauty through structure. When a child learns to make space and symmetry move, they start thinking like both a mathematician and an artist. 🎥 6 seconds of pure geometry by Felix. #P5JS #CreativeCoding #KidsWhoCode #MathematicalBeauty #STEMEducation #FelixTheBuilder #TeachingThroughDesign his P5JS source code: let len = 300; let DE; let DF; let ang; let OF; function setup() {  angleMode(DEGREES);  DE = sqrt(0.75)*len;  DF = len/2/cos(30)  ang = asin(len/2/DF)  OF = tan(ang/2) * (DE-DF)  createCanvas(800, 800, WEBGL);  noStroke();  normalMaterial(); } function draw() {  rotateX(frameCount/2);  rotateY(frameCount);  rotateZ(frameCount/2);  background(220);  sphere(20);  push();  translate(0, -DF, -OF)  fill(0, 255, 0, 150);  beginShape();  vertex(0, 0, 0);  vertex(len/2, DE, 0);  vertex(-len/2, DE, 0);  endShape(CLOSE);  pop();     push();  translate(0, -DF, -OF)  fill(0, 0, 255, 150)  beginShape();  vertex(0, 0, 0);  vertex(len/2, DE, 0);  vertex(0, DF, sqrt(len*len - DF*DF));  endShape(CLOSE);  pop();     push();  translate(0, -DF, -OF)  fill(255, 0, 0, 150)  beginShape();  vertex(0, 0, 0);  vertex(-len/2, DE, 0);  vertex(0, DF, sqrt(len*len - DF*DF));  endShape(CLOSE);  pop();     push();  translate(0, -DF, -OF)  fill(255, 255, 0, 150)  beginShape();  vertex(len/2, DE, 0);  vertex(-len/2, DE, 0);  vertex(0, DF, sqrt(len*len - DF*DF));  endShape(CLOSE);  pop(); }

This weekend I built a comprehensive interaction design framework combining finite state machines, reactive primitives, and composable atomic patterns for #flutter and #dart. Build powerful, type-safe UI interactions and animations from simple building blocks. https://lnkd.in/eZHCstUX Features 🔄 Fine-grained Reactivity: Built on reactive signals, computed values, and effects with automatic dependency tracking 🤖 State Machines: Hierarchical FSMs with event bubbling, guards, and animation integration 🎨 Atomic Primitives: 22+ pre-built motion, enter/exit, and timing animation primitives 🎭 UI Patterns: Ready-to-use state machines for buttons, forms, drawers, modals, and more 🤏 Interactive Patterns: Pull-to-refresh, drag-shuffle lists/grids with physics-based animations 🎯 Type-safe API: Strongly-typed states, events, and contexts throughout 🌊 Flexible Easing: 30+ built-in easing functions plus custom bezier curves ⏱️ Timeline Control: Keyframes, sequences, chaining, and parallel animations ⚡ High Performance: Optimized for high frame rates with minimal overhead 🎪 Composable: Mix and match primitives to create complex effects