@synapxlab/plan3d

Affichez vos plans CAO DXF et SVG, puis transformez-les par extrusion 3D avec un viewer JavaScript léger basé sur Three.js.

  • Viewer JavaScript léger basé sur Three.js
  • Lecture native des plans DXF et SVG
  • Extrusion des murs de la 2D vers la 3D
  • Vues orthographiques et navigation fluide
  • Loaders extensibles par plugin
Three.js DXF SVG JSON ESM MIT
plan3d.js
import { Plan3DViewer } from '@synapxlab/plan3d'; const viewer = new Plan3DViewer({ container: '#viewer', background: '#111', }); await viewer.load('/plans/demo.dxf'); viewer.extrude();

🧊 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.

L'architecture extensible permet d'enregistrer vos propres loaders sous forme de plugins. La prise en charge des formats DWG, IFC, glTF et STL figure sur la roadmap.

📖 API & méthodes

Consultez les principales méthodes disponibles pour piloter le viewer et ses vues.

MéthodeDescription
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.