61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
'use client'
|
||
|
||
import React, { useState } from 'react'
|
||
import ModelViewer from '../components/ModelViewer'
|
||
|
||
export default function Home() {
|
||
const [modelInfo, setModelInfo] = useState<{
|
||
meshes: unknown[]
|
||
boundingBox: {
|
||
min: { x: number; y: number; z: number }
|
||
max: { x: number; y: number; z: number }
|
||
}
|
||
} | null>(null)
|
||
const [error, setError] = useState<string | null>(null)
|
||
|
||
const handleModelLoaded = (data: {
|
||
meshes: unknown[]
|
||
boundingBox: {
|
||
min: { x: number; y: number; z: number }
|
||
max: { x: number; y: number; z: number }
|
||
}
|
||
}) => {
|
||
setModelInfo(data)
|
||
setError(null)
|
||
console.log('Model loaded successfully:', data)
|
||
}
|
||
|
||
const handleError = (errorMessage: string) => {
|
||
setError(errorMessage)
|
||
setModelInfo(null)
|
||
}
|
||
|
||
return (
|
||
<div className="h-screen relative">
|
||
<ModelViewer
|
||
modelPath="/models/EXPO_АР_PostRecon_level.gltf"
|
||
onModelLoaded={handleModelLoaded}
|
||
onError={handleError}
|
||
/>
|
||
|
||
{error && (
|
||
<div className="absolute top-4 left-4 right-4 md:left-4 md:right-auto md:w-80 bg-red-600/90 text-white p-4 rounded-lg z-50 text-sm">
|
||
<strong>Error:</strong> {error}
|
||
</div>
|
||
)}
|
||
|
||
{modelInfo && (
|
||
<div className="absolute top-4 right-4 bg-black/80 text-white p-4 rounded-lg z-50 text-sm max-w-xs">
|
||
<h3 className="text-base font-semibold mb-3">EXPO Building Model</h3>
|
||
|
||
<div className="text-xs text-gray-300 space-y-1">
|
||
<div>🖱️ Left click + drag: Rotate</div>
|
||
<div>🖱️ Right click + drag: Pan</div>
|
||
<div>🖱️ Scroll: Zoom in/out</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|