Hi there, so I'm a newbie for ThreeJS and I've been working on a project to recreate the Monopo-London site lens effect and text hover. I found a similar project on GitHub with a live Demo which was very cool.

Here’s where I’m stuck: I have most of the code working, but when I hover over the visible text to reveal the hidden text, the alignment of "radius" circle that is created in the GLSL shaders not overlapping with the lens circular geometry, the problem lies in the mouse cursor normalization in text shaders. So can somebody please help me aligning it properly.

Here's my codesandbox project

I tried transferring lens mouse x and y coordinates to text shader but that didn't work

Hello everyone. Loving every post here so far. I work for an architecture company that remodels kitchens, bathrooms and fireplaces etc.

I work for their IT but I want to change my direction more towards developing for web. I finished learning Javascript basics and now learning a bit more advanced topics. After this period I will start learning React, Typescript and Nextjs as much as possible. Then I want to learn Nodejs and databases for backend.

I want to build a strong portfolio and an idea that came to my mind is to build a visualizer for my company. The company sells different materials of countertops and I want to make a visualizer where people can select different countertop models and see how it would look. Nothing crazy. But crazy enough for me lol.

When should I start dealing with such a big project? Already feeling overwhelmed just thinking about it, but I really want to be a developer who has the skills to build such a project.

I already have the tour loaded in Three.js, but I encounter difficulties using raycasting due to the differences between Gaussian projections and traditional Three.js geometries, like meshes or simple points. While this might be one of the more common questions in the field, any suggestions on how to approach this problem or alternatives for working directly with the .splat file data would be greatly appreciated.

Hi all,
Threejs journey is having a 50% off Black friday event *today*. Sign up at:

https://threejs-journey.com/gift/bf2024

If you haven't tried the course yet, it's the best $95 I've ever spent on coursework. Now, for *you*, it's half price today!

Hi everyone, I came across this website: https://autostermekek.hu, and I was really impressed by how smooth the transitions between the models are. It’s a subtle but powerful effect that enhances the overall experience. I’m working on a project using Three.js and would love to achieve something similar. Does anyone know how this kind of interpolation is typically implemented? Any tips, tools, or examples would be greatly appreciated!

I am working on an app and I need to record the animation and content rendered on the canvas and convert it to video. Does anyone know the best method to do that?

Can I change the shape of this mesh below the model which is acting as a safezone in the model can I change its shape manually by dragging the side to change its length and breadth is that possible?

I tried to build #Wonderland by using #nextjs, #threejs, #react-three-fiber, #webgl, #glsl, #typescript. So just wanted to #share #shortcase
Happy to get your #feedback

Wonderland

I am adding a bunch of scenes on my personal website. I encountered some little issues and documented it in a blog post. The 4 techniques can be summed up like so:

1. Load scenes only when needed
2. Pause scenes out of view
3. Adjust shader workload for viewport size
4. Let the browser handle clean up

I would love some feedback, especially regarding the last one.

Hello community, I am rendering 2 models in my next app using three js and cannon js and when those models are colliding, the collision is being detected but I want them to act like rigid body and don't let them overlap like real life. How do I do it?

All you peeps looking for this course discounted, now is the time as they're having 50% off for Black Friday. Link: https://threejs-journey.com/

I'm not affiliated in any way, I just really love this course and got it last year on Black Friday too.

I have two scenes, sharing the same camera, works great, when I rotate/zoom one scene the other matches. However if I pan one scene the other one doesn't. So that I can get them to match, if the pan isn't changing the camera what is it doing?

Hi! I'm a 3D artist who got into ThreeJS and R3F and slowly transitioning my freelance career towards web. With traditional 3D, many people make asset packs and plugins and make a living of it. Is there a market for something similar with ThreeJS and R3F for web?

Say I made a customizable space background in ThreeJS and wanted to sell it to web developers.

What would be the best way to package and deliver it? Here are some ideas, and I'm wondering if they are feasible:

1. Make a customizer on my website, which they get access to after buying the product. Here they can customize the space background, and generate embed code with their customization for use on their website.
2. Provide the minified .js file, and provide a guide on how to run the script on their website with their own customisations (might be complicated for an hobby user, as this approach requires writing some code)
3. Is it normal to include the source code in these cases? In case my website goes offline, and I want to make sure my assets are future proofed.

And is there a established marketplace for this, or do people sell it independently on their website?

Anyone have experience doing something similar? Would love your insights

I am working on a project and I am recording the r3f canvas using Media recorder when I am switching tabs the canvas stops rendering the frames and I get a still screen in the part where I have moved to different tab. Please help how to make it keep rendering the scenes.

I am gonna build a Threejs portfolio site for myself. Why does everyone seem to use React or NextJs. These seem overkill for a portfolio site. Am I missing something?

I'm learning shaders in R3F, and while setting up to write GLSL code in VS Code, I found it quite annoying to get everything running especially in TypeScript . To speed up the process and focus on actually learning shaders instead of spending 20 minutes on setup, I created this GitHub repository:

Link: https://github.com/PrakharGupta36/REACT_TS_GLSL

Make sure you also install "WebGL GLSL Editor" extension as well
extenstion ID: raczzalan.webgl-glsl-editor

Hello everyone, I’m currently thinking about which library to use between react three fiber and react three next for a NextJS ThreeJS project ?

I see many projects on this Reddit and no one use react three next with NextJS project and I would like to know why ?

Thanks !

Hi everyone, actually I am rendering 2 models in a plane in three js and adding collision boxes to them but for some reason when those models overlaps, the collision is not being detected. Can anyone please help with that issue.