1. Platform Overview
This is a 3D geometric drawing platform based on Three.js, supporting the creation, editing, and manipulation of various geometric shapes, suitable for mathematics teaching, geometric demonstrations, and other scenarios. The platform provides an intuitive visual interface, supports the creation and editing of various geometric bodies, and offers rich interactive functions.
2. Interface Layout
- Left Toolbar: Contains editing mode switching and basic geometry tools
- Top Control Bar: Includes import/export, group/ungroup, coordinate system display, and other function buttons
-
Right Panel:
- Property Panel: Used to modify the properties of selected objects
- Transform Controls: Controls object translation and rotation
- Scene List: Displays all objects in the scene
- Main Canvas: 3D view operation area
3. Basic Functions
3.1 Editing Modes
-
Normal Mode:
- Default mode, used for creating and editing single objects
- Objects can be freely dragged and their properties modified
- Supports point creation and movement
-
Line Drawing Mode:
- Used to create line segments between two points
- Click the first point, then moving the mouse will show a preview line
- Click the second point to complete line segment creation
-
Face Grouping Mode:
- Used to create polygonal faces
- At least three points are required to form a face
- Clicked points are connected in sequence to form a face
3.2 Basic Geometries
Simple Geometries:
- Point: Basic primitive, can be used to construct lines and faces
- Quad: A flat rectangle with customizable length and width
- Label: Editable text annotation
3D Geometries:
- Cube: Customizable length, width, and height
- Sphere: Standard sphere
- Cylinder: Customizable top radius, bottom radius, and height
- Cone: Standard cone
- Pyramid: Customizable number of sides, radius, and height
- Torus: Toroidal geometry
- Circle/Sector: Customizable radius, angle, and thickness
4. Detailed Operation Guide
4.1 Geometry Creation
4.1.1 Basic Creation Steps
- Select the desired geometry from the left toolbar
- Drag it to the target position on the canvas
- Depending on the geometry type, a parameter configuration panel may pop up
- Set parameters and click "Generate" to complete creation
4.1.2 Parameter Configuration (Example)
Cube Parameters:
| Parameter |
Description |
Default Value |
| Length |
Length along the X-axis |
2 |
| Width |
Width along the Y-axis |
2 |
| Height |
Height along the Z-axis |
2 |
Cylinder Parameters:
| Parameter |
Description |
Default Value |
| Top Radius |
Radius of the top circular face |
2 |
| Bottom Radius |
Radius of the bottom circular face |
2 |
| Height |
Height of the cylinder |
0.5 |
Sector Parameters:
| Parameter |
Description |
Default Value |
| Radius |
Radius of the sector |
2 |
| Angle |
Angle of the sector (1-360 degrees) |
90 |
| Thickness |
Thickness of the sector |
0.5 |
4.2 Advanced Point, Line, and Face Operations
4.2.1 Point Operations
- Create: Drag the point tool to the canvas in normal mode
- Move: Select and drag freely
- Delete: Select a point and press the Delete key
- Snap: Automatically snaps to other points when moved nearby
4.2.2 Line Operations
- Switch to line drawing mode
- Click two points sequentially to create a line segment
- The line segment will update automatically when an endpoint is moved
- Cannot create duplicate line segments
- Line segments are divided into solid and dashed lines
4.2.3 Face Operations
- Switch to face grouping mode
- Click at least three points sequentially
- The order of points determines how the face is formed
- The face will update automatically when any point is moved
- Cannot create duplicate faces
4.3 Object Editing
4.3.1 Transform Operations
-
Translate Mode:
- Click the translate button in the transform control panel
- Move the object by dragging the controller
- Supports movement along X, Y, and Z axes
-
Rotate Mode:
- Click the rotate button in the transform control panel
- Rotate the object by dragging the controller
- Supports rotation around X, Y, and Z axes
Note: Label objects only support translation, not rotation.
4.3.2 Property Modification
- Color: Use the color picker to change object color
-
Opacity:
- Value range: 0-1
- 0 means fully transparent
- 1 means fully opaque
-
Size:
- Uniformly scales all dimensions
- Value must be greater than 0
4.4 Group Operations Detailed
4.4.1 Multi-selection
- Hold down the Shift key and click multiple objects
- Selected objects will be highlighted
- Click again to deselect
4.4.2 Grouping
- Select multiple objects and click the "Group" button
- Grouped objects will move and rotate as a whole
- Grouped objects will appear as a single entry in the scene list
- Users cannot delete child objects within a group; they must be ungrouped first
4.4.3 Ungrouping
- Select a grouped object
- Click the "Ungroup" button
- Objects within the group will revert to independent status
Note: Imported models cannot be ungrouped after grouping, this is to maintain model integrity.
5. Advanced Functions Detailed
5.1 Model Import/Export
5.1.1 Import Model
- Click the "Import" button
- Select a .gltf or .glb file
- The model will automatically load into the scene
- Model position and orientation can be adjusted
5.1.2 Export Model
- Click the "Export" button
- All visible objects in the scene will be exported
- Export format is .glb
- The file will be automatically downloaded locally
Tip: All object transforms, materials, and label information will be preserved upon export.
5.2 Label System Detailed
5.2.1 Create Label
- Drag the label tool from the toolbar to the canvas
- The label will be created at the mouse position
- Default text is "Label"
5.2.2 Edit Label
- Double-click the label text to enter edit mode
- Enter new text content
- Press Enter or click elsewhere to complete editing
5.2.3 Label Operations
- Can be freely dragged to move position
- Can be grouped with other objects
- Display/hide can be controlled via the scene list
Note: When editing label text, the Delete key will not delete the label object, this is to prevent accidental operations.
5.3 Snapping Function Detailed
The snapping function helps precisely position objects, especially useful when creating accurate geometric structures.
5.3.1 How it Works
- Automatically detects nearby vertices when moving an object
- Automatically snaps when the distance is less than the threshold
- Snapped points will show a green highlight
5.3.2 Applicable Scenarios
- Precise point positioning
- Alignment of line segment endpoints
- Alignment of face vertices
- Precise assembly of geometric bodies
5.4 Formula Plotting & Collapsible Panel
5.4.1 Entry
- The "Formula Drawing" area in the left toolbar supports input of 2D, 3D, and parametric equations to generate corresponding graphics automatically.
- Supports input of y=f(x), z=f(x,y), and parametric equations x=f(u,v), y=f(u,v), z=f(u,v).
5.4.2 Collapsible Panel Interaction
- The "Formula Drawing" area uses a collapsible panel, initially collapsed. Click the title bar to expand/collapse the input area.
- When expanded, you can input formulas and generate graphics; when collapsed, it saves interface space.
- An arrow on the right indicates the current expand/collapse state.
5.4.3 Interaction Details
- When the input box is focused, pressing Delete will not accidentally delete scene objects.
- Supports setting color and opacity for formula-generated graphics, and these are included when exporting.
6. Scene Management
6.1 Scene List
- Displays all objects in the scene
- Objects are arranged in creation order
- Grouped objects will appear as a single entry
- Can quickly select objects by clicking
6.2 Object Control
- Eye icon controls object display/hide
- Clicking an object's name selects the object
- Selected objects will be highlighted in the list
6.3 Coordinate System
- Can display/hide the coordinate system via a button
- Red axis represents the X-axis
- Green axis represents the Y-axis
- Blue axis represents the Z-axis
Best Practice Suggestions:
- When creating complex structures, it is recommended to plan point positions first
- Use the grouping function to manage related objects
- Appropriately use labels to annotate important information
- Supports Ctrl+C/V copy and paste function, which is convenient for handling points and labels
- Reasonably use the snapping function to improve accuracy
- Switch between translate and rotate modes as needed to flexibly adjust object position and orientation
- When moving, rotating, and setting properties, you can use Ctrl+Z to undo the last step
