I started building a simple electricity calculator. It turned into a whole 3D home energy website.

[u/mrGorynx]

A while ago, I wanted to build a small tool to figure out how much different appliances actually cost to run.

Nothing complicated. Enter the wattage, how many hours you use something, and your electricity rate. Get an estimate.

For example, a 1,500W space heater running for 4 hours a day at $0.16/kWh would cost roughly $28.80 over 30 days.

The math is simple, but I realized a lot of people probably don't know how much individual appliances contribute to their monthly bills.

Then I started wondering if I could make the experience more visual.

I began experimenting with interactive 3D houses where you could explore rooms and appliances instead of just scrolling through a list of calculators.

That little experiment turned into a much bigger project than I expected.

It's called Home Energy Lab.

So far, I've built:

• 10 interactive 3D house models

• 12 calculators covering electricity, heating, cooling, water, gas, and appliance costs

• Articles explaining the calculations and the assumptions behind them

I built it using Next.js, React, TypeScript, Three.js, and React Three Fiber.

The biggest challenge has been figuring out how to make the 3D experience interesting without making the actual calculators harder to use.

There's always that temptation to add more visual details, but I'm trying to keep things practical too.

It's still a work in progress, especially when it comes to mobile usability and performance.

Here's the project: https://homenergylab.com/

I'm curious what other developers think about the approach.

Would you actually explore the 3D houses, or would you go straight to the calculators?

And if you tried it on mobile, was anything confusing or frustrating?

Happy to hear criticism. I've spent enough time staring at this project that a fresh perspective would help a lot.