@layoutit/polycss-react 0.2.3 → 0.2.5

package/README.md

@@ -84,7 +84,7 @@ export default function App() {
 - `autoCenter` shifts the mesh bbox center to local origin.
 - `meshResolution` chooses `"lossy"` (default) or `"lossless"` optimization. STL imports use the conservative lossless path in both modes.
 - `castShadow` emits CSS-projected shadows in dynamic lighting mode.
-- Tooling can reuse `buildPolyMeshTransform`, `worldPositionToPolyCss`, and `worldDirectionToPolyCss` for renderer-compatible transforms.
+- Tooling can reuse `buildPolyMeshTransform`, `buildPolySceneTransform`, `worldPositionToPolyCss`, `worldDirectionToPolyCss`, `worldDirectionalLightToPolyCss`, `worldDistanceToPolyCss`, `polyCssDistanceToWorld`, and `polyCssPositionToWorld` for renderer-compatible transforms and world/CSS conversions.
 
 ### Controls
 

package/dist/index.cjs

@@ -64,6 +64,7 @@ __export(src_exports, {
   bakeSolidTextureSamples: () => import_polycss_core27.bakeSolidTextureSamples,
   boxPolygons: () => import_polycss_core27.boxPolygons,
   buildPolyMeshTransform: () => import_polycss_core27.buildPolyMeshTransform,
+  buildPolySceneTransform: () => import_polycss_core27.buildPolySceneTransform,
   buildSceneContext: () => import_polycss_core27.buildSceneContext,
   cameraCullNormalGroups: () => import_polycss_core27.cameraCullNormalGroups,
   cameraCullNormalGroupsFromPolygons: () => import_polycss_core27.cameraCullNormalGroupsFromPolygons,
@@ -110,6 +111,8 @@ __export(src_exports, {
   parseVox: () => import_polycss_core27.parseVox,
   planePolygons: () => import_polycss_core27.planePolygons,
   pointInMeshElement: () => pointInMeshElement,
+  polyCssDistanceToWorld: () => import_polycss_core27.cssDistanceToWorld,
+  polyCssPositionToWorld: () => import_polycss_core27.cssPositionToWorld,
   polygonCssSurfaceNormal: () => import_polycss_core27.polygonCssSurfaceNormal,
   polygonFaces: () => import_polycss_core27.polygonFaces,
   polygonFacesCamera: () => import_polycss_core27.polygonFacesCamera,
@@ -134,6 +137,8 @@ __export(src_exports, {
   usePolySelect: () => usePolySelect,
   usePolySelectionApi: () => usePolySelectionApi,
   worldDirectionToPolyCss: () => import_polycss_core27.worldDirectionToCss,
+  worldDirectionalLightToPolyCss: () => import_polycss_core27.worldDirectionalLightToCss,
+  worldDistanceToPolyCss: () => import_polycss_core27.worldDistanceToCss,
   worldPositionToPolyCss: () => import_polycss_core27.worldPositionToCss
 });
 module.exports = __toCommonJS(src_exports);
@@ -229,18 +234,10 @@ function usePolyCamera(options) {
       handle.update(next);
       const el = sceneElRef.current;
       if (el) {
-        const s = handle.state;
-        const [ox, oy, oz] = store.getState().autoCenterOffset;
-        const tileSize = import_polycss_core.BASE_TILE;
-        const wx = s.target[0] + ox;
-        const wy = s.target[1] + oy;
-        const wz = s.target[2] + oz;
-        const cssX = wy * tileSize;
-        const cssY = wx * tileSize;
-        const cssZ = wz * tileSize;
-        const cssZoom = s.zoom / tileSize;
-        const distancePart = s.distance !== 0 ? `translateZ(${-s.distance}px) ` : "";
-        el.style.transform = `${distancePart}scale(${cssZoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
+        el.style.transform = (0, import_polycss_core.buildPolySceneTransform)({
+          ...handle.state,
+          autoCenterOffset: store.getState().autoCenterOffset
+        });
       }
       store.updateCameraFromRef(handle);
       store.notifyAll();
@@ -250,18 +247,10 @@ function usePolyCamera(options) {
     const el = sceneElRef.current;
     if (!el) return;
     const handle = handleRef.current;
-    const s = handle.state;
-    const [ox, oy, oz] = store.getState().autoCenterOffset;
-    const tileSize = import_polycss_core.BASE_TILE;
-    const wx = s.target[0] + ox;
-    const wy = s.target[1] + oy;
-    const wz = s.target[2] + oz;
-    const cssX = wy * tileSize;
-    const cssY = wx * tileSize;
-    const cssZ = wz * tileSize;
-    const cssZoom = s.zoom / tileSize;
-    const distancePart = s.distance !== 0 ? `translateZ(${-s.distance}px) ` : "";
-    el.style.transform = `${distancePart}scale(${cssZoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
+    el.style.transform = (0, import_polycss_core.buildPolySceneTransform)({
+      ...handle.state,
+      autoCenterOffset: store.getState().autoCenterOffset
+    });
   }, [store]);
   return {
     store,
@@ -7292,6 +7281,7 @@ var import_polycss_core27 = require("@layoutit/polycss-core");
   bakeSolidTextureSamples,
   boxPolygons,
   buildPolyMeshTransform,
+  buildPolySceneTransform,
   buildSceneContext,
   cameraCullNormalGroups,
   cameraCullNormalGroupsFromPolygons,
@@ -7338,6 +7328,8 @@ var import_polycss_core27 = require("@layoutit/polycss-core");
   parseVox,
   planePolygons,
   pointInMeshElement,
+  polyCssDistanceToWorld,
+  polyCssPositionToWorld,
   polygonCssSurfaceNormal,
   polygonFaces,
   polygonFacesCamera,
@@ -7362,5 +7354,7 @@ var import_polycss_core27 = require("@layoutit/polycss-core");
   usePolySelect,
   usePolySelectionApi,
   worldDirectionToPolyCss,
+  worldDirectionalLightToPolyCss,
+  worldDistanceToPolyCss,
   worldPositionToPolyCss
 });

package/dist/index.d.cts

@@ -3,7 +3,7 @@ import React__default, { ReactNode, CSSProperties, MouseEventHandler, PointerEve
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _layoutit_polycss_core from '@layoutit/polycss-core';
 import { Vec3, CameraState, CameraHandle, Vec2, PolyMaterial, PolyDirectionalLight, PolyTextureLightingMode, TextureQuality, Polygon, PolyAmbientLight, PolySeamBleed, PolyRenderStrategiesOption, LoadMeshOptions, ParseResult, MeshResolution, BoxPolygonsOptions, ConePolygonsOptions, CylinderPolygonsOptions, DodecahedronPolygonsOptions, IcosahedronPolygonsOptions, OctahedronPolygonsOptions, PlanePolygonsOptions, RingPolygonsOptions, SpherePolygonsOptions, TetrahedronPolygonsOptions, TorusPolygonsOptions, PolyAnimationTarget, PolyAnimationMixer, PolyAnimationClip, PolyAnimationAction, ParseAnimationController } from '@layoutit/polycss-core';
-export { ArrowPolygonsOptions, AutoRotateConfig, AutoRotateOption, AxesHelperOptions, BASE_TILE, BoxFace, BoxFaceOptions, BoxPolygonsOptions, CAMERA_BACKFACE_CULL_EPS, CameraCullNormalGroup, CameraCullRotation, CameraHandle, CameraState, CameraStyleInput, ConePolygonsOptions, CoverPlanarPolygonsOptions, CullInteriorOptions, CylinderPolygonsOptions, DEFAULT_CAMERA_STATE, DEFAULT_PROJECTION, DEFAULT_SEAM_FACET_SPLIT_OPTIONS, DEFAULT_SEAM_OVERLAP_OPTIONS, DodecahedronPolygonsOptions, GltfParseOptions, IcosahedronPolygonsOptions, LoadMeshOptions, LoopMode, LoopOnce, LoopPingPong, LoopRepeat, MeshResolution, MtlParseResult, NormalizeResult, ObjParseOptions, OctahedronPolygonsOptions, OptimizeAnimatedMeshPolygonsOptions, OptimizeMeshParseResultOptions, OptimizeMeshPolygonsOptions, ParseAnimationClip, ParseAnimationController, ParseResult, ParseStlColor, ParseStlSolid, ParseStlTopology, ParsedColor, PlanePolygonsOptions, PolyAmbientLight, PolyAnimationAction, PolyAnimationClip, PolyAnimationMixer, PolyAnimationTarget, PolyDirectionalLight, PolyMaterial, PolyMeshTransformInput, PolyRenderStrategiesOption, PolyRenderStrategy, PolyTextureLightingMode, Polygon, PolygonFace, RingPolygonsOptions, SceneBbox, SceneContext, SceneContextBuildArgs, SceneContextBuildResult, SeamFacetSplitCandidate, SeamFacetSplitCandidateReason, SeamFacetSplitOptions, SeamFacetSplitReport, SeamOverlapCandidate, SeamOverlapCandidateKind, SeamOverlapDiagnostics, SeamOverlapOptions, SimplifyTriangleMeshPolygonsOptions, SolidTextureSampleOptions, StlParseOptions, TetrahedronPolygonsOptions, TexturePaintMetrics, TexturePaintMetricsOptions, TextureTriangle, TorusPolygonsOptions, VOXEL_CAMERA_CULL_AXIS_EPS, VOXEL_CAMERA_CULL_NORMAL_LIMIT, Vec2, Vec3, VoxParseOptions, arrowPolygons, axesHelperPolygons, bakeSolidTextureSampledPolygons, bakeSolidTextureSamples, boxPolygons, buildPolyMeshTransform, buildSceneContext, cameraCullNormalGroups, cameraCullNormalGroupsFromPolygons, cameraCullNormalKey, cameraCullVisibleSignature, cameraFacingDepth, clampChannel, computeSceneBbox, computeShapeLighting, computeTexturePaintMetrics, conePolygons, coverPlanarPolygons, createIsometricCamera, createPolyAnimationMixer, cullInteriorPolygons, cylinderPolygons, dodecahedronPolygons, formatColor, icosahedronPolygons, inverseRotateVec3, isAxisAlignedSurfaceNormal, isVoxelCameraCullableNormalGroups, loadMesh, mergePolygons, normalFacesCamera, normalizeInvertMultiplier, normalizePolygons, octahedronPolygons, optimizeAnimatedMeshPolygons, optimizeMeshParseResult, optimizeMeshPolygons, parseColor, parseGltf, parseHexColor, parseMtl, parseObj, parsePureColor, parseRgbColor, parseStl, parseVox, planePolygons, polygonCssSurfaceNormal, polygonFaces, polygonFacesCamera, repairMeshSeams, ringPolygons, rotateVec3, seamFacetSplitPolygons, seamFacetSplitReport, seamOverlapDiagnostics, seamOverlapPolygons, seamOverlapReport, shadeColor, simplifyTriangleMeshPolygons, tetrahedronPolygons, torusPolygons, worldDirectionToCss as worldDirectionToPolyCss, worldPositionToCss as worldPositionToPolyCss } from '@layoutit/polycss-core';
+export { ArrowPolygonsOptions, AutoRotateConfig, AutoRotateOption, AxesHelperOptions, BASE_TILE, BoxFace, BoxFaceOptions, BoxPolygonsOptions, CAMERA_BACKFACE_CULL_EPS, CameraCullNormalGroup, CameraCullRotation, CameraHandle, CameraState, CameraStyleInput, ConePolygonsOptions, CoverPlanarPolygonsOptions, CullInteriorOptions, CylinderPolygonsOptions, DEFAULT_CAMERA_STATE, DEFAULT_PROJECTION, DEFAULT_SEAM_FACET_SPLIT_OPTIONS, DEFAULT_SEAM_OVERLAP_OPTIONS, DodecahedronPolygonsOptions, GltfParseOptions, IcosahedronPolygonsOptions, LoadMeshOptions, LoopMode, LoopOnce, LoopPingPong, LoopRepeat, MeshResolution, MtlParseResult, NormalizeResult, ObjParseOptions, OctahedronPolygonsOptions, OptimizeAnimatedMeshPolygonsOptions, OptimizeMeshParseResultOptions, OptimizeMeshPolygonsOptions, ParseAnimationClip, ParseAnimationController, ParseResult, ParseStlColor, ParseStlSolid, ParseStlTopology, ParsedColor, PlanePolygonsOptions, PolyAmbientLight, PolyAnimationAction, PolyAnimationClip, PolyAnimationMixer, PolyAnimationTarget, PolyDirectionalLight, PolyMaterial, PolyMeshTransformInput, PolyRenderStrategiesOption, PolyRenderStrategy, PolySceneTransformInput, PolyTextureLightingMode, Polygon, PolygonFace, RingPolygonsOptions, SceneBbox, SceneContext, SceneContextBuildArgs, SceneContextBuildResult, SeamFacetSplitCandidate, SeamFacetSplitCandidateReason, SeamFacetSplitOptions, SeamFacetSplitReport, SeamOverlapCandidate, SeamOverlapCandidateKind, SeamOverlapDiagnostics, SeamOverlapOptions, SimplifyTriangleMeshPolygonsOptions, SolidTextureSampleOptions, StlParseOptions, TetrahedronPolygonsOptions, TexturePaintMetrics, TexturePaintMetricsOptions, TextureTriangle, TorusPolygonsOptions, VOXEL_CAMERA_CULL_AXIS_EPS, VOXEL_CAMERA_CULL_NORMAL_LIMIT, Vec2, Vec3, VoxParseOptions, arrowPolygons, axesHelperPolygons, bakeSolidTextureSampledPolygons, bakeSolidTextureSamples, boxPolygons, buildPolyMeshTransform, buildPolySceneTransform, buildSceneContext, cameraCullNormalGroups, cameraCullNormalGroupsFromPolygons, cameraCullNormalKey, cameraCullVisibleSignature, cameraFacingDepth, clampChannel, computeSceneBbox, computeShapeLighting, computeTexturePaintMetrics, conePolygons, coverPlanarPolygons, createIsometricCamera, createPolyAnimationMixer, cullInteriorPolygons, cylinderPolygons, dodecahedronPolygons, formatColor, icosahedronPolygons, inverseRotateVec3, isAxisAlignedSurfaceNormal, isVoxelCameraCullableNormalGroups, loadMesh, mergePolygons, normalFacesCamera, normalizeInvertMultiplier, normalizePolygons, octahedronPolygons, optimizeAnimatedMeshPolygons, optimizeMeshParseResult, optimizeMeshPolygons, parseColor, parseGltf, parseHexColor, parseMtl, parseObj, parsePureColor, parseRgbColor, parseStl, parseVox, planePolygons, cssDistanceToWorld as polyCssDistanceToWorld, cssPositionToWorld as polyCssPositionToWorld, polygonCssSurfaceNormal, polygonFaces, polygonFacesCamera, repairMeshSeams, ringPolygons, rotateVec3, seamFacetSplitPolygons, seamFacetSplitReport, seamOverlapDiagnostics, seamOverlapPolygons, seamOverlapReport, shadeColor, simplifyTriangleMeshPolygons, tetrahedronPolygons, torusPolygons, worldDirectionToCss as worldDirectionToPolyCss, worldDirectionalLightToCss as worldDirectionalLightToPolyCss, worldDistanceToCss as worldDistanceToPolyCss, worldPositionToCss as worldPositionToPolyCss } from '@layoutit/polycss-core';
 
 interface PolyPerspectiveCameraProps {
     zoom?: number;

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import React__default, { ReactNode, CSSProperties, MouseEventHandler, PointerEve
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _layoutit_polycss_core from '@layoutit/polycss-core';
 import { Vec3, CameraState, CameraHandle, Vec2, PolyMaterial, PolyDirectionalLight, PolyTextureLightingMode, TextureQuality, Polygon, PolyAmbientLight, PolySeamBleed, PolyRenderStrategiesOption, LoadMeshOptions, ParseResult, MeshResolution, BoxPolygonsOptions, ConePolygonsOptions, CylinderPolygonsOptions, DodecahedronPolygonsOptions, IcosahedronPolygonsOptions, OctahedronPolygonsOptions, PlanePolygonsOptions, RingPolygonsOptions, SpherePolygonsOptions, TetrahedronPolygonsOptions, TorusPolygonsOptions, PolyAnimationTarget, PolyAnimationMixer, PolyAnimationClip, PolyAnimationAction, ParseAnimationController } from '@layoutit/polycss-core';
-export { ArrowPolygonsOptions, AutoRotateConfig, AutoRotateOption, AxesHelperOptions, BASE_TILE, BoxFace, BoxFaceOptions, BoxPolygonsOptions, CAMERA_BACKFACE_CULL_EPS, CameraCullNormalGroup, CameraCullRotation, CameraHandle, CameraState, CameraStyleInput, ConePolygonsOptions, CoverPlanarPolygonsOptions, CullInteriorOptions, CylinderPolygonsOptions, DEFAULT_CAMERA_STATE, DEFAULT_PROJECTION, DEFAULT_SEAM_FACET_SPLIT_OPTIONS, DEFAULT_SEAM_OVERLAP_OPTIONS, DodecahedronPolygonsOptions, GltfParseOptions, IcosahedronPolygonsOptions, LoadMeshOptions, LoopMode, LoopOnce, LoopPingPong, LoopRepeat, MeshResolution, MtlParseResult, NormalizeResult, ObjParseOptions, OctahedronPolygonsOptions, OptimizeAnimatedMeshPolygonsOptions, OptimizeMeshParseResultOptions, OptimizeMeshPolygonsOptions, ParseAnimationClip, ParseAnimationController, ParseResult, ParseStlColor, ParseStlSolid, ParseStlTopology, ParsedColor, PlanePolygonsOptions, PolyAmbientLight, PolyAnimationAction, PolyAnimationClip, PolyAnimationMixer, PolyAnimationTarget, PolyDirectionalLight, PolyMaterial, PolyMeshTransformInput, PolyRenderStrategiesOption, PolyRenderStrategy, PolyTextureLightingMode, Polygon, PolygonFace, RingPolygonsOptions, SceneBbox, SceneContext, SceneContextBuildArgs, SceneContextBuildResult, SeamFacetSplitCandidate, SeamFacetSplitCandidateReason, SeamFacetSplitOptions, SeamFacetSplitReport, SeamOverlapCandidate, SeamOverlapCandidateKind, SeamOverlapDiagnostics, SeamOverlapOptions, SimplifyTriangleMeshPolygonsOptions, SolidTextureSampleOptions, StlParseOptions, TetrahedronPolygonsOptions, TexturePaintMetrics, TexturePaintMetricsOptions, TextureTriangle, TorusPolygonsOptions, VOXEL_CAMERA_CULL_AXIS_EPS, VOXEL_CAMERA_CULL_NORMAL_LIMIT, Vec2, Vec3, VoxParseOptions, arrowPolygons, axesHelperPolygons, bakeSolidTextureSampledPolygons, bakeSolidTextureSamples, boxPolygons, buildPolyMeshTransform, buildSceneContext, cameraCullNormalGroups, cameraCullNormalGroupsFromPolygons, cameraCullNormalKey, cameraCullVisibleSignature, cameraFacingDepth, clampChannel, computeSceneBbox, computeShapeLighting, computeTexturePaintMetrics, conePolygons, coverPlanarPolygons, createIsometricCamera, createPolyAnimationMixer, cullInteriorPolygons, cylinderPolygons, dodecahedronPolygons, formatColor, icosahedronPolygons, inverseRotateVec3, isAxisAlignedSurfaceNormal, isVoxelCameraCullableNormalGroups, loadMesh, mergePolygons, normalFacesCamera, normalizeInvertMultiplier, normalizePolygons, octahedronPolygons, optimizeAnimatedMeshPolygons, optimizeMeshParseResult, optimizeMeshPolygons, parseColor, parseGltf, parseHexColor, parseMtl, parseObj, parsePureColor, parseRgbColor, parseStl, parseVox, planePolygons, polygonCssSurfaceNormal, polygonFaces, polygonFacesCamera, repairMeshSeams, ringPolygons, rotateVec3, seamFacetSplitPolygons, seamFacetSplitReport, seamOverlapDiagnostics, seamOverlapPolygons, seamOverlapReport, shadeColor, simplifyTriangleMeshPolygons, tetrahedronPolygons, torusPolygons, worldDirectionToCss as worldDirectionToPolyCss, worldPositionToCss as worldPositionToPolyCss } from '@layoutit/polycss-core';
+export { ArrowPolygonsOptions, AutoRotateConfig, AutoRotateOption, AxesHelperOptions, BASE_TILE, BoxFace, BoxFaceOptions, BoxPolygonsOptions, CAMERA_BACKFACE_CULL_EPS, CameraCullNormalGroup, CameraCullRotation, CameraHandle, CameraState, CameraStyleInput, ConePolygonsOptions, CoverPlanarPolygonsOptions, CullInteriorOptions, CylinderPolygonsOptions, DEFAULT_CAMERA_STATE, DEFAULT_PROJECTION, DEFAULT_SEAM_FACET_SPLIT_OPTIONS, DEFAULT_SEAM_OVERLAP_OPTIONS, DodecahedronPolygonsOptions, GltfParseOptions, IcosahedronPolygonsOptions, LoadMeshOptions, LoopMode, LoopOnce, LoopPingPong, LoopRepeat, MeshResolution, MtlParseResult, NormalizeResult, ObjParseOptions, OctahedronPolygonsOptions, OptimizeAnimatedMeshPolygonsOptions, OptimizeMeshParseResultOptions, OptimizeMeshPolygonsOptions, ParseAnimationClip, ParseAnimationController, ParseResult, ParseStlColor, ParseStlSolid, ParseStlTopology, ParsedColor, PlanePolygonsOptions, PolyAmbientLight, PolyAnimationAction, PolyAnimationClip, PolyAnimationMixer, PolyAnimationTarget, PolyDirectionalLight, PolyMaterial, PolyMeshTransformInput, PolyRenderStrategiesOption, PolyRenderStrategy, PolySceneTransformInput, PolyTextureLightingMode, Polygon, PolygonFace, RingPolygonsOptions, SceneBbox, SceneContext, SceneContextBuildArgs, SceneContextBuildResult, SeamFacetSplitCandidate, SeamFacetSplitCandidateReason, SeamFacetSplitOptions, SeamFacetSplitReport, SeamOverlapCandidate, SeamOverlapCandidateKind, SeamOverlapDiagnostics, SeamOverlapOptions, SimplifyTriangleMeshPolygonsOptions, SolidTextureSampleOptions, StlParseOptions, TetrahedronPolygonsOptions, TexturePaintMetrics, TexturePaintMetricsOptions, TextureTriangle, TorusPolygonsOptions, VOXEL_CAMERA_CULL_AXIS_EPS, VOXEL_CAMERA_CULL_NORMAL_LIMIT, Vec2, Vec3, VoxParseOptions, arrowPolygons, axesHelperPolygons, bakeSolidTextureSampledPolygons, bakeSolidTextureSamples, boxPolygons, buildPolyMeshTransform, buildPolySceneTransform, buildSceneContext, cameraCullNormalGroups, cameraCullNormalGroupsFromPolygons, cameraCullNormalKey, cameraCullVisibleSignature, cameraFacingDepth, clampChannel, computeSceneBbox, computeShapeLighting, computeTexturePaintMetrics, conePolygons, coverPlanarPolygons, createIsometricCamera, createPolyAnimationMixer, cullInteriorPolygons, cylinderPolygons, dodecahedronPolygons, formatColor, icosahedronPolygons, inverseRotateVec3, isAxisAlignedSurfaceNormal, isVoxelCameraCullableNormalGroups, loadMesh, mergePolygons, normalFacesCamera, normalizeInvertMultiplier, normalizePolygons, octahedronPolygons, optimizeAnimatedMeshPolygons, optimizeMeshParseResult, optimizeMeshPolygons, parseColor, parseGltf, parseHexColor, parseMtl, parseObj, parsePureColor, parseRgbColor, parseStl, parseVox, planePolygons, cssDistanceToWorld as polyCssDistanceToWorld, cssPositionToWorld as polyCssPositionToWorld, polygonCssSurfaceNormal, polygonFaces, polygonFacesCamera, repairMeshSeams, ringPolygons, rotateVec3, seamFacetSplitPolygons, seamFacetSplitReport, seamOverlapDiagnostics, seamOverlapPolygons, seamOverlapReport, shadeColor, simplifyTriangleMeshPolygons, tetrahedronPolygons, torusPolygons, worldDirectionToCss as worldDirectionToPolyCss, worldDirectionalLightToCss as worldDirectionalLightToPolyCss, worldDistanceToCss as worldDistanceToPolyCss, worldPositionToCss as worldPositionToPolyCss } from '@layoutit/polycss-core';
 
 interface PolyPerspectiveCameraProps {
     zoom?: number;

package/dist/index.js

@@ -14,7 +14,7 @@ function useCameraContext() {
 
 // src/camera/useCamera.ts
 import { useRef as useRef2, useCallback as useCallback2, useEffect, useMemo } from "react";
-import { createIsometricCamera, BASE_TILE } from "@layoutit/polycss-core";
+import { buildPolySceneTransform, createIsometricCamera } from "@layoutit/polycss-core";
 
 // src/store/sceneStore.ts
 import { useSyncExternalStore, useRef, useCallback } from "react";
@@ -89,18 +89,10 @@ function usePolyCamera(options) {
       handle.update(next);
       const el = sceneElRef.current;
       if (el) {
-        const s = handle.state;
-        const [ox, oy, oz] = store.getState().autoCenterOffset;
-        const tileSize = BASE_TILE;
-        const wx = s.target[0] + ox;
-        const wy = s.target[1] + oy;
-        const wz = s.target[2] + oz;
-        const cssX = wy * tileSize;
-        const cssY = wx * tileSize;
-        const cssZ = wz * tileSize;
-        const cssZoom = s.zoom / tileSize;
-        const distancePart = s.distance !== 0 ? `translateZ(${-s.distance}px) ` : "";
-        el.style.transform = `${distancePart}scale(${cssZoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
+        el.style.transform = buildPolySceneTransform({
+          ...handle.state,
+          autoCenterOffset: store.getState().autoCenterOffset
+        });
       }
       store.updateCameraFromRef(handle);
       store.notifyAll();
@@ -110,18 +102,10 @@ function usePolyCamera(options) {
     const el = sceneElRef.current;
     if (!el) return;
     const handle = handleRef.current;
-    const s = handle.state;
-    const [ox, oy, oz] = store.getState().autoCenterOffset;
-    const tileSize = BASE_TILE;
-    const wx = s.target[0] + ox;
-    const wy = s.target[1] + oy;
-    const wz = s.target[2] + oz;
-    const cssX = wy * tileSize;
-    const cssY = wx * tileSize;
-    const cssZ = wz * tileSize;
-    const cssZoom = s.zoom / tileSize;
-    const distancePart = s.distance !== 0 ? `translateZ(${-s.distance}px) ` : "";
-    el.style.transform = `${distancePart}scale(${cssZoom}) rotateX(${s.rotX}deg) rotate(${s.rotY}deg) translate3d(${-cssX}px, ${-cssY}px, ${-cssZ}px)`;
+    el.style.transform = buildPolySceneTransform({
+      ...handle.state,
+      autoCenterOffset: store.getState().autoCenterOffset
+    });
   }, [store]);
   return {
     store,
@@ -221,7 +205,7 @@ var PolyOrthographicCamera = memo2(PolyOrthographicCameraInner);
 
 // src/scene/PolyScene.tsx
 import { memo as memo8, useCallback as useCallback5, useEffect as useEffect3, useLayoutEffect, useMemo as useMemo6, useRef as useRef4, useState as useState2 } from "react";
-import { BASE_TILE as BASE_TILE2, DEFAULT_SEAM_BLEED, parseHexColor, worldDirectionToCss } from "@layoutit/polycss-core";
+import { BASE_TILE, DEFAULT_SEAM_BLEED, parseHexColor, worldDirectionToCss } from "@layoutit/polycss-core";
 
 // src/scene/useSceneContext.ts
 import { useMemo as useMemo4 } from "react";
@@ -2656,7 +2640,7 @@ function PolySceneInner({
     }
     if (!Number.isFinite(minWorldZ)) return null;
     const lift = shadow?.lift ?? 0.05;
-    return (minWorldZ + lift) * BASE_TILE2;
+    return (minWorldZ + lift) * BASE_TILE;
   }, [shadow]);
   const registerShadowCaster = useCallback5((meshId, data) => {
     if (data === null) {
@@ -2781,7 +2765,7 @@ import {
   useState as useState4
 } from "react";
 import {
-  BASE_TILE as BASE_TILE4,
+  BASE_TILE as BASE_TILE3,
   buildPolyMeshTransform,
   buildSharedEdgeMap,
   computeReceiverShadowFaces,
@@ -2894,7 +2878,7 @@ import { createPortal } from "react-dom";
 
 // src/scene/voxelRenderer.ts
 import {
-  BASE_TILE as BASE_TILE3,
+  BASE_TILE as BASE_TILE2,
   computeProjectiveQuadMatrix,
   normalFacesCamera,
   parsePureColor as parsePureColor2,
@@ -3003,11 +2987,11 @@ function polygonBrush(polygon) {
     return {
       axis: "z",
       face,
-      left: minY * BASE_TILE3,
-      top: minX * BASE_TILE3,
-      width: Math.max(0, (maxY - minY) * BASE_TILE3),
-      height: Math.max(0, (maxX - minX) * BASE_TILE3),
-      z: minZ * BASE_TILE3,
+      left: minY * BASE_TILE2,
+      top: minX * BASE_TILE2,
+      width: Math.max(0, (maxY - minY) * BASE_TILE2),
+      height: Math.max(0, (maxX - minX) * BASE_TILE2),
+      z: minZ * BASE_TILE2,
       baseColor,
       bleed: zeroVoxelSeamBleed()
     };
@@ -3016,11 +3000,11 @@ function polygonBrush(polygon) {
     return {
       axis: "x",
       face,
-      left: minY * BASE_TILE3,
-      top: minZ * BASE_TILE3,
-      width: Math.max(0, (maxY - minY) * BASE_TILE3),
-      height: Math.max(0, (maxZ - minZ) * BASE_TILE3),
-      z: -minX * BASE_TILE3,
+      left: minY * BASE_TILE2,
+      top: minZ * BASE_TILE2,
+      width: Math.max(0, (maxY - minY) * BASE_TILE2),
+      height: Math.max(0, (maxZ - minZ) * BASE_TILE2),
+      z: -minX * BASE_TILE2,
       baseColor,
       bleed: zeroVoxelSeamBleed()
     };
@@ -3029,11 +3013,11 @@ function polygonBrush(polygon) {
     return {
       axis: "y",
       face,
-      left: minZ * BASE_TILE3,
-      top: minX * BASE_TILE3,
-      width: Math.max(0, (maxZ - minZ) * BASE_TILE3),
-      height: Math.max(0, (maxX - minX) * BASE_TILE3),
-      z: -minY * BASE_TILE3,
+      left: minZ * BASE_TILE2,
+      top: minX * BASE_TILE2,
+      width: Math.max(0, (maxZ - minZ) * BASE_TILE2),
+      height: Math.max(0, (maxX - minX) * BASE_TILE2),
+      z: -minY * BASE_TILE2,
       baseColor,
       bleed: zeroVoxelSeamBleed()
     };
@@ -3053,7 +3037,7 @@ function worldLineKey(segment) {
   return key;
 }
 function cssPointForVertex(v) {
-  return [v[1] * BASE_TILE3, v[0] * BASE_TILE3, v[2] * BASE_TILE3];
+  return [v[1] * BASE_TILE2, v[0] * BASE_TILE2, v[2] * BASE_TILE2];
 }
 function localPointForItem(item, p) {
   if (item.axis === "x") return [p[0], p[2]];
@@ -4020,7 +4004,7 @@ var PolyMesh = forwardRef(function PolyMesh2({
     const userGroundLightDir = sceneDirectionalLight?.direction ?? [0.4, -0.7, 0.59];
     const lightDir = worldDirectionToCss2(userGroundLightDir);
     const meshPosZ = position?.[2] ?? 0;
-    const localGroundCssZ = bakedShadowGroundCssZ - meshPosZ * BASE_TILE4;
+    const localGroundCssZ = bakedShadowGroundCssZ - meshPosZ * BASE_TILE3;
     const shadowDedupDrop = findOverlappingPolygonDuplicates(polygons, {
       normalTolerance: 0.1,
       distanceTolerance: 0.5,
@@ -4038,9 +4022,9 @@ var PolyMesh = forwardRef(function PolyMesh2({
       const projected = [];
       for (const v of polygon.vertices) {
         const cssVertex = [
-          v[1] * BASE_TILE4,
-          v[0] * BASE_TILE4,
-          v[2] * BASE_TILE4
+          v[1] * BASE_TILE3,
+          v[0] * BASE_TILE3,
+          v[2] * BASE_TILE3
         ];
         if (cssVertex[0] < fpMinX) fpMinX = cssVertex[0];
         if (cssVertex[1] < fpMinY) fpMinY = cssVertex[1];
@@ -4412,7 +4396,7 @@ function RenderPropPolygon({
 }
 
 // src/scene/PolyIframe.tsx
-import { BASE_TILE as BASE_TILE5 } from "@layoutit/polycss-core";
+import { BASE_TILE as BASE_TILE4 } from "@layoutit/polycss-core";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function buildIframeTransform(position, rotation, scale, cssWidth, cssHeight) {
   const sx = typeof scale === "number" ? scale : scale?.[0] ?? 1;
@@ -4420,9 +4404,9 @@ function buildIframeTransform(position, rotation, scale, cssWidth, cssHeight) {
   const sz = typeof scale === "number" ? scale : scale?.[2] ?? 1;
   const hasScale = sx !== 1 || sy !== 1 || sz !== 1;
   const hasRotation = !!rotation && (!!rotation[0] || !!rotation[1] || !!rotation[2]);
-  const cssX = (position?.[1] ?? 0) * BASE_TILE5;
-  const cssY = (position?.[0] ?? 0) * BASE_TILE5;
-  const cssZ = (position?.[2] ?? 0) * BASE_TILE5;
+  const cssX = (position?.[1] ?? 0) * BASE_TILE4;
+  const cssY = (position?.[0] ?? 0) * BASE_TILE4;
+  const cssZ = (position?.[2] ?? 0) * BASE_TILE4;
   const parts = [];
   parts.push(`translate3d(${cssX}px, ${cssY}px, ${cssZ}px)`);
   if (hasRotation) {
@@ -4449,8 +4433,8 @@ function PolyIframe({
   className,
   style
 }) {
-  const cssW = width * BASE_TILE5;
-  const cssH = height * BASE_TILE5;
+  const cssW = width * BASE_TILE4;
+  const cssH = height * BASE_TILE4;
   const transform = buildIframeTransform(position, rotation, scale, cssW, cssH);
   const wrapperStyle = {
     position: "absolute",
@@ -4972,7 +4956,7 @@ function PolyTorus({
 
 // src/controls/PolyFirstPersonControls.tsx
 import { useEffect as useEffect6, useRef as useRef7, useImperativeHandle as useImperativeHandle2, forwardRef as forwardRef2 } from "react";
-import { BASE_TILE as BASE_TILE6 } from "@layoutit/polycss-core";
+import { BASE_TILE as BASE_TILE5 } from "@layoutit/polycss-core";
 var DEFAULTS = {
   enabled: true,
   lookEnabled: true,
@@ -5148,7 +5132,7 @@ var PolyFirstPersonControls = forwardRef2(function PolyFirstPersonControls2(prop
     const host = cameraElRef.current;
     const perspStr = host ? getComputedStyle(host).perspective : "";
     const n = parseFloat(perspStr);
-    return (Number.isFinite(n) && n > 0 ? n : 32e3) / BASE_TILE6;
+    return (Number.isFinite(n) && n > 0 ? n : 32e3) / BASE_TILE5;
   }
   function deriveTarget() {
     const s = cameraRef.current.state;
@@ -5389,7 +5373,7 @@ var PolyFirstPersonControls = forwardRef2(function PolyFirstPersonControls2(prop
 import { useEffect as useEffect7, useRef as useRef8 } from "react";
 
 // src/controls/sharedControls.ts
-import { BASE_TILE as BASE_TILE7 } from "@layoutit/polycss-core";
+import { BASE_TILE as BASE_TILE6 } from "@layoutit/polycss-core";
 var POINTER_DRAG_SPEED = 4;
 function invertFactor(invert) {
   if (invert === true) return -1;
@@ -5410,7 +5394,7 @@ function applyPan(dx, dy, s, handle, _invert) {
   const cosRotX = cosRotXRaw >= 0 ? Math.max(0.1, cosRotXRaw) : Math.min(-0.1, cosRotXRaw);
   const cZ = Math.cos(s.rotY * Math.PI / 180);
   const sZ = Math.sin(s.rotY * Math.PI / 180);
-  const k = z * BASE_TILE7;
+  const k = z * BASE_TILE6;
   const targetD0 = (dx * sZ - dy * cZ / cosRotX) / k;
   const targetD1 = -(dx * cZ + dy * sZ / cosRotX) / k;
   const t = s.target;
@@ -7277,8 +7261,9 @@ import {
   planePolygons as planePolygons3,
   buildSceneContext as buildSceneContext2,
   buildPolyMeshTransform as buildPolyMeshTransform2,
+  buildPolySceneTransform as buildPolySceneTransform2,
   computeSceneBbox as computeSceneBbox2,
-  BASE_TILE as BASE_TILE8,
+  BASE_TILE as BASE_TILE7,
   DEFAULT_CAMERA_STATE as DEFAULT_CAMERA_STATE2,
   DEFAULT_PROJECTION,
   normalizeInvertMultiplier,
@@ -7289,11 +7274,15 @@ import {
   LoopOnce,
   LoopRepeat,
   LoopPingPong,
+  cssDistanceToWorld,
+  cssPositionToWorld,
+  worldDistanceToCss,
   worldDirectionToCss as worldDirectionToCss3,
+  worldDirectionalLightToCss as worldDirectionalLightToCss2,
   worldPositionToCss
 } from "@layoutit/polycss-core";
 export {
-  BASE_TILE8 as BASE_TILE,
+  BASE_TILE7 as BASE_TILE,
   CAMERA_BACKFACE_CULL_EPS,
   DEFAULT_CAMERA_STATE2 as DEFAULT_CAMERA_STATE,
   DEFAULT_PROJECTION,
@@ -7337,6 +7326,7 @@ export {
   bakeSolidTextureSamples,
   boxPolygons2 as boxPolygons,
   buildPolyMeshTransform2 as buildPolyMeshTransform,
+  buildPolySceneTransform2 as buildPolySceneTransform,
   buildSceneContext2 as buildSceneContext,
   cameraCullNormalGroups,
   cameraCullNormalGroupsFromPolygons,
@@ -7383,6 +7373,8 @@ export {
   parseVox,
   planePolygons3 as planePolygons,
   pointInMeshElement,
+  cssDistanceToWorld as polyCssDistanceToWorld,
+  cssPositionToWorld as polyCssPositionToWorld,
   polygonCssSurfaceNormal,
   polygonFaces,
   polygonFacesCamera,
@@ -7407,5 +7399,7 @@ export {
   usePolySelect,
   usePolySelectionApi,
   worldDirectionToCss3 as worldDirectionToPolyCss,
+  worldDirectionalLightToCss2 as worldDirectionalLightToPolyCss,
+  worldDistanceToCss as worldDistanceToPolyCss,
   worldPositionToCss as worldPositionToPolyCss
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layoutit/polycss-react",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "React components for the CSS-based polygon mesh rendering engine",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -41,7 +41,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@layoutit/polycss-core": "^0.2.3"
+    "@layoutit/polycss-core": "^0.2.5"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",