@glyphcss/react 0.0.5 → 0.0.7

package/dist/index.cjs

@@ -303,12 +303,14 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 function GlyphMeshInner({
   id,
   polygons: polygonsProp,
+  src,
   geometry,
   size = 1,
   color,
   position,
   scale,
   rotation,
+  autoCenter = false,
   castShadow = false,
   receiveShadow = false,
   className,
@@ -318,11 +320,26 @@ function GlyphMeshInner({
   const { sceneRef } = useGlyphSceneContext();
   const meshRef = (0, import_react4.useRef)(null);
   const wrapperRef = (0, import_react4.useRef)(null);
+  const [loadedPolygons, setLoadedPolygons] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
+    if (!src) {
+      setLoadedPolygons(null);
+      return;
+    }
+    let cancelled = false;
+    (0, import_core.loadMesh)(src).then((result) => {
+      if (!cancelled) setLoadedPolygons(result.polygons);
+    }).catch(() => {
+      if (!cancelled) setLoadedPolygons([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
   const polygons = (0, import_react4.useMemo)(() => {
-    if (polygonsProp !== void 0) return polygonsProp;
-    if (geometry !== void 0) return (0, import_core.resolveGeometry)(geometry, { size, color });
-    return [];
-  }, [polygonsProp, geometry, size, color]);
+    const base = polygonsProp !== void 0 ? polygonsProp : src !== void 0 ? loadedPolygons ?? [] : geometry !== void 0 ? (0, import_core.resolveGeometry)(geometry, { size, color }) : [];
+    return autoCenter ? (0, import_core.recenterPolygons)(base) : base;
+  }, [polygonsProp, src, loadedPolygons, geometry, size, color, autoCenter]);
   const transform = (0, import_react4.useMemo)(() => ({
     id,
     position,
@@ -683,28 +700,15 @@ function GlyphMapControls({
 // src/glyphcss/controls/GlyphFirstPersonControls.tsx
 var import_react13 = require("react");
 var import_glyphcss7 = require("glyphcss");
-function GlyphFirstPersonControls({
-  drag = true,
-  keyboard = true,
-  moveSpeed = 0.05,
-  lookSpeed = 4e-3,
-  invert = false
-}) {
+function GlyphFirstPersonControls(props) {
   const { sceneRef } = useGlyphSceneContext();
   const controlsRef = (0, import_react13.useRef)(null);
-  const propsRef = (0, import_react13.useRef)({ drag, keyboard, moveSpeed, lookSpeed, invert });
-  propsRef.current = { drag, keyboard, moveSpeed, lookSpeed, invert };
+  const propsRef = (0, import_react13.useRef)(props);
+  propsRef.current = props;
   (0, import_react13.useEffect)(() => {
     const scene = sceneRef.current;
     if (!scene) return;
-    const opts = {
-      drag: propsRef.current.drag,
-      keyboard: propsRef.current.keyboard,
-      moveSpeed: propsRef.current.moveSpeed,
-      lookSpeed: propsRef.current.lookSpeed,
-      invert: propsRef.current.invert
-    };
-    const controls = (0, import_glyphcss7.createGlyphFirstPersonControls)(scene, opts);
+    const controls = (0, import_glyphcss7.createGlyphFirstPersonControls)(scene, propsRef.current);
     controlsRef.current = controls;
     return () => {
       controls.destroy();
@@ -712,9 +716,7 @@ function GlyphFirstPersonControls({
     };
   }, [sceneRef]);
   (0, import_react13.useEffect)(() => {
-    const controls = controlsRef.current;
-    if (!controls) return;
-    controls.update({ drag, keyboard, moveSpeed, lookSpeed, invert });
+    controlsRef.current?.update(props);
   });
   return null;
 }

package/dist/index.d.cts

@@ -43,6 +43,8 @@ declare const GlyphScene: react.MemoExoticComponent<typeof GlyphSceneInner>;
 interface GlyphMeshProps {
     id?: string;
     polygons?: Polygon[];
+    /** URL of an OBJ / GLB / glTF / VOX / STL mesh, fetched + parsed via `loadMesh`. */
+    src?: string;
     /**
      * Built-in geometry name. Resolved via `resolveGeometry` when neither
      * `polygons` nor `src` is provided.
@@ -57,6 +59,11 @@ interface GlyphMeshProps {
     position?: Vec3;
     scale?: number | Vec3;
     rotation?: Vec3;
+    /**
+     * Recenter the mesh's bounding-box center to the origin so it pivots around
+     * its own center (center only, no scaling — matches voxcss). Default false.
+     */
+    autoCenter?: boolean;
     /**
      * This mesh casts shadows onto `receiveShadow` surfaces.
      * Default false — opt-in, matching PolyMesh behaviour.
@@ -79,7 +86,7 @@ interface GlyphMeshProps {
     onClick?: (event: GlyphMouseEvent) => void;
     onWheel?: (event: GlyphWheelEvent) => void;
 }
-declare function GlyphMeshInner({ id, polygons: polygonsProp, geometry, size, color, position, scale, rotation, castShadow, receiveShadow, className, style, children, }: GlyphMeshProps): react_jsx_runtime.JSX.Element;
+declare function GlyphMeshInner({ id, polygons: polygonsProp, src, geometry, size, color, position, scale, rotation, autoCenter, castShadow, receiveShadow, className, style, children, }: GlyphMeshProps): react_jsx_runtime.JSX.Element;
 declare const GlyphMesh: react.MemoExoticComponent<typeof GlyphMeshInner>;
 
 interface GlyphGroundProps {
@@ -229,13 +236,23 @@ interface GlyphMapControlsProps {
 declare function GlyphMapControls({ drag, wheel, invert, animate, }: GlyphMapControlsProps): null;
 
 interface GlyphFirstPersonControlsProps {
-    drag?: boolean;
-    keyboard?: boolean;
+    enabled?: boolean;
+    lookEnabled?: boolean;
+    moveEnabled?: boolean;
+    jumpEnabled?: boolean;
+    crouchEnabled?: boolean;
+    lookSensitivity?: number;
+    invertY?: boolean;
     moveSpeed?: number;
-    lookSpeed?: number;
-    invert?: boolean | number;
+    jumpVelocity?: number;
+    gravity?: number;
+    eyeHeight?: number;
+    crouchHeight?: number;
+    groundZ?: number;
+    minPitch?: number;
+    maxPitch?: number;
 }
-declare function GlyphFirstPersonControls({ drag, keyboard, moveSpeed, lookSpeed, invert, }: GlyphFirstPersonControlsProps): null;
+declare function GlyphFirstPersonControls(props: GlyphFirstPersonControlsProps): null;
 
 interface GlyphAxesHelperProps {
     /** Length of each axis bar in world units. Default 1. */

package/dist/index.d.ts

@@ -43,6 +43,8 @@ declare const GlyphScene: react.MemoExoticComponent<typeof GlyphSceneInner>;
 interface GlyphMeshProps {
     id?: string;
     polygons?: Polygon[];
+    /** URL of an OBJ / GLB / glTF / VOX / STL mesh, fetched + parsed via `loadMesh`. */
+    src?: string;
     /**
      * Built-in geometry name. Resolved via `resolveGeometry` when neither
      * `polygons` nor `src` is provided.
@@ -57,6 +59,11 @@ interface GlyphMeshProps {
     position?: Vec3;
     scale?: number | Vec3;
     rotation?: Vec3;
+    /**
+     * Recenter the mesh's bounding-box center to the origin so it pivots around
+     * its own center (center only, no scaling — matches voxcss). Default false.
+     */
+    autoCenter?: boolean;
     /**
      * This mesh casts shadows onto `receiveShadow` surfaces.
      * Default false — opt-in, matching PolyMesh behaviour.
@@ -79,7 +86,7 @@ interface GlyphMeshProps {
     onClick?: (event: GlyphMouseEvent) => void;
     onWheel?: (event: GlyphWheelEvent) => void;
 }
-declare function GlyphMeshInner({ id, polygons: polygonsProp, geometry, size, color, position, scale, rotation, castShadow, receiveShadow, className, style, children, }: GlyphMeshProps): react_jsx_runtime.JSX.Element;
+declare function GlyphMeshInner({ id, polygons: polygonsProp, src, geometry, size, color, position, scale, rotation, autoCenter, castShadow, receiveShadow, className, style, children, }: GlyphMeshProps): react_jsx_runtime.JSX.Element;
 declare const GlyphMesh: react.MemoExoticComponent<typeof GlyphMeshInner>;
 
 interface GlyphGroundProps {
@@ -229,13 +236,23 @@ interface GlyphMapControlsProps {
 declare function GlyphMapControls({ drag, wheel, invert, animate, }: GlyphMapControlsProps): null;
 
 interface GlyphFirstPersonControlsProps {
-    drag?: boolean;
-    keyboard?: boolean;
+    enabled?: boolean;
+    lookEnabled?: boolean;
+    moveEnabled?: boolean;
+    jumpEnabled?: boolean;
+    crouchEnabled?: boolean;
+    lookSensitivity?: number;
+    invertY?: boolean;
     moveSpeed?: number;
-    lookSpeed?: number;
-    invert?: boolean | number;
+    jumpVelocity?: number;
+    gravity?: number;
+    eyeHeight?: number;
+    crouchHeight?: number;
+    groundZ?: number;
+    minPitch?: number;
+    maxPitch?: number;
 }
-declare function GlyphFirstPersonControls({ drag, keyboard, moveSpeed, lookSpeed, invert, }: GlyphFirstPersonControlsProps): null;
+declare function GlyphFirstPersonControls(props: GlyphFirstPersonControlsProps): null;
 
 interface GlyphAxesHelperProps {
     /** Length of each axis bar in world units. Default 1. */

package/dist/index.js

@@ -23,7 +23,7 @@ import {
   parseGltf,
   bakeSolidTextureSamples,
   bakeSolidTextureSampledPolygons,
-  loadMesh,
+  loadMesh as loadMesh2,
   createIsometricCamera,
   parseVox,
   polygonFaces,
@@ -213,8 +213,8 @@ function GlyphSceneInner({
 var GlyphScene = memo(GlyphSceneInner);
 
 // src/glyphcss/scene/GlyphMesh.tsx
-import { memo as memo2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
-import { resolveGeometry } from "@glyphcss/core";
+import { memo as memo2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState } from "react";
+import { resolveGeometry, recenterPolygons, loadMesh } from "@glyphcss/core";
 
 // src/glyphcss/scene/events.ts
 var MESH_REGISTRY = /* @__PURE__ */ new WeakMap();
@@ -259,12 +259,14 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 function GlyphMeshInner({
   id,
   polygons: polygonsProp,
+  src,
   geometry,
   size = 1,
   color,
   position,
   scale,
   rotation,
+  autoCenter = false,
   castShadow = false,
   receiveShadow = false,
   className,
@@ -274,11 +276,26 @@ function GlyphMeshInner({
   const { sceneRef } = useGlyphSceneContext();
   const meshRef = useRef2(null);
   const wrapperRef = useRef2(null);
+  const [loadedPolygons, setLoadedPolygons] = useState(null);
+  useEffect2(() => {
+    if (!src) {
+      setLoadedPolygons(null);
+      return;
+    }
+    let cancelled = false;
+    loadMesh(src).then((result) => {
+      if (!cancelled) setLoadedPolygons(result.polygons);
+    }).catch(() => {
+      if (!cancelled) setLoadedPolygons([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
   const polygons = useMemo2(() => {
-    if (polygonsProp !== void 0) return polygonsProp;
-    if (geometry !== void 0) return resolveGeometry(geometry, { size, color });
-    return [];
-  }, [polygonsProp, geometry, size, color]);
+    const base = polygonsProp !== void 0 ? polygonsProp : src !== void 0 ? loadedPolygons ?? [] : geometry !== void 0 ? resolveGeometry(geometry, { size, color }) : [];
+    return autoCenter ? recenterPolygons(base) : base;
+  }, [polygonsProp, src, loadedPolygons, geometry, size, color, autoCenter]);
   const transform = useMemo2(() => ({
     id,
     position,
@@ -365,7 +382,7 @@ function GlyphGroundInner({
 var GlyphGround = memo3(GlyphGroundInner);
 
 // src/glyphcss/scene/GlyphHotspot.tsx
-import { memo as memo4, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState } from "react";
+import { memo as memo4, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 function GlyphHotspotInner({
   id,
@@ -379,7 +396,7 @@ function GlyphHotspotInner({
   const hotspotRef = useRef3(null);
   const onClickRef = useRef3(onClick);
   onClickRef.current = onClick;
-  const [overlayEl, setOverlayEl] = useState(null);
+  const [overlayEl, setOverlayEl] = useState2(null);
   const atKey = useMemo4(() => at.join(","), [at]);
   const sizeKey = size ? size.join(",") : "";
   useEffect3(() => {
@@ -414,11 +431,11 @@ function GlyphHotspotInner({
 var GlyphHotspot = memo4(GlyphHotspotInner);
 
 // src/glyphcss/scene/useGlyphMesh.ts
-import { useEffect as useEffect4, useRef as useRef4, useState as useState2 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
 function useGlyphMesh(polygons, options) {
   const { sceneRef } = useGlyphSceneContext();
   const meshRef = useRef4(null);
-  const [loading] = useState2(false);
+  const [loading] = useState3(false);
   useEffect4(() => {
     const scene = sceneRef.current;
     if (!scene) return;
@@ -639,28 +656,15 @@ function GlyphMapControls({
 // src/glyphcss/controls/GlyphFirstPersonControls.tsx
 import { useEffect as useEffect9, useRef as useRef10 } from "react";
 import { createGlyphFirstPersonControls } from "glyphcss";
-function GlyphFirstPersonControls({
-  drag = true,
-  keyboard = true,
-  moveSpeed = 0.05,
-  lookSpeed = 4e-3,
-  invert = false
-}) {
+function GlyphFirstPersonControls(props) {
   const { sceneRef } = useGlyphSceneContext();
   const controlsRef = useRef10(null);
-  const propsRef = useRef10({ drag, keyboard, moveSpeed, lookSpeed, invert });
-  propsRef.current = { drag, keyboard, moveSpeed, lookSpeed, invert };
+  const propsRef = useRef10(props);
+  propsRef.current = props;
   useEffect9(() => {
     const scene = sceneRef.current;
     if (!scene) return;
-    const opts = {
-      drag: propsRef.current.drag,
-      keyboard: propsRef.current.keyboard,
-      moveSpeed: propsRef.current.moveSpeed,
-      lookSpeed: propsRef.current.lookSpeed,
-      invert: propsRef.current.invert
-    };
-    const controls = createGlyphFirstPersonControls(scene, opts);
+    const controls = createGlyphFirstPersonControls(scene, propsRef.current);
     controlsRef.current = controls;
     return () => {
       controls.destroy();
@@ -668,9 +672,7 @@ function GlyphFirstPersonControls({
     };
   }, [sceneRef]);
   useEffect9(() => {
-    const controls = controlsRef.current;
-    if (!controls) return;
-    controls.update({ drag, keyboard, moveSpeed, lookSpeed, invert });
+    controlsRef.current?.update(props);
   });
   return null;
 }
@@ -903,7 +905,7 @@ export {
   inverseRotateVec3,
   isAxisAlignedSurfaceNormal,
   isVoxelCameraCullableNormalGroups,
-  loadMesh,
+  loadMesh2 as loadMesh,
   mergePolygons,
   normalFacesCamera,
   normalizeInvertMultiplier,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glyphcss/react",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "React components for the glyphcss ASCII polygon mesh rendering engine",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -40,8 +40,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@glyphcss/core": "^0.0.5",
-    "glyphcss": "^0.0.5"
+    "glyphcss": "^0.0.7",
+    "@glyphcss/core": "^0.0.7"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",