dikshantp/ar-test
1
0
Fork 0
forked from rajun/ar-test
Code Pull Requests Activity

refactor: extract model-viewer types to global.d.ts and rename AR viewer entry file

Browse Source
This commit is contained in:
rajun 2026-07-28 11:12:01 +05:30
parent d720a6cc86
commit 5ce5a2ab9d
2 changed files with 38 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/global.d.ts vendored Normal file
View File

@ -0,0 +1,37 @@
import * as React from 'react';
declare module 'react' {
namespace JSX {
interface IntrinsicElements {
'model-viewer': React.DetailedHTMLProps<
React.HTMLAttributes<HTMLElement> & {
src?: string;
'ios-src'?: string;
ar?: boolean;
'ar-modes'?: string;
'ar-scale'?: string;
'ar-placement'?: string;
'camera-controls'?: boolean;
'touch-action'?: string;
alt?: string;
'shadow-intensity'?: string | number;
'shadow-softness'?: string | number;
exposure?: string | number;
'interaction-prompt'?: string;
'min-camera-orbit'?: string;
'max-camera-orbit'?: string;
'camera-orbit'?: string;
'field-of-view'?: string;
scale?: string;
'auto-rotate'?: boolean;
'rotation-per-second'?: string;
onLoad?: (e: any) => void;
'onAr-status'?: (e: any) => void;
'onModel-visibility'?: (e: any) => void;
'onCamera-change'?: (e: any) => void;
},
HTMLElement
>;
}
}
}

45
app/qr-ar/ar-viewer.tsx → app/routes/ar/ar-viewer.tsx
View File

@ -4,48 +4,7 @@ import { useParams } from 'react-router';
import { Box } from 'lucide-react'; import { Box } from 'lucide-react';
import { pb } from '~/lib/pocketbase'; import { pb } from '~/lib/pocketbase';
// --- A-FRAME/AR.JS CUSTOM ELEMENTS TYPING FIX ---
declare module 'react' {
namespace JSX {
interface IntrinsicElements {
'a-scene': any;
'a-assets': any;
'a-asset-item': any;
'a-marker': any;
'a-entity': any;
'a-text': any;
'model-viewer': React.DetailedHTMLProps<
React.HTMLAttributes<HTMLElement>,
HTMLElement
> & {
src?: string;
'ios-src'?: string;
ar?: boolean;
'ar-modes'?: string;
'ar-scale'?: string;
'ar-placement'?: string;
'camera-controls'?: boolean;
'touch-action'?: string;
alt?: string;
'shadow-intensity'?: string | number;
'shadow-softness'?: string | number;
exposure?: string | number;
'interaction-prompt'?: string;
'min-camera-orbit'?: string;
'max-camera-orbit'?: string;
'camera-orbit'?: string;
'field-of-view'?: string;
scale?: string;
'auto-rotate'?: boolean;
'rotation-per-second'?: string;
onLoad?: (e: any) => void;
'onAr-status'?: (e: any) => void;
'onModel-visibility'?: (e: any) => void;
'onCamera-change'?: (e: any) => void;
};
}
}
}
const AR_HINTS = [ const AR_HINTS = [
'Arranging models to view…', 'Arranging models to view…',
@ -69,9 +28,7 @@ export default function ARViewer() {
useEffect(() => { useEffect(() => {
if (!id) return; if (!id) return;
const loadAsset = async () => { const loadAsset = async () => {
// const response = await fetch(`https://thobapi.bopconsultancy.com/v2/ar-assets/${id}`);
const data = await pb.collection('ar_assets').getOne(id); const data = await pb.collection('ar_assets').getOne(id);
// const data = await response.json();
setAsset(data); setAsset(data);
}; };
loadAsset(); loadAsset();