Package Installation
Install OpenPlans using your preferred package manager:
npm install @opengeometry/openplans
Peer Dependencies
OpenPlans requires the following peer dependencies to be installed in your project:
npm install three @types/three camera-controls lil-gui
OpenPlans is built on top of Three.js v0.168.0 or higher. Make sure your Three.js version is compatible.
Required Dependencies
| Package | Version | Purpose |
|---|
three | ^0.168.0 | 3D rendering engine |
@types/three | ^0.168.0 | TypeScript type definitions |
camera-controls | ^2.9.0 | Camera control utilities |
lil-gui | ^0.19.2 | Optional UI controls for debugging |
@opengeometry/openglyph (^0.0.6) - Text rendering for labels and dimensions
HTML Setup
Create a container element where OpenPlans will render:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OpenPlans App</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#app {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
TypeScript Configuration
If you’re using TypeScript, ensure your tsconfig.json includes:
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "node",
"lib": ["ES2020", "DOM"],
"types": ["three"]
}
}
Vite Setup (Recommended)
OpenPlans works seamlessly with Vite for modern development:
Create a Vite project
npm create vite@latest my-openplans-app -- --template vanilla
cd my-openplans-app
Install OpenPlans and dependencies
npm install @opengeometry/openplans three @types/three camera-controls lil-gui
Start the development server
Webpack Configuration
If you’re using Webpack, ensure you can handle ES modules:
module.exports = {
// ... other config
resolve: {
extensions: ['.js', '.ts', '.json']
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
CDN Usage (Not Recommended)
OpenPlans is distributed as an ES module and works best with a modern build tool. CDN usage is not officially supported, but you can bundle it yourself if needed.
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js"
}
}
</script>
WASM Setup (Optional)
OpenPlans uses WebAssembly for geometry operations. The WASM module is loaded automatically, but you can specify a custom URL:
const openPlans = new OpenPlans(container);
// Optional: Specify custom WASM URL
await openPlans.setupOpenGeometry('/path/to/custom.wasm');
In most cases, you don’t need to specify a WASM URL. OpenPlans will load it automatically from the correct location.
Verification
Verify your installation by creating a simple instance:
import { OpenPlans } from '@opengeometry/openplans';
const container = document.getElementById('app');
const openPlans = new OpenPlans(container);
await openPlans.setupOpenGeometry();
console.log('OpenPlans initialized successfully!');
Next Steps
