@aether-stack-dev/client-sdk 1.3.1 → 1.3.2

package/dist/avatar/VRMAvatar.d.ts

@@ -33,6 +33,7 @@ export interface VRMAvatarProps {
     environmentBlur?: number;
     environmentZoom?: number;
     onEnvironmentLoad?: () => void;
+    onEnvironmentProgress?: (loaded: number, total: number) => void;
     features?: VRMAvatarFeatures;
     orbitAngle?: number;
     orbitElevation?: number;
@@ -41,5 +42,5 @@ export interface VRMAvatarProps {
     cursorFollow?: boolean;
     preserveDrawingBuffer?: boolean;
 }
-export declare function VRMAvatar({ blendshapes, width, height, modelUrl, backgroundColor, blendshapeMap, expressionOverrides, onModelLoad, maxModelSize, cameraPosition, cameraTarget, cameraFov, lightIntensity, idleAnimationUrl, animationSpeed, animationWeight, animationCrossfade, postProcessing, environmentUrl, environmentIntensity, environmentBlur, environmentZoom, onEnvironmentLoad, features, orbitAngle, orbitElevation, avatarRotation, onOrbitChange, cursorFollow, preserveDrawingBuffer, }: VRMAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function VRMAvatar({ blendshapes, width, height, modelUrl, backgroundColor, blendshapeMap, expressionOverrides, onModelLoad, maxModelSize, cameraPosition, cameraTarget, cameraFov, lightIntensity, idleAnimationUrl, animationSpeed, animationWeight, animationCrossfade, postProcessing, environmentUrl, environmentIntensity, environmentBlur, environmentZoom, onEnvironmentLoad, onEnvironmentProgress, features, orbitAngle, orbitElevation, avatarRotation, onOrbitChange, cursorFollow, preserveDrawingBuffer, }: VRMAvatarProps): import("react/jsx-runtime").JSX.Element;
 export default VRMAvatar;

package/dist/avatar/environment.d.ts

@@ -3,4 +3,4 @@ export interface EnvironmentResult {
     envMap: THREE.Texture;
     dispose: () => void;
 }
-export declare function loadEnvironment(renderer: THREE.WebGLRenderer, url: string): Promise<EnvironmentResult>;
+export declare function loadEnvironment(renderer: THREE.WebGLRenderer, url: string, onProgress?: (loaded: number, total: number) => void): Promise<EnvironmentResult>;

package/dist/react.esm.js

@@ -943,7 +943,7 @@ function getKTX2Loader(renderer) {
     }
     return ktx2Loader;
 }
-function loadEnvironment(renderer, url) {
+function loadEnvironment(renderer, url, onProgress) {
     const cleanUrl = url.split('?')[0].split('#')[0].toLowerCase();
     // For blob URLs, the filename is passed as a hash fragment (e.g. blob:...#file.ktx2)
     const hash = (url.split('#')[1] || '').toLowerCase();
@@ -985,22 +985,25 @@ function loadEnvironment(renderer, url) {
                 rt.dispose();
                 pmrem.dispose();
                 resolve({ envMap, dispose: () => envMap.dispose() });
-            }, undefined, reject);
+            }, (e) => { if (onProgress && e.lengthComputable)
+                onProgress(e.loaded, e.total); }, reject);
         });
     }
     return new Promise((resolve, reject) => {
         const onLoad = (texture) => resolve(finalize(texture));
+        const handleProgress = (e) => { if (onProgress && e.lengthComputable)
+            onProgress(e.loaded, e.total); };
         if (cleanUrl.endsWith('.exr') || hashExt === '.exr') {
-            new EXRLoader().load(url, onLoad, undefined, reject);
+            new EXRLoader().load(url, onLoad, handleProgress, reject);
         }
         else {
-            new HDRLoader().load(url, onLoad, undefined, reject);
+            new HDRLoader().load(url, onLoad, handleProgress, reject);
         }
     });
 }
 
 const DEFAULT_MAX_MODEL_SIZE = 30 * 1024 * 1024; // 30MB
-function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https://xwqtyabmavpacejuypyp.supabase.co/storage/v1/object/public/vrm-templates/5705015963733407866.vrm', backgroundColor = 0xffffff, blendshapeMap, expressionOverrides, onModelLoad, maxModelSize = DEFAULT_MAX_MODEL_SIZE, cameraPosition, cameraTarget, cameraFov, lightIntensity, idleAnimationUrl, animationSpeed = 1, animationWeight = 1, animationCrossfade = 0.5, postProcessing, environmentUrl, environmentIntensity, environmentBlur, environmentZoom, onEnvironmentLoad, features, orbitAngle, orbitElevation, avatarRotation, onOrbitChange, cursorFollow = true, preserveDrawingBuffer = false, }) {
+function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https://xwqtyabmavpacejuypyp.supabase.co/storage/v1/object/public/vrm-templates/5705015963733407866.vrm', backgroundColor = 0xffffff, blendshapeMap, expressionOverrides, onModelLoad, maxModelSize = DEFAULT_MAX_MODEL_SIZE, cameraPosition, cameraTarget, cameraFov, lightIntensity, idleAnimationUrl, animationSpeed = 1, animationWeight = 1, animationCrossfade = 0.5, postProcessing, environmentUrl, environmentIntensity, environmentBlur, environmentZoom, onEnvironmentLoad, onEnvironmentProgress, features, orbitAngle, orbitElevation, avatarRotation, onOrbitChange, cursorFollow = true, preserveDrawingBuffer = false, }) {
     const containerRef = useRef(null);
     const rendererRef = useRef(null);
     const sceneRef = useRef(null);
@@ -1023,6 +1026,8 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https:/
     envZoomRef.current = environmentZoom;
     const onEnvLoadRef = useRef(onEnvironmentLoad);
     onEnvLoadRef.current = onEnvironmentLoad;
+    const onEnvProgressRef = useRef(onEnvironmentProgress);
+    onEnvProgressRef.current = onEnvironmentProgress;
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const animationFrameRef = useRef(0);
@@ -1406,7 +1411,16 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https:/
                 container.removeChild(renderer.domElement);
             }
         };
-    }, [width, height, modelUrl, maxModelSize, preserveDrawingBuffer]);
+    }, [modelUrl, maxModelSize, preserveDrawingBuffer]);
+    // Resize renderer + camera without rebuilding scene
+    useEffect(() => {
+        const renderer = rendererRef.current, camera = cameraRef.current;
+        if (!renderer || !camera)
+            return;
+        renderer.setSize(width, height);
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+    }, [width, height]);
     useEffect(() => {
         composerRef.current?.dispose();
         composerRef.current = null;
@@ -1516,7 +1530,7 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https:/
         }
         let cancelled = false;
         const prev = envMapRef.current;
-        loadEnvironment(renderer, environmentUrl).then(r => {
+        loadEnvironment(renderer, environmentUrl, (loaded, total) => onEnvProgressRef.current?.(loaded, total)).then(r => {
             if (cancelled) {
                 r.dispose();
                 return;
@@ -1648,6 +1662,32 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https:/
             }
             onOrbitChangeRef.current?.(o.targetAngle, o.targetElevation);
         };
+        const onTouchStart = (e) => {
+            if (e.touches.length !== 1)
+                return;
+            e.preventDefault();
+            const t = e.touches[0];
+            orbitRef.current.dragging = true;
+            orbitRef.current.lastX = t.clientX;
+            orbitRef.current.lastY = t.clientY;
+        };
+        const onTouchMove = (e) => {
+            if (!orbitRef.current.dragging || e.touches.length !== 1)
+                return;
+            e.preventDefault();
+            const t = e.touches[0];
+            const dx = t.clientX - orbitRef.current.lastX;
+            const dy = t.clientY - orbitRef.current.lastY;
+            orbitRef.current.lastX = t.clientX;
+            orbitRef.current.lastY = t.clientY;
+            orbitRef.current.angle -= dx * 0.005;
+            orbitRef.current.targetAngle = orbitRef.current.angle;
+            orbitRef.current.elevation = Math.max(-Math.PI / 3, Math.min(Math.PI / 3, orbitRef.current.elevation + dy * 0.005));
+            orbitRef.current.targetElevation = orbitRef.current.elevation;
+            applyCameraOrbit();
+            onOrbitChangeRef.current?.(orbitRef.current.angle, orbitRef.current.elevation);
+        };
+        const onTouchEnd = () => { orbitRef.current.dragging = false; };
         const onCursorMove = (e) => {
             const rect = container.getBoundingClientRect();
             cursorRef.current.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
@@ -1655,8 +1695,12 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https:/
             cursorRef.current.active = true;
         };
         const onCursorLeave = () => { cursorRef.current.active = false; };
+        container.style.touchAction = 'none';
         container.addEventListener('wheel', onWheel, { passive: false });
         container.addEventListener('mousedown', onMouseDown);
+        container.addEventListener('touchstart', onTouchStart, { passive: false });
+        container.addEventListener('touchmove', onTouchMove, { passive: false });
+        container.addEventListener('touchend', onTouchEnd);
         container.addEventListener('mousemove', onCursorMove);
         container.addEventListener('mouseleave', onCursorLeave);
         window.addEventListener('mousemove', onMouseMove);
@@ -1665,6 +1709,9 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https:/
         return () => {
             container.removeEventListener('wheel', onWheel);
             container.removeEventListener('mousedown', onMouseDown);
+            container.removeEventListener('touchstart', onTouchStart);
+            container.removeEventListener('touchmove', onTouchMove);
+            container.removeEventListener('touchend', onTouchEnd);
             container.removeEventListener('mousemove', onCursorMove);
             container.removeEventListener('mouseleave', onCursorLeave);
             window.removeEventListener('mousemove', onMouseMove);

package/dist/react.js

@@ -964,7 +964,7 @@ function getKTX2Loader(renderer) {
     }
     return ktx2Loader;
 }
-function loadEnvironment(renderer, url) {
+function loadEnvironment(renderer, url, onProgress) {
     const cleanUrl = url.split('?')[0].split('#')[0].toLowerCase();
     // For blob URLs, the filename is passed as a hash fragment (e.g. blob:...#file.ktx2)
     const hash = (url.split('#')[1] || '').toLowerCase();
@@ -1006,22 +1006,25 @@ function loadEnvironment(renderer, url) {
                 rt.dispose();
                 pmrem.dispose();
                 resolve({ envMap, dispose: () => envMap.dispose() });
-            }, undefined, reject);
+            }, (e) => { if (onProgress && e.lengthComputable)
+                onProgress(e.loaded, e.total); }, reject);
         });
     }
     return new Promise((resolve, reject) => {
         const onLoad = (texture) => resolve(finalize(texture));
+        const handleProgress = (e) => { if (onProgress && e.lengthComputable)
+            onProgress(e.loaded, e.total); };
         if (cleanUrl.endsWith('.exr') || hashExt === '.exr') {
-            new EXRLoader_js.EXRLoader().load(url, onLoad, undefined, reject);
+            new EXRLoader_js.EXRLoader().load(url, onLoad, handleProgress, reject);
         }
         else {
-            new HDRLoader_js.HDRLoader().load(url, onLoad, undefined, reject);
+            new HDRLoader_js.HDRLoader().load(url, onLoad, handleProgress, reject);
         }
     });
 }
 
 const DEFAULT_MAX_MODEL_SIZE = 30 * 1024 * 1024; // 30MB
-function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https://xwqtyabmavpacejuypyp.supabase.co/storage/v1/object/public/vrm-templates/5705015963733407866.vrm', backgroundColor = 0xffffff, blendshapeMap, expressionOverrides, onModelLoad, maxModelSize = DEFAULT_MAX_MODEL_SIZE, cameraPosition, cameraTarget, cameraFov, lightIntensity, idleAnimationUrl, animationSpeed = 1, animationWeight = 1, animationCrossfade = 0.5, postProcessing, environmentUrl, environmentIntensity, environmentBlur, environmentZoom, onEnvironmentLoad, features, orbitAngle, orbitElevation, avatarRotation, onOrbitChange, cursorFollow = true, preserveDrawingBuffer = false, }) {
+function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https://xwqtyabmavpacejuypyp.supabase.co/storage/v1/object/public/vrm-templates/5705015963733407866.vrm', backgroundColor = 0xffffff, blendshapeMap, expressionOverrides, onModelLoad, maxModelSize = DEFAULT_MAX_MODEL_SIZE, cameraPosition, cameraTarget, cameraFov, lightIntensity, idleAnimationUrl, animationSpeed = 1, animationWeight = 1, animationCrossfade = 0.5, postProcessing, environmentUrl, environmentIntensity, environmentBlur, environmentZoom, onEnvironmentLoad, onEnvironmentProgress, features, orbitAngle, orbitElevation, avatarRotation, onOrbitChange, cursorFollow = true, preserveDrawingBuffer = false, }) {
     const containerRef = react.useRef(null);
     const rendererRef = react.useRef(null);
     const sceneRef = react.useRef(null);
@@ -1044,6 +1047,8 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https:/
     envZoomRef.current = environmentZoom;
     const onEnvLoadRef = react.useRef(onEnvironmentLoad);
     onEnvLoadRef.current = onEnvironmentLoad;
+    const onEnvProgressRef = react.useRef(onEnvironmentProgress);
+    onEnvProgressRef.current = onEnvironmentProgress;
     const [loading, setLoading] = react.useState(true);
     const [error, setError] = react.useState(null);
     const animationFrameRef = react.useRef(0);
@@ -1427,7 +1432,16 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https:/
                 container.removeChild(renderer.domElement);
             }
         };
-    }, [width, height, modelUrl, maxModelSize, preserveDrawingBuffer]);
+    }, [modelUrl, maxModelSize, preserveDrawingBuffer]);
+    // Resize renderer + camera without rebuilding scene
+    react.useEffect(() => {
+        const renderer = rendererRef.current, camera = cameraRef.current;
+        if (!renderer || !camera)
+            return;
+        renderer.setSize(width, height);
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+    }, [width, height]);
     react.useEffect(() => {
         composerRef.current?.dispose();
         composerRef.current = null;
@@ -1537,7 +1551,7 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https:/
         }
         let cancelled = false;
         const prev = envMapRef.current;
-        loadEnvironment(renderer, environmentUrl).then(r => {
+        loadEnvironment(renderer, environmentUrl, (loaded, total) => onEnvProgressRef.current?.(loaded, total)).then(r => {
             if (cancelled) {
                 r.dispose();
                 return;
@@ -1669,6 +1683,32 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https:/
             }
             onOrbitChangeRef.current?.(o.targetAngle, o.targetElevation);
         };
+        const onTouchStart = (e) => {
+            if (e.touches.length !== 1)
+                return;
+            e.preventDefault();
+            const t = e.touches[0];
+            orbitRef.current.dragging = true;
+            orbitRef.current.lastX = t.clientX;
+            orbitRef.current.lastY = t.clientY;
+        };
+        const onTouchMove = (e) => {
+            if (!orbitRef.current.dragging || e.touches.length !== 1)
+                return;
+            e.preventDefault();
+            const t = e.touches[0];
+            const dx = t.clientX - orbitRef.current.lastX;
+            const dy = t.clientY - orbitRef.current.lastY;
+            orbitRef.current.lastX = t.clientX;
+            orbitRef.current.lastY = t.clientY;
+            orbitRef.current.angle -= dx * 0.005;
+            orbitRef.current.targetAngle = orbitRef.current.angle;
+            orbitRef.current.elevation = Math.max(-Math.PI / 3, Math.min(Math.PI / 3, orbitRef.current.elevation + dy * 0.005));
+            orbitRef.current.targetElevation = orbitRef.current.elevation;
+            applyCameraOrbit();
+            onOrbitChangeRef.current?.(orbitRef.current.angle, orbitRef.current.elevation);
+        };
+        const onTouchEnd = () => { orbitRef.current.dragging = false; };
         const onCursorMove = (e) => {
             const rect = container.getBoundingClientRect();
             cursorRef.current.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
@@ -1676,8 +1716,12 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https:/
             cursorRef.current.active = true;
         };
         const onCursorLeave = () => { cursorRef.current.active = false; };
+        container.style.touchAction = 'none';
         container.addEventListener('wheel', onWheel, { passive: false });
         container.addEventListener('mousedown', onMouseDown);
+        container.addEventListener('touchstart', onTouchStart, { passive: false });
+        container.addEventListener('touchmove', onTouchMove, { passive: false });
+        container.addEventListener('touchend', onTouchEnd);
         container.addEventListener('mousemove', onCursorMove);
         container.addEventListener('mouseleave', onCursorLeave);
         window.addEventListener('mousemove', onMouseMove);
@@ -1686,6 +1730,9 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = 'https:/
         return () => {
             container.removeEventListener('wheel', onWheel);
             container.removeEventListener('mousedown', onMouseDown);
+            container.removeEventListener('touchstart', onTouchStart);
+            container.removeEventListener('touchmove', onTouchMove);
+            container.removeEventListener('touchend', onTouchEnd);
             container.removeEventListener('mousemove', onCursorMove);
             container.removeEventListener('mouseleave', onCursorLeave);
             window.removeEventListener('mousemove', onMouseMove);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aether-stack-dev/client-sdk",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "type": "module",
   "description": "JavaScript/TypeScript SDK for AStack video-to-video AI conversations",
   "main": "dist/index.js",