Bifold Door Configurator tool built using vanilla Three.js in SSR React / Next.js app

Hi there,

I wanted to share my first three.js project i’m working on.

It is built using vanilla three.js (no libraries), and is hosted within a server side rendered React Next.js app (so it should load v. fast)…

Demo: https://sad-colden-f2b315.netlify.com/

It’s a configurator tool i’m building for a friend. It also has an animation that was completely hand rolled by closing and opening the door. It can handle any configuration of bifold door subject to constraints (e.g. minimum pane width, max opening size etc.).

I am reasonably happy with the animation. I am not happy with the textures/materials. Any tips or pointers on making this look more “real” would be massively appreciated. Also any other feedback in general is appreciated.

Screen:

Thanks

Luke

4 Likes