Babylon.js: Draw, Extrude, and Modify 3D Shapes

This project is a 3D drawing and manipulation application built using Babylon.js. It allows users to create 2D shapes, extrude them into 3D objects, and interactively move or edit the vertices of those shapes in a 3D environment. The application features an intuitive UI with buttons that allow switching between different interaction modes: drawing, extruding, moving, and vertex editing.

---

Project Overview

The project consists of the following files:

• index.html: The main HTML file for the structure and content of the app.
• app.js: Contains the JavaScript code for implementing the core functionality of the app.
• styles.css: Custom styles for layout, button appearance, and canvas styling.

---

Features

• Draw 2D Polygons: Click on the canvas to define vertices and create a 2D shape.
• Extrude 2D Shapes to 3D: Convert your drawn polygon into a 3D object by extruding it along the Y-axis.
• Move 3D Shapes: Click and drag to move the entire shape within the 3D scene.
• Edit Vertices: Modify individual vertices of the 3D shape for fine-grained control over the geometry.
• Responsive Design: Optimized for both desktop and mobile use.

---

Installation

To get started with this project, follow the steps below:

1. Extract the ZIP File:

   • Extract the contents of the ZIP file to a folder on your local machine.

2. Open the index.html File:

   • Inside the extracted folder, locate and open the index.html file in a web browser of your choice (e.g., Chrome, Firefox, Safari).

3. No Server Setup Required (Plug and Play):

   • This project is designed to be as simple as possible, with one single JavaScript file (app.js) containing all the classes and logic needed for the application.

   • The Babylon.js library is included via a CDN (Content Delivery Network) link in the index.html, so there is no need to download or host the library locally.

   • While I initially attempted to separate the classes into different files to keep the code modular,

   • I encountered potential CORS issues when trying to load multiple JavaScript files from different sources.

   • These issues would require setting up a server to run the application properly.

   • To avoid this complexity, I’ve bundled everything into a single file (app.js), making the project easier to run directly in a browser without any additional server configuration.

   • Important: Since the Babylon.js library is loaded from an online CDN, the app requires an active internet connection to work properly.

   • It will not function offline without access to the network.

   • This simplifies the setup process and avoids potential CORS issues.

4. Start Using the App:

   • The app will load and display the canvas where you can interact with 3D shapes using the Draw, Extrude, Move, and Vertex Edit modes.

Enjoy experimenting with the 3D drawing tools!

---

Usage

1. Open the application in your browser.

2. Choose a Mode:

   • Draw Mode: Click to create vertices of a polygon.
   • Extrude Mode: Convert the drawn 2D shape into a 3D object by extruding it along the Y-axis.
   • Move Mode: Drag the entire 3D shape to a new location.
   • Vertex Edit Mode: Click and drag individual vertices to modify the shape’s geometry.

3. Switch Between Modes using the buttons at the top of the screen.

---

Mode Switching & Active Mode Behavior

In this application, the mode of interaction is controlled by four buttons located at the top of the screen. These buttons represent different functions: Draw, Extrude, Move, and Vertex Edit. Here's how they work:

• Active Mode Indication: When a mode is activated, the corresponding button will turn green, indicating that the mode is currently active.

  • For example, if you click the Draw button, it will turn green, signaling that you're in Draw Mode. Similarly, the Extrude, Move, and Vertex Edit buttons will turn green when those modes are active.

• Switching Modes: You can switch between modes by clicking on the corresponding button. When you click a mode button:

  • The mode becomes active, and the button for that mode turns green.
  • Other mode buttons return to their default state (inactive, not green).

• Deactivating Mode: If you click outside the canvas and buttons (i.e., in an empty area of the screen), the active mode will automatically become inactive and will stop functioning. This means that the selected mode will no longer perform any action until it's reactivated by clicking the appropriate button.

  • Example: If you are in Move Mode and click outside the canvas, Move Mode will become inactive, and you won't be able to move the shape unless you click the Move button again.

• Functional Flow:

  • Draw Mode: You can click on the canvas to create the shape's vertices. Once you're done, click to finish the shape.
  • Extrude Mode: After drawing, activate this mode to convert the 2D shape to a 3D object by extruding it along the Y-axis.
  • Move Mode: After extrusion, click and drag to move the shape around the 3D scene.
  • Vertex Edit Mode: Select this mode to manipulate the individual vertices of the 3D shape for more precise adjustments.

To interact with the 3D scene, ensure that you have selected the correct mode and that the corresponding button is green, showing that the mode is active.

---

Workflow of the Application

Here’s a step-by-step breakdown of how the application works from start to finish:

1. App Initialization

When the page loads, the Babylon.js engine initializes, and the canvas is set up to render a 3D scene. Buttons for different modes (Draw, Extrude, Move, and Vertex Edit) are displayed.

2. Selecting a Mode

The user can select a mode by clicking one of the four buttons:

• Draw Mode: This mode allows users to click on the canvas and define a series of points to form a 2D polygon. This polygon will later be extruded into a 3D object.
• Extrude Mode: After a 2D shape is drawn, the user can switch to Extrude Mode to give the shape depth by extruding it along the Y-axis.
• Move Mode: Once the shape is extruded, users can select Move Mode to drag the entire 3D shape to a new position within the 3D scene.
• Vertex Edit Mode: In this mode, users can directly manipulate individual vertices of the 3D object, allowing fine control over the shape's geometry.

3. Drawing the Shape

In Draw Mode, the user clicks on the canvas to define vertices of the 2D shape. Once enough points are defined, the user clicks to complete the shape, and it is visualized as a 2D polygon in the 3D space.

4. Extruding the Shape

After a 2D shape is drawn, the user presses the Extrude button to convert it into a 3D shape. The shape is extruded along the Y-axis to add depth and make it a 3D object.

5. Moving the Shape

In Move Mode, the user clicks on the extruded 3D shape and drags it around the canvas to reposition it within the 3D scene.

6. Editing the Shape

Vertex Edit Mode allows the user to click on individual vertices of the 3D shape and drag them to new positions, effectively modifying the shape's geometry.

7. Interactive Mode Switching

The ModeManager class allows users to seamlessly switch between the different modes. As each mode is activated, the corresponding tools and features are made available to the user, ensuring an intuitive workflow for drawing, extruding, moving, and editing shapes.

---

Technologies Used

• Babylon.js: A powerful 3D engine for rendering the 3D scene and handling shapes.
• Earcut.js: A polygon triangulation library used for creating 3D meshes from 2D shapes.
• HTML/CSS: For the basic structure and styling of the app.
• JavaScript: For the interactivity, mode handling, and 3D manipulation logic.

---

File Structure

├── index.html # HTML file containing the structure and 3D canvas ├── app.js # JavaScript for core app functionality └── styles.css # Custom CSS for styling the app

---

index.html

The index.html file contains the layout of the application. It includes:

• Meta Tags: Ensures proper character encoding and responsiveness.
• External Libraries: Includes Babylon.js for 3D rendering and Earcut.js for polygon triangulation.
• Canvas: The <canvas> element where the 3D scene is rendered.
• Buttons: Interactive buttons that switch between modes like Draw, Extrude, Move, and Vertex Edit.
• External CSS & JS: Links to the styles.css and app.js files for styling and functionality.

---

styles.css

The styles.css file defines the layout and visual styling for the application. The CSS rules include:

• Body: Uses a gradient background and sets up a flexible layout to center the content.
• Button Styles: Buttons are styled with a blue background, rounded corners, and smooth transition effects for hover and active states.
• Canvas Styling: The canvas is set to fill most of the screen, with a border and shadow for visual appeal.

---

app.js

The app.js file contains the JavaScript logic for creating and manipulating 3D shapes. It is structured into several classes that manage the different modes and interactions.

Main Classes and Their Responsibilities:

1. ModeManager

The ModeManager class manages the application's current mode (Draw, Extrude, Move, Vertex Edit). It listens for button clicks and switches between different modes of interaction.

• Key Methods:
  • initialize(): Sets up event listeners for the mode buttons.
  • setMode(mode): Switches between active modes.

2. ShapeDrawer

The ShapeDrawer class handles the drawing of 2D shapes on the canvas. Users can click on the canvas to define points, which will form the boundary of the shape.

• Key Methods:
  • initiateDrawMode(): Initializes the drawing process and handles mouse events for adding points.
  • drawShape(points): Finalizes the shape after defining the points.

3. ShapeExtruder

The ShapeExtruder class converts the 2D shape into a 3D object by extruding it along the Y-axis, creating height from the 2D polygon.

• Key Methods:
  • extrudeShape(): Takes the 2D shape and extrudes it to create a 3D object.

4. ShapeMover

The ShapeMover class allows users to move the extruded 3D shape in the scene. It enables dragging and updating the position of the object within the 3D space.

• Key Methods:
  • initiateMoveMode(): Activates the move mode, allowing shapes to be dragged.
  • setMoveMode(isActive): Toggles the move mode.
  • _runMoveMode(shapesToExtrude): Moves the selected shape based on mouse movement.

5. VertexEditor

The VertexEditor class allows users to interactively modify the vertices of the extruded shape. This mode enables users to drag individual points (vertices) of the shape to adjust its geometry.

• Key Methods:
  • initiateVertexEditMode(): Activates the vertex edit mode.
  • setVertexEditMode(isActive): Enables or disables vertex editing.
  • _runVertexEditMode(): Handles the vertex dragging and updating.

---