refactor: simplify upload UI and enforce glb-only preview
This commit is contained in:
+3
-3
@@ -9,14 +9,14 @@ export default function Home() {
|
|||||||
</h1>
|
</h1>
|
||||||
<p className="text-gray-400 text-base leading-relaxed">
|
<p className="text-gray-400 text-base leading-relaxed">
|
||||||
Deposez vos fichiers 3D — ils seront archives sur le Drive
|
Deposez vos fichiers 3D — ils seront archives sur le Drive
|
||||||
<br />avec versioning, puis envoyes aux devs via GitHub.
|
<br />avec versioning, puis envoyes aux devs via GitHub
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<UploadZone />
|
<UploadZone />
|
||||||
|
|
||||||
<footer className="mt-10 text-gray-500 text-xs text-center">
|
<footer className="text-gray-500 text-xs text-center">
|
||||||
Modeles : <span className="font-mono text-gray-400">.glb · .gltf</span>
|
Modeles : <span className="font-mono text-gray-400">.glb</span>
|
||||||
<span className="mx-2">·</span>
|
<span className="mx-2">·</span>
|
||||||
Textures : <span className="font-mono text-gray-400">.png · .jpg · .webp</span>
|
Textures : <span className="font-mono text-gray-400">.png · .jpg · .webp</span>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@@ -9,9 +9,12 @@ interface ModelViewerProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
|
export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
|
||||||
|
const canPreview = filename.toLowerCase().endsWith('.glb')
|
||||||
const [Scene, setScene] = useState<React.ComponentType<{ url: string }> | null>(null)
|
const [Scene, setScene] = useState<React.ComponentType<{ url: string }> | null>(null)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (!canPreview) return
|
||||||
|
|
||||||
let cancel = false
|
let cancel = false
|
||||||
|
|
||||||
import('./SceneViewer').then((mod) => {
|
import('./SceneViewer').then((mod) => {
|
||||||
@@ -19,7 +22,17 @@ export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
|
|||||||
})
|
})
|
||||||
|
|
||||||
return () => { cancel = true }
|
return () => { cancel = true }
|
||||||
}, [])
|
}, [canPreview])
|
||||||
|
|
||||||
|
if (!canPreview) {
|
||||||
|
return (
|
||||||
|
<div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden flex items-center justify-center">
|
||||||
|
<p className="text-sm text-gray-400 px-6 text-center">
|
||||||
|
La preview 3D locale est disponible uniquement pour les fichiers <span className="font-mono">.glb</span>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
if (!Scene) {
|
if (!Scene) {
|
||||||
return (
|
return (
|
||||||
@@ -42,4 +55,4 @@ export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
|
|||||||
<Scene url={url} />
|
<Scene url={url} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
+18
-15
@@ -72,6 +72,23 @@ export default function UploadZone() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full max-w-2xl space-y-4">
|
<div className="w-full max-w-2xl space-y-4">
|
||||||
|
{entries.length === 0 && (
|
||||||
|
<p className="rounded-2xl border border-white/20 bg-black-800 px-4 py-3 text-xs text-gray-400 leading-relaxed text-center mb-3">
|
||||||
|
Deposez un dossier complet contenant votre modele 3D nomme
|
||||||
|
{' '}<span className="font-mono text-gray-200">model.glb</span>
|
||||||
|
{' '}ainsi que toutes les textures necessaires.
|
||||||
|
{' '}Les textures peuvent etre en
|
||||||
|
{' '}<span className="font-mono text-gray-200">.png</span>,
|
||||||
|
{' '}<span className="font-mono text-gray-200">.jpg</span>
|
||||||
|
{' '}ou <span className="font-mono text-gray-200">.webp</span>.
|
||||||
|
{' '}Utilisez un nom simple si la texture s'applique au modele entier, et un nom detaille si elle correspond a une partie precise du modele,
|
||||||
|
{' '}par exemple <span className="font-mono text-gray-200">color_porte.jpg</span>,
|
||||||
|
{' '}<span className="font-mono text-gray-200">roughness_tuyaux.png</span>,
|
||||||
|
{' '}<span className="font-mono text-gray-200">normal_dashboard.webp</span>
|
||||||
|
{' '}ou <span className="font-mono text-gray-200">opacity_fenetre.png</span>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
<SecretInput
|
<SecretInput
|
||||||
secret={secret}
|
secret={secret}
|
||||||
secretVisible={secretVisible}
|
secretVisible={secretVisible}
|
||||||
@@ -82,21 +99,7 @@ export default function UploadZone() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{entries.length === 0 && (
|
{entries.length === 0 && (
|
||||||
<div className="space-y-2">
|
<div>
|
||||||
<p className="text-xs text-gray-400 leading-relaxed text-center">
|
|
||||||
Deposez un dossier complet contenant votre modele 3D nomme
|
|
||||||
{' '}<span className="font-mono text-gray-200">model.glb</span>
|
|
||||||
{' '}ainsi que toutes les textures necessaires.
|
|
||||||
{' '}Les textures peuvent etre en
|
|
||||||
{' '}<span className="font-mono text-gray-200">.png</span>,
|
|
||||||
{' '}<span className="font-mono text-gray-200">.jpg</span>
|
|
||||||
{' '}ou <span className="font-mono text-gray-200">.webp</span>.
|
|
||||||
{' '}Utilisez un nom simple si la texture s'applique au modele entier, et un nom detaille si elle correspond a une partie precise du modele,
|
|
||||||
{' '}par exemple <span className="font-mono text-gray-200">color_fenetre.jpg</span>,
|
|
||||||
{' '}<span className="font-mono text-gray-200">roughness_tuyaux.png</span>,
|
|
||||||
{' '}<span className="font-mono text-gray-200">normal_dashboard.webp</span>
|
|
||||||
{' '}ou <span className="font-mono text-gray-200">opacity_verre.png</span>.
|
|
||||||
</p>
|
|
||||||
<FolderDropzone
|
<FolderDropzone
|
||||||
isUploading={isUploading}
|
isUploading={isUploading}
|
||||||
onFolderSelected={handleFolderSelected}
|
onFolderSelected={handleFolderSelected}
|
||||||
|
|||||||
@@ -67,7 +67,9 @@ export default function FolderDropzone({
|
|||||||
status: 'pending',
|
status: 'pending',
|
||||||
progress: 0,
|
progress: 0,
|
||||||
warnings: validation.warnings,
|
warnings: validation.warnings,
|
||||||
modelUrl: URL.createObjectURL(validation.model),
|
modelUrl: validation.model.name.toLowerCase() === 'model.glb'
|
||||||
|
? URL.createObjectURL(validation.model)
|
||||||
|
: undefined,
|
||||||
viewerOpen: true,
|
viewerOpen: true,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user