Interactive building with editable dimensions?

Hi I’m new to three.js. I’m working to build a 3d building for a client where visitors can design a metal pole building. What is the best geometry to use for It. I’ve thought of each wall and roof face being separate so they can be sized dynamically from a menu. But then I see Three.js can do so much. Are there any suggestions on a better way to approach it?

I would love to hear how folks would approach this cause I’m not sure yet of all the capabilities. Should I extrude a pentagon for the basic structure? Could I then apply different textures to each face? Should I keep every part
seperate: I’m just a nube and would appreciate any suggestions.

There are a couple of approaches here, and which you should use depends on the complexity and shapes of your model:

  1. use the built-in primitives from three.js, such as Box, Cylinder, Sphere etc. In this case be sure to use the BufferGeometry versions: BoxBufferGeometry rather than BoxGeometry since the performance will be better. You can then resize them using scale. This will only work if your model is just made up of very basic shapes obviously.

  2. Similarly to the above, but use shapes and extrude them into the solid shapes you need. See these examples. You can create more complex models this way, but it’s still much more limited than using a modelling program.

  3. Create your own geometries: start with a BufferGeometry and build it yourself. In this case, you are responsible for creating everything, including vertex positions, UVs and normals. This is most complex method and I don’t advise it if you are new to three.js, however, you can create very complex geometries dynamically this way

  4. Use a modelling program to create your structures (blender, 3ds Max, Maya and many others), then export them for use in three.js. You can use many formats for exporting, but OBJ, FBX, GLTF or Collada are generally good choices. Once you have loaded them into three.js you can again change the size using scale.

2 Likes

looee, thank you for your information. Very helpful for this newbie with a ton of questions.

Simple is good so I’ll rule out no. 3.

I only need to resize the width, length and height of a basic 4 walled building structure. I’m thinking use option 2 for walls and roof etc… that will be resized and maybe create all the optional stuff like doors and windows in blender and import since those items will not need to be resized but only moved around.

Now if I can figure out how to attach and restrict doors and windows to walls I’ll have a plan LOL. Thanks again!

1 Like

Hi Dennis,

I am curious how you made out with this project and if you dont mind sharing the link to the finished product.

I am looking for something very similar for a client and trying to decide whether I should learn it or get outside help.

Stephan

Hi Stephan,
This project is still in development on a private server. Contractually I can’t share the code. The folks here on the discourse.threejs.org site are very helpful. Stackoverflow.com also has a lot of information. I’m still no genius at three.js, and I’m still learning, but we have made good progress. Luckily I am developing the app for a friend who understands I’m learning new technology to complete his project. I’d be happy to answer any questions you might have about my journey so far to help you decide.

I will tell you this. I have had to dive into three.js, and get familiar with a lot of 3d design lingo in order to understand the samples and translate it into a usable information for our scenario.

Thanks,
Dennis