🧊 Aperçu
Découvrez en animation le passage d'un plan CAO 2D à une vue 3D isométrique interactive.
Illustration du rendu — l'extrusion donne du volume aux murs du plan.
📦 Installation
Installez le package ESM sous licence MIT avec npm.
npm i @synapxlab/plan3d three
three est une peer dependency : installez-la dans votre projet pour éviter les doublons d'instances Three.js.
⚡ Démarrage rapide
Initialisez rapidement le viewer et chargez votre premier plan.
import { Plan3DViewer } from '@synapxlab/plan3d';
const viewer = new Plan3DViewer({
container: '#viewer',
background: '#111',
grid: true,
axes: true,
});
// Le format est déduit de l'extension (.dxf, .svg, .json)
await viewer.load('/plans/demo.dxf');
viewer.extrude(); // 2D → 3D, hauteur auto
viewer.setView('iso');
// Format pivot interne : { units, layers, entities[] }
viewer.loadJSON({
units: 'mm',
layers: [{ name: 'murs' }],
entities: [
{ type: 'line', layer: 'murs', start: [0, 0], end: [5000, 0] },
{ type: 'line', layer: 'murs', start: [5000, 0], end: [5000, 3000] },
],
});
viewer.setWallHeight(2500);
viewer.setMode('3d');
🧱 Du plan 2D au volume 3D
Chaque segment de mur du plan 2D peut être extrudé pour prendre du volume en 3D. La hauteur est paramétrable ou calculée automatiquement à environ 8 % de la diagonale du plan. Le viewer passe ensuite en vue isométrique avec rotation à la souris.
viewer.setWallHeight(2700); // hauteur en unités du plan
viewer.setMode('3d'); // bascule en murs extrudés
// ou, en un appel :
viewer.extrude(2700);
📐 Formats
Le viewer prend nativement en charge les formats DXF, SVG et JSON pivot.
DXF
Lit les entités LINE, LWPOLYLINE, POLYLINE/VERTEX, CIRCLE, ARC et POINT, ainsi que l'unité définie par $INSUNITS.
SVG
Affiche directement les plans vectoriels au format SVG dans le viewer.
JSON pivot
Exploite un format pivot interne structuré autour des unités, des calques et des entités.
📖 API & méthodes
Consultez les principales méthodes disponibles pour piloter le viewer et ses vues.
| Méthode | Description |
|---|---|
load(urlOrFile, options?) | Charge un plan depuis une URL ou un File/Blob ; format déduit de l'extension. |
loadDXF(content, options?) | Charge un contenu DXF brut. |
loadSVG(content, options?) | Charge un contenu SVG brut. |
loadJSON(data, options?) | Charge le format JSON pivot interne (objet ou chaîne). |
setMode(mode) | '2d' (filaire) ou '3d' (murs extrudés, passe en vue iso + rotation). |
setWallHeight(h) | Définit la hauteur des murs et reconstruit la 3D. |
extrude(height?) | Raccourci : extrude en 3D (hauteur auto si omise). |
setView(view) | 'top' | 'front' | 'side' | 'iso'. |
fitToScreen(padding?) | Centre et cadre la caméra sur le plan. |
setGrid(bool) / setAxes(bool) | Active ou désactive la grille et les axes. |
on(event, cb) / off(...) | Abonnement aux événements ready, load, modechange, viewchange, error. |
dispose() | Détruit le viewer et libère les ressources GPU. |