### Initialize Project and Install mxcad3d

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/zh/1.开始/2.快速入门.md

Commands to initialize a new Node.js project using npm, install Vite as a development dependency, and install the latest version of the mxcad3d package.

```sh
npm init -y
npm install vite -D
npm install mxcad3d@latest
```

--------------------------------

### Install MXCAD 3D with Vite

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/README_ZH.md

Installs Vite as a development dependency and installs the mxcad3d package using npm.

```sh
npm init -y
npm install vite -D
npm install mxcad3d
```

--------------------------------

### Run Vite Development Server

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/README_ZH.md

Starts the Vite development server to serve the project, allowing for live preview and hot module replacement.

```sh
npx vite
```

--------------------------------

### Run Vite Development Server

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/zh/1.开始/2.快速入门.md

Command to start the Vite development server, which will build and serve the project, allowing you to view the 3D application in a browser.

```sh
npx vite
```

--------------------------------

### Install mxcad3d with Vite

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/README.md

Installs Vite as a development dependency and installs the mxcad3d library using npm. This sets up the project for using mxcad3d with a Vite build process.

```sh
npm init -y
npm install vite -D
npm install mxcad3d
```

--------------------------------

### Verify Node.js, npm, and npx Installation

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/en/1.开始/11.开发环境准备.md

After installing Node.js, verify the installation by checking the versions of Node.js, npm, and npx in the command prompt. This confirms that the necessary tools are available for project development.

```bash
node -v
npm -v
npx -v
```

--------------------------------

### Verify Node.js, npm, and npx Installation

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/zh/1.开始/11.开发环境准备.md

After installing Node.js, verify the installation by checking the versions of Node.js, npm, and npx in the command line. This confirms that the package manager and its associated tools are correctly set up for project development.

```bash
node -v
npm -v
npx -v
```

--------------------------------

### Vue Component for MXCAD 3D Initialization

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/zh/1.开始/2.快速入门.md

A Vue 3 component using the Composition API to initialize MxCAD3DObject within the onMounted hook, ensuring the DOM is ready. It includes canvas setup and event handling for initialization.

```tsx
import { MxCAD3DObject } from "mxcad3d"
import { defineComponent,onMounted } from "vue"
export default defineComponent({
  setup() {

    onMounted(async () => {
      // 确保DOM已经渲染完毕
      const mxcad3d = new MxCAD3DObject();
      
      await mxcad3d.create({
        canvas: '#myCanvas',
        locateFile: (fileName) => self.location.origin + `/mxcad_docs3d/wasm/3d/${fileName}`,
      });
     
        
      mxcad3d.on('init', () => {
        console.log('初始化完成');
      });
    });

    return () => (
      <div style={{ height: 600, overflow: 'hidden' }}>
        <canvas id="myCanvas" style={{ height: 300 }} />
      </div>
    );
  },
});
```

--------------------------------

### TypeScript Configuration for MXCAD 3D

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/zh/1.开始/2.快速入门.md

A tsconfig.json file to configure the TypeScript compiler, specifying module system and type resolution paths.

```json
{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "typeRoots": ["./node_modules/@types", "./typings"]
  }
}
```

--------------------------------

### Run Vite Development Server

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/en/1.开始/2.快速入门.md

Command to start the Vite development server, which will build and serve the project, allowing you to view the 3D content in a browser.

```sh
npx vite
```

--------------------------------

### Basic HTML Structure for MXCAD 3D

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/zh/1.开始/2.快速入门.md

An HTML file to set up the canvas element for rendering the 3D view and to include the main TypeScript file as a module.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vite use mxcad</title>
</head>
<body>
    <div style="height: 800px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
    <script type="module" src="./src/index.ts"></script>
</body>
</html>
```

--------------------------------

### Initialize Project and Install mxcad

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/en/1.开始/2.快速入门.md

Commands to initialize a new Node.js project using npm, install Vite as a development dependency, and install the latest version of the mxcad package.

```sh
npm init -y
npm install vite -D
npm install mxcad@latest
```

--------------------------------

### TypeScript Configuration for MXCAD 3D

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/README_ZH.md

Configures TypeScript compiler options for a Vite project, specifying module resolution and type roots for MXCAD 3D development.

```json
{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "typeRoots": ["./node_modules/@types", "./typings"]
  }
}
```

--------------------------------

### Run Vite Development Server

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/README.md

Starts the Vite development server using npx. This command builds the project and serves it locally, allowing for live reloading during development.

```sh
npx vite
```

--------------------------------

### HTML Structure for MXCAD 3D

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/README_ZH.md

Sets up a basic HTML file with a canvas element for rendering 3D graphics and a button to trigger drawing actions. It includes necessary meta tags and links the main TypeScript file.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vite use mxcad</title>
</head>
<body>
    <div style="height: 800px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
    <button id="drawBox">Draw Box</button>
    <script type="module" src="./src/index.ts"></script>
</body>
</html>
```

--------------------------------

### Initialize MXCAD 3D Object in TypeScript

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/zh/1.开始/2.快速入门.md

Basic TypeScript code to import and initialize the MxCAD3DObject, set up the canvas, locate WASM files, and log a message upon successful initialization.

```typescript
import { MxCAD3DObject } from "mxcad3d"

// 创建mxcad3d对象
const mxcad3d = new MxCAD3DObject()

// 初始化mxcad3d对象
mxcad3d.create({
    // canvas元素的css选择器字符串（示例中是id选择器），或canvas元素对象
    canvas: "#myCanvas",
    // 获取加载wasm相关文件(wasm/js/worker.js)路径位置
    locateFile: (fileName)=> new URL(`/node_modules/mxcad3d/dist/wasm/3d/${fileName}`, import.meta.url).href,
})

// 初始化完成
mxcad3d.on("init", ()=>{
    console.log("初始化完成");
});
```

--------------------------------

### TypeScript Example for Drawing a Box with mxcad3d

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/README.md

Demonstrates how to initialize mxcad3d, load WASM files, and draw a 3D box with specific color and material properties. It includes event handling for a button click to trigger the drawing function.

```ts
import { MdGe, Mx3dGeColor, Mx3dGeMaterial, Mx3dMkBox, MxCAD3DObject } from "mxcad3d"

// Create MxCAD3D object
const mxcad3d = new MxCAD3DObject()

// Initialize MxCAD3D object
mxcad3d.create({
    // CSS selector string for the canvas element (ID selector in the example) or the canvas element object itself
    canvas: "#myCanvas",
    // Get the path to load the WASM file
    locateFile: (fileName) => new URL(`/node_modules/mxcad3d/dist/wasm/3d/${fileName}`, import.meta.url).href,
})

// After initialization is completed
mxcad3d.on("init", () => {
    console.log("Initialization completed");
});

function drawBox() {
    const doc = mxcad3d.getDocument();
    // Prepare shape label
    const boxLabel = doc.addShapeLabel();
    // Prepare color
    const redColor = new Mx3dGeColor(MdGe.MxNameOfColor.Color_NOC_PINK);
    // Prepare material
    const material = new Mx3dGeMaterial(MdGe.MxNameOfMaterial.Material_NOM_Gold);
    material.SetMaterialType(MdGe.MxTypeOfMaterial.Material_TOM_PHYSIC);
    // Generate cube shape
    const boxMaker = new Mx3dMkBox(50, 30, 20);
    const boxShape = boxMaker.Shape();
    // Add shape and color to the document
    boxLabel.setShape(boxShape);
    boxLabel.setColor(redColor);
    boxLabel.setMaterial(material);
    // Update view
    mxcad3d.update();
}

document.getElementById("drawBox").addEventListener("click", drawBox);
```

--------------------------------

### Initialize and Draw Box with MXCAD 3D

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/README_ZH.md

Initializes the MXCAD 3D object, sets up the canvas, and defines a function to draw a box with specified dimensions, color, and material. It also includes an event listener to trigger the drawing on button click.

```ts
import { MdGe, Mx3dGeColor, Mx3dGeMaterial, Mx3dMkBox, MxCAD3DObject } from "mxcad3d"

// 创建mxcad3d对象
const mxcad3d = new MxCAD3DObject()

// 初始化mxcad3d对象
mxcad3d.create({
    // canvas元素的css选择器字符串（示例中是id选择器），或canvas元素对象
    canvas: "#myCanvas",
    // 获取加载wasm路径位置
    locateFile: (fileName) => new URL(`/node_modules/mxcad3d/dist/wasm/3d/${fileName}`, import.meta.url).href,
})

// 初始化完成
mxcad3d.on("init", () => {
    console.log("初始化完成");
});

function drawBox() {
    const doc = mxcad3d.getDocument();
    // 准备标签
    const boxLabel = doc.addShapeLabel();
    // 准备颜色
    const redColor = new Mx3dGeColor(MdGe.MxNameOfColor.Color_NOC_PINK);
    // 准备材质
    const material = new Mx3dGeMaterial(MdGe.MxNameOfMaterial.Material_NOM_Gold);
    material.SetMaterialType(MdGe.MxTypeOfMaterial.Material_TOM_PHYSIC);
    // 生成立方体形状
    const boxMaker = new Mx3dMkBox(50, 30, 20);
    const boxShape = boxMaker.Shape();
    // 形状以及颜色添加至文档
    boxLabel.setShape(boxShape);
    boxLabel.setColor(redColor);
    boxLabel.setMaterial(material);
    // 更新视图
    mxcad3d.update();
}

document.getElementById("drawBox").addEventListener("click", drawBox);

```

--------------------------------

### Draw Cone in MXCAD3D

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/zh/5.几何绘面/1.几何绘面.md

Provides an example of creating a cone with a coordinate system, two radii, height, and an angle. The generated cone face is added to the document for visualization.

```typescript
const csysr = new Mx3dGeCSYSR();
const coneMaker = new Mx3dMkCone(csysr, 15, 5, 50, Math.PI * 3 / 2);
const coneFace = coneMaker.Face();
addShapeToDoc(coneFace);
mxcad3d.update();
```

--------------------------------

### Get Bezier Curve Start Point

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dGeomBezierCurve.md

Retrieves the starting point of the Bezier curve.

```typescript
StartPoint(): Mx3dGePoint
```

--------------------------------

### Get Curve Start Point

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dGeomBezierCurve.md

Retrieves the starting point of the Bezier curve as an Mx3dGePoint object.

```javascript
StartPoint(): Mx3dGePoint
```

--------------------------------

### StartPoint Mx3dGeomBSplineCurve

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dGeomBSplineCurve.md

Gets the starting point of the curve. This method returns an Mx3dGePoint object representing the start of the curve.

```TypeScript
StartPoint(): Mx3dGePoint
```

--------------------------------

### Get Mx3dGeLine First Parameter

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dGeLine.md

Returns the starting parameter value of the line.

```javascript
FirstParameter(): number
```

--------------------------------

### Get Directrix (Directrix)

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dGeomParabola.md

Retrieves the guide line of the parabola as an Mx3dGeAxis object.

```typescript
Directrix(): Mx3dGeAxis
```

--------------------------------

### Initialize MxCAD3D Object

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/en/1.开始/2.快速入门.md

Basic TypeScript code to create an instance of MxCAD3DObject, initialize it with a canvas element and file location, and log a message upon successful initialization.

```typescript
import { MxCAD3DObject } from "mxcad3d"

// Create MxCAD3D object
const mxcad3d = new MxCAD3DObject()

// Initialize MxCAD3D object
mxcad3d.create({
    // CSS selector string of the canvas element (id selector in the example), or the canvas element object
    canvas: "#myCanvas",
    // Get the path location of the wasm-related files (wasm/js/worker.js)
    locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/3d/${fileName}`, import.meta.url).href,
})

// Initialization completed
mxcad3d.on("init", ()=>{
    console.log("Initialization completed");
});
```

--------------------------------

### Get Line Position

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dGeomLine.md

Retrieves the position (start point) of the line. This method is inherited from Mx3dGeomCurve.

```typescript
Position(): Mx3dGePoint
```

--------------------------------

### Get Translated Shape by Two Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dShapeObject.md

Returns a new Mx3dShapeObject translated from a starting point to an ending point.

```javascript
TranslatedBy2Points(theP1: Mx3dGePoint, theP2: Mx3dGePoint): Mx3dShapeObject
```

--------------------------------

### Get First Parameter

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dGeomBSplineCurve.md

Returns the first parameter value of the curve, typically used to identify the starting point.

```typescript
FirstParameter(): number
```

--------------------------------

### Initialize View

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/MxCAD3DObject.md

Initializes the view, likely performing setup operations.

```typescript
/**
 * Initializes the view.
 * @returns void
 */
init(): void;
```

--------------------------------

### Get Translated Face by Two Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dShapeFace.md

Returns a new face shape translated from a starting point to an ending point.

```typescript
TranslatedBy2Points(startPoint: Mx3dGePoint, endPoint: Mx3dGePoint): Mx3dShapeObject
```

--------------------------------

### Get Second Guideline

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dGeomEllipse.md

Retrieves the second guide line (Directrix2) of the geometric object. Returns an alignment object.

```TypeScript
Directrix2(): Mx3dGeAxis
```

--------------------------------

### TypeScript Configuration for mxcad

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/en/1.开始/2.快速入门.md

A tsconfig.json file configuring TypeScript compilation options, including module resolution and type roots, suitable for use with Vite and mxcad.

```json
{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "typeRoots": ["./node_modules/@types", "./typings"]
  }
}
```

--------------------------------

### Get First Guideline

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dGeomEllipse.md

Retrieves the first guide line (Directrix1) of the geometric object. Returns an alignment object.

```TypeScript
Directrix1(): Mx3dGeAxis
```

--------------------------------

### Basic HTML Structure for mxcad

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/en/1.开始/2.快速入门.md

An HTML file that sets up a canvas element for rendering 3D content and includes a script tag to load the main TypeScript file.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vite use mxcad</title>
</head>
<body>
    <div style="height: 800px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
    <script type="module" src="./src/index.ts"></script>
</body>
</html>
```

--------------------------------

### Get Translated Mx3dShapeCompound by Two Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dShapeCompound.md

Returns a new Mx3dShapeCompound object translated from a start point to an end point.

```TypeScript
TranslatedBy2Points(startPoint: Mx3dGePoint, endPoint: Mx3dGePoint): Mx3dShapeObject
```

--------------------------------

### Get First Parameter - TypeScript

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dGeomHyperbola.md

Retrieves the starting parameter value of the hyperbola's curve definition. Returns a number.

```TypeScript
FirstParameter(): number
```

--------------------------------

### GitHub Codespaces: Instant Dev Environments

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/dist/LICENSE/AdobeFontsLICENSE.txt

This snippet describes GitHub Codespaces, a feature that provides instant, cloud-based development environments. It simplifies setup and enhances developer productivity.

```html
<li>
  <a class="HeaderMenu-dropdown-link lh-condensed d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center pb-lg-3" data-analytics-event="{&quot;category&quot;:&quot;Header dropdown (logged out), Product&quot;,&quot;action&quot;:&quot;click to go to Codespaces&quot;,&quot;label&quot;:&quot;ref_cta:Codespaces;&quot;}" href="/features/codespaces">
      <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-codespaces color-fg-subtle mr-3">
    <path d="M3.5 3.75C3.5 2.784 4.284 2 5.25 2h13.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 18.75 13H5.25a1.75 1.75 0 0 1-1.75-1.75Zm-2 12c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v4a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75ZM5.25 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h13.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Zm-2 12a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h17.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25Z"></path><path d="M10 17.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path>
</svg>
      <div>
        <div class="color-fg-default h4">Codespaces</div>
        Instant dev environments
      </div>

    
</a></li>
```

--------------------------------

### Initialize MxCAD3DObject

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/MxCAD3DObject.md

Performs the initial setup and configuration for the MxCAD3DObject. This method should be called after creating an instance.

```javascript
init(): void
```

--------------------------------

### Get Curve First Parameter

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dGeomBSplineCurve.md

Returns the first parameter value of the curve, typically used to determine the starting point.

```TypeScript
FirstParameter(): number
```

--------------------------------

### Get First Parameter of Line

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dGeLine.md

Returns the starting parameter value of the Mx3dGeLine. This defines the beginning of the line's parametric domain.

```typescript
FirstParameter(): number
```

--------------------------------

### Create Mx3dShapeVertex

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dShapeVertex.md

Initializes a new instance of the Mx3dShapeVertex class. This constructor can optionally accept a configuration object.

```javascript
new Mx3dShapeVertex(p?)
```

--------------------------------

### Get First Directrix - TypeScript

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dGeomHyperbola.md

Retrieves the first guide line (directrix) of the hyperbola. Returns an Mx3dGeAxis object representing the alignment.

```TypeScript
Directrix1(): Mx3dGeAxis
```

--------------------------------

### Get First Parameter of Line

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dGeomLine.md

Retrieves the first parameter of the line. This method returns a number representing the starting parameter of the line segment.

```typescript
FirstParameter(): number
```

--------------------------------

### Mx3dShapeWire Constructor

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dShapeWire.md

Initializes a new instance of the Mx3dShapeWire class. It can optionally accept a configuration object.

```javascript
new Mx3dShapeWire(p?)
```

--------------------------------

### Get Translated Ellipse by 2 Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dGeEllipse.md

Returns a new ellipse that is the result of translating the original ellipse from a starting point to an ending point.

```TypeScript
TranslatedBy2Points(theP1: Mx3dGePoint, theP2: Mx3dGePoint): Mx3dGeEllipse
```

--------------------------------

### Instantiate MxCAD3DObject

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/en/1.开始/3.视图文档基础.md

Demonstrates how to create a new instance of the MxCAD3DObject, which represents a view document object.

```typescript
const mxcad3d = new MxCAD3DObject(); // Instantiate
```

--------------------------------

### Get Translated Mx3dShapeVertex by 2 Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dShapeVertex.md

Returns a new shape object translated from a starting point to an ending point. The original object remains unchanged.

```javascript
TranslatedBy2Points()
```

--------------------------------

### 创建圆锥体

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/zh/2.基本图形/3.圆锥体.md

使用 Mx3dMkCone 对象创建一个圆锥体。需要提供右手坐标系、底部半径、顶部半径、高度以及可选的角度参数。创建的圆锥体可以添加到文档标签中并更新显示。

```typescript
const doc = mxcad3d.getDocument();
const csysr = new Mx3dGeCSYSR();
csysr.SetLocation(5, 5, 5);
const coneMaker = new Mx3dMkCone(csysr, 15, 5, 50, Math.PI * 3 / 2);
const coneShape = coneMaker.Shape();
const coneLabel = doc.addShapeLabel();
coneLabel.setShape(coneShape);
mxcad3d.update();
```

--------------------------------

### Get Translated Shape by 2 Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dShapeObject.md

Returns a new shape object that has been translated from a starting point to an endpoint. The original shape remains unchanged.

```typescript
TranslatedBy2Points(point1: Mx3dGePoint, point2: Mx3dGePoint): Mx3dShapeObject
```

--------------------------------

### GitHub Sign Up Button

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/dist/LICENSE/AdobeFontsLICENSE.txt

An HTML anchor tag styled as a button for user sign-up. It includes data attributes for analytics and event tracking, linking to the GitHub sign-up page.

```HTML
<a href="/signup?ref_cta=Sign+up&amp;ref_loc=header+logged+out&amp;ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E%2Fblob%2Fshow&amp;source=header-repo&amp;source_repo=adobe-fonts%2Fsource-han-serif"
              class="HeaderMenu-link HeaderMenu-link--sign-up flex-shrink-0 d-none d-lg-inline-block no-underline border color-border-default rounded px-2 py-1"
              data-hydro-click="{&quot;event_type&quot;:&quot;authentication.click&quot;,&quot;payload&quot;:{&quot;location_in_page&quot;:&quot;site header menu&quot;,&quot;repository_id&quot;:null,&quot;auth_type&quot;:&quot;SIGN_UP&quot;,&quot;originating_url&quot;:&quot;https://github.com/adobe-fonts/source-han-serif/blob/release/LICENSE.txt&quot;,&quot;user_id&quot;:null}}" data-hydro-click-hmac="96dee01e945d9fe1d5f3465957bc66c1dedd6607312ff70c7c6513e097d35a65"
              data-analytics-event="{&quot;category&quot;:&quot;Sign up&quot;,&quot;action&quot;:&quot;click to sign up for account&quot;,&quot;label&quot;:&quot;ref_page:/&lt;user-name&gt;/&lt;repo-name&gt;/blob/show;ref_cta:Sign up;ref_loc:header logged out&quot;}"
            >
              Sign up
            </a>
```

--------------------------------

### Mx3dAlgoFillet2d Init Method

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dAlgoFillet2d.md

Initializes the Mx3dAlgoFillet2d algorithm. It can be initialized with either a wire and a plane, or two edges and a plane.

```C++
void Init(const Mx3dShapeWire& theWire, const Mx3dGePlane& thePlane)
```

```C++
void Init(const Mx3dShapeEdge& theEdge1, const Mx3dShapeEdge& theEdge2, const Mx3dGePlane& thePlane)
```

--------------------------------

### Get Translated Shape by Two Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dShapeObject.md

Returns a new shape object that is translated from a start point to an end point. The original object is not modified.

```TypeScript
TranslatedBy2Points(startPoint: Mx3dGePoint, endPoint: Mx3dGePoint): Mx3dShapeObject
```

--------------------------------

### Mx3dMkWedge Constructor with Axes, Dimensions, and Boundaries

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dMkWedge.md

Initializes an Mx3dMkWedge with a specified coordinate system (Axes), dimensions (dx, dy, dz), and boundary values (xmin, zmin, xmax, zmax). This offers the most comprehensive control over wedge creation.

```TypeScript
new Mx3dMkWedge(Axes: Mx3dGeCSYSR, dx: number, dy: number, dz: number, xmin: number, zmin: number, xmax: number, zmax: number)
```

--------------------------------

### Get Translated Mx3dGeomSurface by Two Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dGeomSurface.md

Returns a new geometric object translated from a starting point to an ending point. The original object is not affected.

```typescript
TranslatedBy2Points(P1: Mx3dGePoint, P2: Mx3dGePoint): Mx3dGeomSurface;
```

--------------------------------

### Get Translated Mx3dGeomBoundedCurve by 2 Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dGeomBoundedCurve.md

Returns a new geometric object that is the result of translating the original object from a starting point to an ending point.

```typescript
TranslatedBy2Points(P1: Mx3dGePoint, P2: Mx3dGePoint): Mx3dGeomBoundedCurve
```

--------------------------------

### GitHub Packages: Host and Manage Packages

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/dist/LICENSE/AdobeFontsLICENSE.txt

This snippet highlights the GitHub Packages feature, enabling users to host and manage their software packages directly within GitHub. It supports various package formats.

```html
<li>
  <a class="HeaderMenu-dropdown-link lh-condensed d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center pb-lg-3" data-analytics-event="{&quot;category&quot;:&quot;Header dropdown (logged out), Product&quot;,&quot;action&quot;:&quot;click to go to Packages&quot;,&quot;label&quot;:&quot;ref_cta:Packages;&quot;}" href="/features/packages">
      <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-package color-fg-subtle mr-3">
    <path d="M12.876.64V.639l8.25 4.763c.541.313.875.89.875 1.515v9.525a1.75 1.75 0 0 1-.875 1.516l-8.25 4.762a1.748 1.748 0 0 1-1.75 0l-8.25-4.763a1.75 1.75 0 0 1-.875-1.515V6.917c0-.625.334-1.202.875-1.515L11.126.64a1.748 1.748 0 0 1 1.75 0Zm-1 1.298L4.251 6.34l7.75 4.474 7.75-4.474-7.625-4.402a.248.248 0 0 0-.25 0Zm.875 19.123 7.625-4.402a.25.25 0 0 0 .125-.216V7.639l-7.75 4.474ZM3.501 7.64v8.803c0 .09.048.172.125.216l7.625 4.402v-8.947Z"></path>
</svg>
      <div>
        <div class="color-fg-default h4">Packages</div>
        Host and manage packages
      </div>

    
</a></li>
```

--------------------------------

### GitHub Code Search Query Input

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/dist/LICENSE/AdobeFontsLICENSE.txt

An HTML input field for entering GitHub Code Search queries. It includes a placeholder suggesting syntax like 'repo:mona/a OR repo:mona/b) AND lang:python' and a link to further documentation.

```HTML
<input
              type="text"
              name="custom_scope_query"
              id="custom_scope_query"
              data-target="custom-scopes.customScopesQueryField"
              class="form-control"
              autocomplete="off"
              placeholder="(repo:mona/a OR repo:mona/b) AND lang:python"
              required
              maxlength="500">
          <p class="text-small color-fg-muted">
            To see all available qualifiers, see our <a class="Link--inTextBlock" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax">documentation</a>.
          </p>
```

--------------------------------

### Get Mx3dGeLine Boundary Edge

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dGeLine.md

Retrieves the boundary edge of the line within a specified parameter interval. The interval is defined by a starting and ending parameter.

```javascript
Edge(p1, p2): Mx3dShapeEdge
```

--------------------------------

### Get Translated Mx3dShapeWire by 2 Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dShapeWire.md

Returns a new Mx3dShapeWire object translated from a start point to an end point. The original object is not modified.

```typescript
TranslatedBy2Points(...): Mx3dShapeObject
```

--------------------------------

### Initialize Mx3dMkLoft Constructor

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dMkLoft.md

Initializes a new Mx3dMkLoft object. This constructor allows setting parameters for solid creation, ruled surfaces, and plane resolution.

```TypeScript
new Mx3dMkLoft(isSolid?: Boolean, ruled?: Boolean, pres3d?: Number)
```

--------------------------------

### Get Translated Shape by Two Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dShapeEdge.md

Returns a new shape object that is the result of translating the current shape from a starting point to an ending point.

```typescript
TranslatedBy2Points(point1: Mx3dGePoint, point2: Mx3dGePoint): Mx3dShapeObject
```

--------------------------------

### Get Translated Mx3dShapeObject by 2 Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dShapeCompound.md

Returns a new shape object that is the result of translating the current shape from a starting point to an ending point.

```typescript
TranslatedBy2Points(point1: Mx3dGePoint, point2: Mx3dGePoint): Mx3dShapeObject
```

--------------------------------

### OpenSearch Description (XML)

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/dist/LICENSE/AdobeFontsLICENSE.txt

This XML file provides an OpenSearch description for GitHub, allowing search engines and applications to discover and query GitHub's content.

```XML
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
```

--------------------------------

### Initialize System

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/MxCAD3DObject.md

Initializes the MXCAD 3D system. It requires an 'imp' parameter, likely representing an implementation or configuration object.

```JavaScript
init(imp: any): void
```

--------------------------------

### Get Translated Shape by Two Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dShapeCompSolid.md

Returns a new shape object that is the result of translating the current shape from a starting point to an ending point.

```typescript
TranslatedBy2Points(point1: Mx3dGePoint, point2: Mx3dGePoint): Mx3dShapeObject
```

--------------------------------

### Initialize Mx3dDbDocument

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dDbDocument.md

Constructor for initializing a new Mx3dDbDocument instance. This method is inherited from Mx3dDbObject.

```javascript
new Mx3dDbDocument()
```

--------------------------------

### Get Translated Mx3dGeomConic by 2 Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api/classes/Mx3dGeomConic.md

Returns a new Mx3dGeomConic object translated from a start point to an end point. The original object is not modified.

```TypeScript
TranslatedBy2Points(P1: Mx3dGePoint, P2: Mx3dGePoint): Mx3dGeomConic;
```

--------------------------------

### HTML Structure for Vite and mxcad3d

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/README.md

Sets up the basic HTML structure for a Vite project that will use mxcad3d. It includes a canvas element for rendering the 3D scene and a button to trigger drawing a box.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vite use mxcad</title>
</head>
<body>
    <div style="height: 800px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
    <button id="drawBox">Draw Box</button>
    <script type="module" src="./src/index.ts"></script>
</body>
</html>
```

--------------------------------

### Get Translated Mx3dShapeWire by 2 Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dShapeWire.md

Returns a new Mx3dShapeWire object translated from a start point to an end point. The original object remains unchanged.

```javascript
TranslatedBy2Points(startPoint, endPoint): Mx3dShapeObject
```

--------------------------------

### Get Translated Mx3dShapeCompSolid by Two Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dShapeCompSolid.md

Returns a new Mx3dShapeCompSolid object translated from a start point to an end point. The original object remains unchanged.

```typescript
TranslatedBy2Points(startPoint: Mx3dGePoint, endPoint: Mx3dGePoint): Mx3dShapeObject
```

--------------------------------

### Load GitHub UI Packages (JavaScript)

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/dist/LICENSE/AdobeFontsLICENSE.txt

These script tags load various JavaScript packages required for the GitHub UI, including paths, ref selectors, commit check statuses, and code view components. They are deferred to ensure they don't block initial page rendering.

```JavaScript
document.write('<script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_paths_index_ts-cd7413810c77.js"></script>');
document.write('<script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ref-selector_RefSelector_tsx-dbbdef4348e2.js"></script>');
document.write('<script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_commit-checks-status_index_ts-ui_packages_use-analytics_use-analytics_ts-ui_packa-51deed-06518674fea2.js"></script>');
document.write('<script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_react-shared_hooks_use-canonical-object_ts-ui_packages_code-view-shared_ho-f06b0a-d03308ad7c23.js"></script>');
document.write('<script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-code-view-c6f0193439b5.js"></script>');
```

--------------------------------

### Get Translated Bezier Curve by Two Points

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/api_en/classes/Mx3dGeomBezierCurve.md

Returns a new Bezier curve that has been translated from a starting point to an ending point. The original curve is not affected.

```typescript
TranslatedBy2Points(P1: Mx3dGePoint, P2: Mx3dGePoint): Mx3dGeomBezierCurve
```

--------------------------------

### Navigate to Code Repository

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/dist/LICENSE/AdobeFontsLICENSE.txt

Provides a link to navigate to the code section of the repository. This is typically used for browsing the project's source files.

```HTML
<a tabindex="-1" id="item-dc86a573-8894-479d-bb9e-5d55186b0f6e" href="/adobe-fonts/source-han-serif/tree/release" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16">
        <span class="ActionListItem-visual ActionListItem-visual--leading">
          <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code">
    <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1-.734-.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path>
</svg>
        </span>
      
        <span data-view-component="true" class="ActionListItem-label">
          Code
</span></a>
```

--------------------------------

### Vue Component for Cube Creation Demo

Source: https://github.com/mxcad/mxcad_docs3d/blob/main/docs3d/en/2.基本图形/1.方块.md

A Vue.js component that initializes MxCAD3DObject, draws a cube using Mx3dMkBox with specified points, and fits all objects in the view. It includes canvas setup and event handling for initialization.

```tsx
import { Mx3dGePoint, Mx3dMkBox, MxCAD3DObject } from "mxcad3d"
import { defineComponent, onMounted } from "vue"

export default defineComponent({
  setup() {
    onMounted(async () => {
      function drawBox() {
        // Get the document
        const doc = mxcad3d.getDocument();
        const pt1 = new Mx3dGePoint(5, 5, 5);
        const pt2 = new Mx3dGePoint(15, 15, 15);

        // Construct the BOX
        const boxMaker = new Mx3dMkBox(pt1, pt2);

        // Get the topological shape
        const boxShape = boxMaker.Shape();

        // Create a shape label in the document
        const boxLabel = doc.addShapeLabel();

        // Add the topological shape to the label
        boxLabel.setShape(boxShape);

        // Update the display (this will update the model shown in the canvas)
        mxcad3d.update();
      }

      // Ensure the DOM is fully rendered
      const mxcad3d = new MxCAD3DObject();

      await mxcad3d.create({
        canvas: '#myCanvas',
        locateFile: (fileName) => `https://unpkg.com/mxcad/dist/wasm/3d/${fileName}`,
      });

      mxcad3d.on('init', () => {
        console.log('Initialization completed');
        drawBox();
        mxcad3d.fitAllObjects(true);
      });
    });

    return () => (
      <div style={{ height: 600, overflow: 'hidden' }}>
        <canvas id="myCanvas" style={{ height: 300 }} />
      </div>
    );
  },
});
```