Welcome to 3D House Layout Maker

Usage Guide

Follow these steps to effectively use the 3D House Layout Maker:

1. Home

This is the starting point of the application. Here, you can navigate to different sections of the app using the menu on the left.

2. 2D Grid Editor

In this section, you can create your room layout:

  • Set Grid Size: Choose a grid size (5x5, 10x10, 15x15, or 20x20) to define the dimensions of your room.
  • Select Active Item: Choose from various items (Empty, Couch, Desk, Shelf, Wall) to place on the grid by clicking the corresponding button.
  • Click to Place: Click on the grid cells to place the selected item. The grid will visually update to reflect your choices.
  • Roof Editor: Switch to the roof editor to add items like Fans or Lights. Click on the roof grid to place these items.
  • Save Grid: Once you are satisfied with your layout, click the "Save Grid" button to store your design for later use.

3. 3D Simulator

Visualize your layout in 3D:

  • View Your Design: Click on "3D Simulator" to see your room in a 3D environment.
  • Character Movement: Use the W, A, S, D keys to move around the room and explore your layout.
  • Rotate View: Use the arrow keys to rotate your view and get a better perspective of your design.
  • Update Layout Settings: Adjust settings like grid size, wall height, and character dimensions in the "Layout Settings" section.
  • Export Scene: Click the "Export 3D Scene" button to download your design as a glTF file for sharing or further use.

4. Layout Settings

Customize your layout parameters:

  • Adjust the grid size, cell size, wall height, and thickness to fit your design needs.
  • Set character dimensions to ensure they fit within your layout.
  • Click "Update Layout" to apply any changes you make.

5. Character Settings

Modify the character's dimensions to match your design:

  • Input the desired height, width, and depth for the character.
  • Click "Update Character" to see the changes reflected in the 3D view.

Tips:

  • Experiment with different layouts and items to find the best design for your space.
  • Use the "Save Grid" feature frequently to avoid losing your progress.
  • Check the console for any error messages if items do not appear as expected.

Happy designing!