| sidebar_position | 2 | |||||
|---|---|---|---|---|---|---|
| title | Face Basic Primitives | |||||
| sidebar_label | Face Basic Primitives | |||||
| description | Learn how to create basic face primitives that define surfaces and areas | |||||
| tags |
|
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import BitByBitRenderCanvas from '@site/src/components/BitByBitRenderCanvas';
Faces are two-dimensional surfaces that fill geometric boundaries to create areas in 3D space. While wires define outlines and curves, faces create actual surfaces that can be visualized with materials, analyzed for properties, and used to build 3D solids.
Think of wires as the frame of a window, and faces as the glass that fills the frame. This tutorial demonstrates creating circle, square, rectangle, and ellipse faces using different programming approaches.
circleFacesquareFacerectangleFaceellipseFacecircleFace4000010squareFace3700010rectangleFace37-700010ellipseFace00-901013circleFacesquareFacerectangleFaceellipseFace","version":"0.20.7","type":"blockly"}} title="Creating basic face primitives" /> {\n // Create a circle face\n const circleOptions = new CircleDto();\n circleOptions.radius = 4;\n circleOptions.center = [0, 0, 0] as Point3;\n circleOptions.direction = [0, 1, 0] as Vector3;\n\n const circleFace = await face.createCircleFace(circleOptions);\n\n // Create a square face at a different position\n const squareOptions = new SquareDto();\n squareOptions.size = 3;\n squareOptions.center = [7, 0, 0] as Point3;\n squareOptions.direction = [0, 1, 0] as Vector3;\n\n const squareFace = await face.createSquareFace(squareOptions);\n\n // Create a rectangle face\n const rectangleOptions = new RectangleDto();\n rectangleOptions.width = 3;\n rectangleOptions.length = 7;\n rectangleOptions.center = [-7, 0, 0] as Point3;\n rectangleOptions.direction = [0, 1, 0] as Vector3;\n\n const rectangleFace = await face.createRectangleFace(rectangleOptions);\n\n // Create an ellipse face\n const ellipseOptions = new EllipseDto();\n ellipseOptions.center = [0, 0, -9] as Point3;\n ellipseOptions.direction = [0, 1, 0] as Vector3;\n ellipseOptions.radiusMinor = 1;\n ellipseOptions.radiusMajor = 3;\n\n const ellipseFace = await face.createEllipseFace(ellipseOptions);\n\n // Draw all the created faces\n bitbybit.draw.drawAnyAsync({ entity: circleFace });\n bitbybit.draw.drawAnyAsync({ entity: squareFace });\n bitbybit.draw.drawAnyAsync({ entity: rectangleFace });\n bitbybit.draw.drawAnyAsync({ entity: ellipseFace });\n}\n\n// Execute the function\nstart();","version":"0.20.7","type":"typescript"}} title="Creating basic face primitives" />Each face primitive requires basic parameters: a center point for positioning, a direction vector for orientation (typically [0,1,0] for horizontal faces), and size parameters like radius for circles or width/length for rectangles. The examples create four different face types at separate positions so you can see them clearly.
These face primitives serve as building blocks for more complex modeling operations. You can extrude them into 3D solids, combine them with boolean operations, or use them as surfaces for analysis and visualization. They're commonly used in architectural modeling, manufacturing design, and any application where you need precise geometric surfaces.