@wallsnap/room-3d

An opt-in Three.js parametric room mode for WallSnap. The existing photo scene remains the default; neither @wallsnap/react nor the widget imports this package, so Three.js does not enter their bundle graph.

import { createParametricRoomViewer } from '@wallsnap/room-3d';

const viewer = await createParametricRoomViewer({
  canvas,
  artworkUrl: 'https://cdn.example.com/shareable-artwork.webp',
  wall,
  frame,
  print: { widthCm: 60, heightCm: 80 },
  offset: { x: 0, y: 0 },
  roomDepthCm: 400,
});

viewer.resize(canvas.clientWidth, canvas.clientHeight);
viewer.dispose();

createParametricRoomSceneGraph calls @wallsnap/core's computeSceneGeometry first. It converts that function's returned pixel positions and dimensions through its returned pixelsPerCm; it does not maintain another anchor, clamp, border, mat, or print-size calculation. The resulting graph is expressed in metres and contains the back wall, floor, side walls, frame, optional mat, artwork, and camera.

The browser viewer dynamically imports Three.js and OrbitControls, loads the artwork under the host's CORS policy, and returns explicit resize/dispose controls. Disposal stops the animation loop, detaches OrbitControls and abort listeners, and releases every geometry, material, texture, and WebGL renderer. The room is intentionally parametric rather than photorealistic; it is an additive mode, not a replacement for the photo renderer.

Three.js is an MIT-licensed peer dependency. This package is MIT licensed.