### Installing OpenGeometry and Vite

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/getting-started.md

Installs the `opengeometry` library for geometry creation and manipulation, and `vite` as a build tool for development and production, into the current npm project.

```bash
npm install opengeometry vite
```

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

### Starting Development Server

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/getting-started.md

Executes the `dev` script defined in `package.json`, which typically starts the Vite development server, making the application accessible in a web browser.

```bash
npm run dev
```

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

### Creating Project Directory

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/getting-started.md

This command sequence creates a new directory named 'OpenPlans-Rectangle' and then navigates into it, serving as the root for the new project.

```bash
mkdir OpenPlans-Rectangle
cd OpenPlans-Rectangle
```

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

### Initializing npm Project

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/getting-started.md

Initializes a new npm project in the current directory, accepting all default settings without prompting, which is a common first step for JavaScript/TypeScript projects.

```bash
npm init -y
```

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

### Configuring Vite Development Script

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/getting-started.md

Adds a `dev` script to the `package.json` file, allowing the project to be started in development mode using Vite by running `npm run dev`.

```json
"scripts": {
  "dev": "vite"
}
```

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

### Initializing OpenGeometry and Three.js Scene

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/getting-started.md

Sets up the Three.js scene, camera, and renderer, then initializes OpenGeometry, adds ambient lighting, configures orbit controls, and creates a basic rectangle using OpenGeometry's `Rectangle` primitive.

```javascript
let scene, camera, renderer;
let openGeometry;

async function init(){
  const app = document.getElementById('app');

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(app.clientWidth, app.clientHeight);
  app.appendChild(renderer.domElement);

  openGeometry = await OpenGeometry.create({
    container: app,
    scene: scene,
    camera: camera,
    wasmURL: 'opengeometry_bg.wasm'
  });

  scene.background = new THREE.Color(0xf0f0f0);

  camera.position.z = 15;
  camera.position.y = 5;

  const ambientLight = new THREE.AmbientLight(0xffffff, 1);
  scene.add(ambientLight);

  const controls = new OrbitControls(
    camera,
    openGeometry.labelRenderer.domElement
  );
  controls.update();

  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });

  const rectangleData = {
    center: new Vector3D(0, 0, 0),
    width: 2,
    breadth: 10
  }

  // Create Base Rectangle
  const ogRectangle = new Rectangle(rectangleData);
  scene.add(ogRectangle);

  initGUI();
  animate();
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  openGeometry.update(scene, camera);
}

init();
```

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

### Installing Project Dependencies with Yarn

Source: https://github.com/opengeometry-io/docs/blob/main/README copy.md

This command installs all necessary project dependencies using Yarn, preparing the environment for development or building the website.

```Shell
$ yarn
```

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

### Applying Basic CSS Styling

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/getting-started.md

Applies basic CSS rules to the `body` and `#app` elements, setting margins to zero and ensuring the `#app` container occupies the full viewport width and height.

```css
body {
  margin: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}
```

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

### Creating Basic HTML Structure

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/getting-started.md

Defines the fundamental HTML structure for the application, including meta tags, a link to the stylesheet, a `div` element for the application, and a script tag for JavaScript.

```html
<!DOCTYPE html>
<html>
<head>
  <title>OpenGeometry | Rectangle</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="app"></div>
  <script type="module"></script>
</body>
</html>
```

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

### Starting Local Development Server with Yarn

Source: https://github.com/opengeometry-io/docs/blob/main/README copy.md

This command initiates a local development server and automatically opens a browser window. Most changes made to the code are reflected live without requiring a server restart.

```Shell
$ yarn start
```

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

### Initializing npm Project with Bash

Source: https://github.com/opengeometry-io/docs/blob/main/openplans/intro.md

This command initializes a new npm project in the current directory, creating a `package.json` file with default settings. It's a prerequisite for installing OpenPlans and other JavaScript dependencies.

```Bash
npm init -y
```

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

### Complete OpenPlans Initialization and Wall Creation Script (JavaScript)

Source: https://github.com/opengeometry-io/docs/blob/main/openplans/intro.md

This comprehensive JavaScript module combines all previous steps: importing OpenPlans and GUI libraries, initializing OpenPlans, setting up OpenGeometry, configuring the pencil mode to 'view', creating a basic wall, and setting its position. The `init()` function is immediately invoked to start the application.

```JavaScript
import { OpenPlans } from './src/index.ts';
    import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

    async function init() {
      const container = document.getElementById('app');
      const openPlans = new OpenPlans(container);
      await openPlans.setupOpenGeometry();

      openPlans.pencil.mode = "view";

      const basicWall = openPlans.wall();
      basicWall.position.set(2, 0, 0);
    }

    await init();
```

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

### Initializing OpenPlans Instance in JavaScript

Source: https://github.com/opengeometry-io/docs/blob/main/openplans/intro.md

This JavaScript function `init` demonstrates the initial setup of the OpenPlans library. It retrieves the HTML container element by its ID and then instantiates a new `OpenPlans` object, passing the container as a parameter for rendering.

```JavaScript
async function init() {
  
  const container = document.getElementById('app');
  const openPlans = new OpenPlans(container);

}
```

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

### Example React Component for Live HTML Demo

Source: https://github.com/opengeometry-io/docs/blob/main/openplans/intro.md

This snippet presents a React functional component named `Wall` that displays the current time. It uses `useState` for state management and `useEffect` to set up and clean up a timer, updating the time every second. Although presented in an `html live` block, it's a standalone React example.

```JavaScript
function Wall (props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}
```

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

### Initializing SimpleLine (Two Points) - JavaScript

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-primitives/simple-line.md

This snippet initializes a `SimpleLine` object by providing two `Vector3D` instances as start and end points. This creates a line segment connecting the specified coordinates, which is then added to the scene.

```js
const ogSimple2 = new SimpleLine(
  new Vector3D(1, 1, 2),
  new Vector3D(1, 1, -2)
);
scene.add(ogSimple2);
```

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

### Setting Color for OpenGeometry Circle (JavaScript)

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-primitives/circle.md

This example illustrates how to instantiate a `BaseCircle` and then apply a specific color to it. After defining the circle's geometric properties, its `color` property is set to a hexadecimal value (0x00ff00 for green) before being added to the scene.

```js
const circleData = {
  radius: 3,
  segments: 15,
  position: new Vector3D(0, 3, 0),
  startAngle: 0,
  endAngle: Math.PI * 2,
}
const ogCircle = new BaseCircle(circleData);
ogCircle.color = 0x00ff00;
scene.add(ogCircle);
```

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

### Initializing SimpleLine (Two Points and Color) - JavaScript

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-primitives/simple-line.md

This snippet initializes a `SimpleLine` object with two `Vector3D` points, similar to the previous example. Additionally, it sets the `color` property of the line to `0x00ff00` (green) before adding it to the scene, demonstrating how to customize line appearance.

```js
const ogSimple3 = new SimpleLine(
  new Vector3D(-1, 1, 2),
  new Vector3D(-1, 1, -2)
);
ogSimple3.color = 0x00ff00;
scene.add(ogSimple3);
```

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

### Creating PolyLine with Multiple Points in JavaScript

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-primitives/polyLine.md

This snippet demonstrates how to instantiate a `PolyLine` object and add multiple `Vector3D` points to define its shape. It shows the process of creating a closed polyline by adding the starting point again at the end, and then adding it to the scene.

```js
// highlight-start
const polyLine = new PolyLine();
// highlight-end
scene.add(polyLine);

polyLine.addPoint(new Vector3D(0, 0, 0));
polyLine.addPoint(new Vector3D(1, 0, 0));
polyLine.addPoint(new Vector3D(1, 1, 0));
polyLine.addPoint(new Vector3D(0, 1, 0));
polyLine.addPoint(new Vector3D(0, 0, 0));
```

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

### Setting PolyLine Color in JavaScript

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-primitives/polyLine.md

This example illustrates how to create a polyline with multiple points and then assign a specific color to it. The `color` property is set using a hexadecimal value (e.g., `0x00ff00` for green) to visually distinguish the polyline in the 3D scene.

```js
const polyLine = new PolyLine();
scene.add(polyLine);

polyLine.addPoint(new Vector3D(0, 0, 0));
polyLine.addPoint(new Vector3D(1, 0, 0));
polyLine.addPoint(new Vector3D(1, 1, 0));
polyLine.addPoint(new Vector3D(0, 1, 0));
polyLine.addPoint(new Vector3D(0, 0, 0));

// highlight-start
polyLine.color = 0x00ff00;
// highlight-end
```

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

### Modifying Rectangle Properties in OpenGeometry (JavaScript)

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-primitives/rectangle.md

This example shows how to create a `Rectangle` instance and then dynamically update its properties such as `color`, `width`, and `breadth`. Modifying these properties triggers a real-time update of the rectangle's geometry and appearance within the scene.

```js
const ogRectangle = new Rectangle({
  center: new Vector3D(0, 3, 0),
  width: 2,
  breadth: 10
});

scene.add(ogRectangle);

// highlight-start
ogRectangle.color = 0x00ff00;
ogRectangle.width = 5;
ogRectangle.breadth = 15;
// highlight-end
```

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

### Checking PolyLine Closed Status in JavaScript

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-primitives/polyLine.md

This snippet demonstrates how to check if a `PolyLine` object is closed using its `isClosed` property. This boolean property returns `true` if the polyline forms a closed loop (i.e., its start and end points are the same or it's explicitly marked as closed), and `false` otherwise.

```js
// Returns true if the polyline is closed
const isClosed = polyLine.isClosed;
```

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

### Creating Project Directory with Bash

Source: https://github.com/opengeometry-io/docs/blob/main/openplans/intro.md

This snippet demonstrates how to create a new directory named 'OpenPlans-Wall' and navigate into it using basic bash commands. This is the initial step for setting up the project environment.

```Bash
mkdir OpenPlans-Wall
  cd OpenPlans-Wall
```

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

### Setting Up OpenGeometry Kernel in OpenPlans (JavaScript)

Source: https://github.com/opengeometry-io/docs/blob/main/openplans/intro.md

This JavaScript snippet shows how to integrate the OpenGeometry Kernel with OpenPlans. The `setupOpenGeometry()` method is called asynchronously on the `openPlans` instance, which is necessary to enable graphical operations within the application.

```JavaScript
async function init() {
  // ..
  // Rest of the code

  await openPlans.setupOpenGeometry();
}
```

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

### Building Static Website Content with Yarn

Source: https://github.com/opengeometry-io/docs/blob/main/README copy.md

This command generates the static content of the website into the `build` directory. The resulting static files can then be served using any standard static content hosting service.

```Shell
$ yarn build
```

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

### Deploying Website via SSH with Yarn

Source: https://github.com/opengeometry-io/docs/blob/main/README copy.md

This command deploys the website using SSH for authentication. It's a convenient method to build the website and push the generated content to the `gh-pages` branch, especially when using GitHub Pages for hosting.

```Shell
$ USE_SSH=true yarn deploy
```

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

### Creating Basic HTML Structure for OpenPlans App

Source: https://github.com/opengeometry-io/docs/blob/main/openplans/intro.md

This HTML snippet provides the foundational structure for the OpenPlans web application. It includes essential meta tags, a title, a `div` element with `id="app"` as the container for the OpenPlans canvas, and a `script` tag for module imports.

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>OpenPlans</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="OpenPlans Wall">
</head>
  <body>
    <div id="app"></div>
    <script type="module"></script>
  </body>
</html>
```

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

### Deploying Website without SSH with Yarn

Source: https://github.com/opengeometry-io/docs/blob/main/README copy.md

This command deploys the website without using SSH, requiring the GitHub username to be specified. It provides an alternative way to build and push the website to the `gh-pages` branch for GitHub Pages hosting.

```Shell
$ GIT_USER=<Your GitHub username> yarn deploy
```

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

### Applying Basic CSS Styling for Full-Screen App

Source: https://github.com/opengeometry-io/docs/blob/main/openplans/intro.md

This CSS code sets basic styles for the `body` and the `#app` container. It removes default margins, hides overflow, and ensures the app container occupies the full viewport width and height, preparing it for the OpenPlans rendering.

```CSS
body {
  margin: 0;
  overflow: hidden;
}

#app {
  width: 100%;
  height: 100vh;
}
```

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

### Adding a Basic Wall Element with OpenPlans (JavaScript)

Source: https://github.com/opengeometry-io/docs/blob/main/openplans/intro.md

This JavaScript code demonstrates how to add a simple wall element to the OpenPlans scene. The `wall()` method of the `openPlans` instance is called, which returns a new wall object that can then be manipulated.

```JavaScript
async function init() {
  // ..
  // Rest of the code

  const basicWall = openPlans.wall();
}
```

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

### Initializing OpenGeometry Circle (JavaScript)

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-primitives/circle.md

This snippet demonstrates how to create a basic `BaseCircle` instance using the `circleData` object, which defines its radius, segments, position, and angular range. The created circle is then added to the scene for rendering.

```js
const circleData = {
  radius: 3,
  segments: 15,
  position: new Vector3D(0, 0, 0),
  startAngle: 0,
  endAngle: Math.PI * 2,
}

const ogCircle = new BaseCircle(circleData);
scene.add(ogCircle);
```

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

### Creating a Simple Polygon with BasePoly in JavaScript

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-shapes/basePoly.md

This snippet demonstrates how to create a basic 2D polygon using the `BasePoly` class. It defines a set of `Vector3D` vertices and initializes a `BasePoly` instance, then adds it to the scene. This forms the foundation for further operations like extrusion.

```JavaScript
const vertices = [
  new Vector3D(1, 0, -1),
  new Vector3D(1, 0, 7),
  new Vector3D(9, 0, 6),
  new Vector3D(10, 0, 3),
  new Vector3D(9, 0, 1),
];

const ogPoly = new BasePoly(vertices);
scene.add(ogPoly);
```

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

### Initializing SimpleLine (Unit Length) - JavaScript

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-primitives/simple-line.md

This snippet initializes a `SimpleLine` object without any arguments, creating a default unit line (length 1) typically along the XZ plane. The line is then added to the scene for rendering.

```js
const ogSimple = new SimpleLine();
scene.add(ogSimple);
```

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

### Creating a Rectangle Instance in OpenGeometry (JavaScript)

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-primitives/rectangle.md

This snippet demonstrates how to create a new `Rectangle` object in OpenGeometry. It initializes the rectangle with a `center` (using `Vector3D`), `width`, and `breadth` defined in an object literal, and then adds the created rectangle to the scene.

```js
const rectangleData = {
  center: new Vector3D(0, 0, 0),
  width: 2,
  breadth: 10
}

const ogRectangle = new Rectangle(rectangleData);
scene.add(ogRectangle);
```

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

### Setting Wall Position in OpenPlans (JavaScript)

Source: https://github.com/opengeometry-io/docs/blob/main/openplans/intro.md

This JavaScript snippet illustrates how to modify the position of a previously created wall element. The `position.set()` method is used on the `basicWall` object to move it to the coordinates (2, 0, 0) within the OpenPlans scene.

```JavaScript
async function init() {
  // ..
  // Rest of the code

  basicWall.position.set(2, 0, 0);
}
```

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

### Extruding a Simple Polygon with BasePoly in JavaScript

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-shapes/basePoly.md

This snippet shows how to extrude a previously created `BasePoly` instance into a 3D shape. The `extrude` method takes a single parameter, the extrusion depth, which extends the polygon along its normal. This transforms a 2D polygon into a 3D object.

```JavaScript
ogPoly.extrude(5);
```

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

### Creating a Circle Polygon from BaseCircle in OpenGeometry (JavaScript)

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-shapes/circlePoly.md

This snippet demonstrates how to create a `CirclePoly` instance from a `BaseCircle` object in OpenGeometry. It first defines `circleData` for a `BaseCircle` including radius, segments, position, and angles. A `BaseCircle` is then instantiated and added to the scene. Finally, a `CirclePoly` is created using the `ogCircle` instance and also added to the scene. This process converts a basic circle into a polygon representation.

```js
const circleData = {
  radius: 3,
  segments: 15,
  position: new Vector3D(10, 0, 0),
  startAngle: 0,
  endAngle: Math.PI * 2,
}

const ogCircle = new BaseCircle(circleData);
scene.add(ogCircle);

// highlight-start
// Create Polygon from BaseCircle
const circlePoly = new CirclePoly(ogCircle);
scene.add(circlePoly);
// highlight-end
```

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

### Extruding a Circle Polygon in OpenGeometry (JavaScript)

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-shapes/circlePoly.md

This snippet shows how to extrude an existing `CirclePoly` instance to create a 3D shape. The `extrude` method is called on the `circlePoly` object, passing the desired height (e.g., 5 units) as a parameter. This transforms the 2D polygon into a 3D extruded object.

```js
circlePoly.extrude(5);
```

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

### Extruding a Complex Polygon with Holes using BasePoly in JavaScript

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-shapes/basePoly.md

This snippet shows how to extrude a `BasePoly` instance that already contains holes. Similar to simple extrusion, the `extrude` method applies a depth to the polygon, but in this case, the holes are also correctly extruded, resulting in a 3D object with internal cutouts.

```JavaScript
ogPolyComplex.extrude(5);
```

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

### Creating a Complex Polygon with BasePoly in JavaScript

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-shapes/basePoly.md

This snippet illustrates the creation of a more intricate 2D polygon using the `BasePoly` class. It defines a larger set of `Vector3D` vertices, potentially forming a self-intersecting or non-convex shape, and adds the resulting `BasePoly` instance to the scene. This serves as a base for adding holes.

```JavaScript
const ogVertices = [
  new Vector3D(-3, 0, -1), // 0
  new Vector3D(0, 0, -3), // 1
  new Vector3D(2, 0, -1), // 2
  new Vector3D(4, 0, -1), // 3
  new Vector3D(2, 0, 0), // 4
  new Vector3D(1.5, 0, 2), // 5
  new Vector3D(0.5, 0, 2), // 6
  new Vector3D(0.75, 0, 0.5), // 7
  new Vector3D(0.75, 0, 1.5), // 8
  new Vector3D(1.25, 0, 1.5), // 9
  new Vector3D(1.5, 0, 0.5), // 10
  new Vector3D(0, 0, 0), // 11
  new Vector3D(0, 0, 2), // 12
  new Vector3D(1, 0, 4), // 13
  new Vector3D(-2, 0, 2), // 14
];

const ogPolyComplex = new BasePoly(ogVertices);
scene.add(ogPolyComplex);
```

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

### Adding Holes to a Complex Polygon with BasePoly in JavaScript

Source: https://github.com/opengeometry-io/docs/blob/main/opengeometry/tutorials-shapes/basePoly.md

This snippet demonstrates how to add a hole to an existing `BasePoly` instance. It defines a set of vertices for the hole, emphasizing that they should be in a clockwise direction for proper rendering. The `addHole` method modifies the polygon's geometry to include the specified cutout.

```JavaScript
const holeClockwise = [
  new Vector3D(-1, 0, -1),
  new Vector3D(0, 0, -1),
  new Vector3D(0, 0, -2),
  new Vector3D(-1, 0, -2),
];
ogPolyComplex.addHole(holeClockwise);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.