Build A Roof Tool

Hey there. Here is a prototype for building a menu of roofing components which may then be itemized for a contractor. Nothing special, but we are always looking at feedback, collaborators, jobs.

Stay in touch.



Very pretty and professional-looking! One bit of coding feedback: you’ll notice the page consumes a lot of CPU, even when you’re not doing anything and the image stays still. One way to spare the CPU is keep track of a “dirty” boolean. In your animate() function, change your render() call to something like:

if (dirtry) {
    dirty = false;

Then, any time you change things (like animating in response to a menu click or mouse drag) set dirty = true.

Of course that will only spare your CPU when the image isn’t moving. I’m still surprised it renders pretty slowly even though there isn’t a huge polygon count; it’s dropping to 20 or 30 fps on my mid-range MacBook when it should easily be doing 60. You’ll have to experiment with that; a few suggestions:

  • Perhaps don’t set renderer.setClearColor. I think it can be faster to do scene.background = new THREE.Color(0xffffff)
  • Remove the renderer.setPixelRatio call. That makes image quality a little higher on some devices like cell phones, but can slow the CPU down.
  • Perhaps gammaOutput is slow? That’s just a guess.
  • Not sure why you’re setting preserveDrawingBuffer: true – I think you can do away with that

Unfortunately the real solution there is good old trial-and-error, and I don’t have a great way of trying those changes. Good luck!

Thank you so much. Very, very helpful. More soon.

Really nice! My only feedback is to reduce the orbit control sensitivity - the world seems to rotate more than the mouse moves, which gives it an unstable feeling.