Deep
@next_gendev
Followers
218
Following
1K
Media
94
Statuses
1K
Freelance Front-End Dev. I build high-converting, beautiful landing pages for tech startups. | Dev with design sense.
Available for Projects
Joined September 2024
So, I'm pivoting from the 10-day product challenge. Had some honest chats with potential users, and the feedback is clear: they're not interested in the product right now. Tough, but necessary to hear. The next step? Freelancing. I'm going to be fully transparent and share my
3
1
11
Build SOMETHING COOL with Three.JS
In my last thread, we built a spinning cube. Cool. But it's dumb. It just spins forever. Let's make it smart. By the end of this thread, you'll make your 3D cube watch and follow your mouse. 🧵
1
1
4
Build SOMETHING COOL with Three.JS
In my last thread, we built a spinning cube. Cool. But it's dumb. It just spins forever. Let's make it smart. By the end of this thread, you'll make your 3D cube watch and follow your mouse. 🧵
1
1
4
In my last thread, we built a spinning cube. Cool. But it's dumb. It just spins forever. Let's make it smart. By the end of this thread, you'll make your 3D cube watch and follow your mouse. 🧵
1
1
4
And that's it! Your cube is now alive. You learned: 1. How to get normalized mouse coordinates (0 to 1). 2. The magic mesh.lookAt() function. 3. How to use new THREE.Vector3() to set a target. 4. Why you must handle window resizing. If this was useful: - Like & Retweet the
0
0
0
The "Pro-Tip" Bonus: Your cube will look stretched and broken if someone resizes their browser. Always add a "resize" listener. This code tells the camera and renderer to update their settings whenever the window size changes. It keeps your scene looking sharp. // Code
1
0
0
The "How It Works" Breakdown: "What is mouse.x - 0.5?!" mouse.x is 0 (left) to 1 (right). So, mouse.x - 0.5 converts this to -0.5 (left) to +0.5 (right). We're moving a "target" in our 3D world. - Mouse Left -> Target moves to (-0.5, ...) - Mouse Top -> Target moves to (...,
1
0
0
Step 2: The Magic lookAt Line Now for the magic. Go to your animate function. We're going to tell the mesh to lookAt a specific point in 3D space. We'll use our mouse data to create that point. This one line replaces all your old rotation code. // Code function animate() {
1
0
0
Step 1: Track The Mouse First, we need to know where the mouse is. We'll add an event listener that finds the mouse's x and y position and "normalizes" it - converting it from pixels (e.g., 800px) to a simple 0 to 1 range. 0 = Left edge 1 = Right edge // Code const mouse = {
1
0
0
If you followed my last thread, your animate loop probably looks like this: mesh.rotation.y += 0.01; This is "dumb" animation. It doesn't care about the user. We're going to delete that line and replace it with something interactive.
1
0
0
In my last thread, we built a spinning cube. Cool. But it's dumb. It just spins forever. Let's make it smart. By the end of this thread, you'll make your 3D cube watch and follow your mouse. 🧵
1
1
4
I’m a software engineer who has always hated marketing. But now, I have to go through it to survive and learn. I just finished building my MVP. For me, writing code was the easy part. Hitting “deploy” felt like winning. Then reality reminded me: No customers = no product.
Finally. MVP is live ✅ Disappeared for a week to focus completely on building. Back now 💪 Journey isn't over - it's just beginning. Switching to 100% marketing. No more coding until my first client. Follow my journey, sharing everything along the way.
4
1
9
The stack: • Next.js • TypeScript • Tailwind • Motion • Three.js The mission: • Build shit that makes people say "wow" " • Make a million f*ckin dollars Simple as. Drop yours in the comments below.
1
1
4
The stack: • Next.js • TypeScript • Tailwind • Motion • Three.js The mission: • Build shit that makes people say "wow" " • Make a million f*ckin dollars Simple as. Drop yours in the comments below.
1
1
4