diff --git a/src/components/ArtworkFrame.jsx b/src/components/ArtworkFrame.jsx index 7007c84..3265160 100644 --- a/src/components/ArtworkFrame.jsx +++ b/src/components/ArtworkFrame.jsx @@ -26,78 +26,58 @@ function SafeImagePlane({ } console.log("이미지 로딩 시작:", imageUrl); + const loader = new TextureLoader(); + - // HTML Image 객체를 사용하여 백엔드 프록시를 통해 이미지 로드 - const img = new Image(); - img.crossOrigin = "anonymous"; - - img.onload = () => { - console.log("✅ HTML Image 로드 성공, TextureLoader로 변환 중..."); + loader.load( + imageUrl, // 프록시 URL 사용 + (loadedTexture) => { + console.log("✅ 이미지 로딩 성공:", imageUrl); + console.log("텍스처 정보:", loadedTexture); + loadedTexture.flipY = true; // 이미지 뒤집힘 문제 해결 + setTexture(loadedTexture); + setLoading(false); + }, + (progress) => { + console.log("📥 이미지 로딩 진행:", imageUrl, progress); + }, + (err) => { + console.error("❌ 이미지 로드 실패:", imageUrl); + console.error("에러 상세:", err); + console.error("에러 타입:", typeof err); + console.error("에러 메시지:", err?.message); + + // 원본 URL로 직접 시도해보기 + if (imageUrl.startsWith("/s3-proxy/")) { + const originalUrl = `https://likelion13-artium.s3.ap-northeast-2.amazonaws.com${imageUrl.replace( + "/s3-proxy", + "" + )}`; + console.log("🔄 원본 URL로 재시도:", originalUrl); - // HTML Image를 Three.js TextureLoader로 변환 - const loader = new TextureLoader(); - const texture = loader.load( - `https://api.artium.life/api/piece?filename=${encodeURIComponent(imageUrl)}`, // 백엔드 프록시 URL - undefined, - undefined, - (err) => { - console.error("❌ TextureLoader 로드 실패", err); + const retryLoader = new TextureLoader(); + retryLoader.setCrossOrigin("anonymous"); + retryLoader.load( + originalUrl, + (loadedTexture) => { + console.log("✅ 원본 URL로 로딩 성공:", originalUrl); + loadedTexture.flipY = true; + setTexture(loadedTexture); + setLoading(false); + }, + undefined, + (retryErr) => { + console.error("❌ 원본 URL로도 실패:", retryErr); + setError(true); + setLoading(false); + } + ); + } else { setError(true); setLoading(false); } - ); - - // 이미지 뒤집기 설정 - texture.flipY = true; - - setTexture(texture); - setLoading(false); - console.log("🎨 Three.js 텍스처 변환 완료!"); - }; - - img.onerror = (err) => { - console.error("❌ HTML Image 로드 실패:", imageUrl); - console.error("에러 상세:", err); - - // 백엔드 프록시 URL로 재시도 - const proxyUrl = `https://api.artium.life/api/piece?filename=${encodeURIComponent(imageUrl)}`; - console.log("🔄 백엔드 프록시 URL로 재시도:", proxyUrl); - - const retryImg = new Image(); - retryImg.crossOrigin = "anonymous"; - - retryImg.onload = () => { - console.log("✅ 백엔드 프록시로 로딩 성공:", proxyUrl); - - const retryLoader = new TextureLoader(); - const retryTexture = retryLoader.load( - proxyUrl, - undefined, - undefined, - (retryErr) => { - console.error("❌ 백엔드 프록시로도 실패:", retryErr); - setError(true); - setLoading(false); - } - ); - - retryTexture.flipY = true; - setTexture(retryTexture); - setLoading(false); - }; - - retryImg.onerror = (retryErr) => { - console.error("❌ 백엔드 프록시로도 실패:", retryErr); - setError(true); - setLoading(false); - }; - - retryImg.src = proxyUrl; - }; - - // 백엔드 프록시 URL로 이미지 로드 시작 - const proxyUrl = `https://api.artium.life/api/piece?filename=${encodeURIComponent(imageUrl)}`; - img.src = proxyUrl; + } + ); }, [imageUrl]); if (loading) { @@ -168,9 +148,9 @@ function ArtworkFrame({ artwork, position, onArtworkClick }) { else if (x > 16) { return [0, -Math.PI / 2, 0]; // -90도 회전 } - // 앞쪽 벽 (z > 7) + // 앞쪽 벽 (z > 7) - 카메라를 향하도록 else if (z > 7) { - return [0, Math.PI, 0]; // 180도 회전 + return [0, 0, 0]; // 회전 없음 (카메라를 향함) } // 뒷벽 (z < -7) 또는 기본 else {