function MainComponent() { const [currentVrm, setCurrentVrm] = React.useState(null); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(false); const [errorMessage, setErrorMessage] = React.useState("ファイルの読み込みに失敗しました。(環境制限の可能性)"); const canvasContainerRef = React.useRef(null); const sceneRef = React.useRef(null); const cameraRef = React.useRef(null); const rendererRef = React.useRef(null); const controlsRef = React.useRef(null); const clockRef = React.useRef(null); React.useEffect(()=>{ if (typeof window === "undefined") return; const addImportMap = ()=>{ return new Promise((resolve, reject)=>{ try { const importMapScript = document.createElement("script"); importMapScript.type = "importmap"; importMapScript.textContent = JSON.stringify({ imports: { three: "https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.149.0/examples/jsm/", "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@0.6.11/lib/three-vrm.module.min.js" } }); document.head.appendChild(importMapScript); resolve(); } catch (error) { reject(error); } }); }; const addModuleScript = ()=>{ return new Promise((resolve, reject)=>{ try { const moduleScript = document.createElement("script"); moduleScript.type = "module"; moduleScript.textContent = ` import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { VRM } from '@pixiv/three-vrm'; window.THREE = THREE; window.OrbitControls = OrbitControls; window.GLTFLoader = GLTFLoader; window.VRM = VRM; const event = new CustomEvent('threejsloaded'); window.dispatchEvent(event); `; document.head.appendChild(moduleScript); window.addEventListener("threejsloaded", ()=>{ console.log("Three.js modules loaded successfully"); resolve(); }, { once: true }); setTimeout(()=>{ reject(new Error("Three.js modules loading timeout")); }, 10000); } catch (error) { reject(error); } }); }; const initThreeJs = async ()=>{ try { setLoading(true); setError(false); await addImportMap(); await addModuleScript(); if (!window.THREE || !window.OrbitControls || !window.GLTFLoader || !window.VRM) { throw new Error("Three.js modules not available"); } console.log("Initializing Three.js..."); clockRef.current = new window.THREE.Clock(); sceneRef.current = new window.THREE.Scene(); sceneRef.current.background = new window.THREE.Color(0x1f2937); setTimeout(()=>{ try { const container = canvasContainerRef.current; if (!container) { console.error("Canvas container ref is null. DOM might not be ready yet."); throw new Error("Canvas container not found"); } cameraRef.current = new window.THREE.PerspectiveCamera(30.0, container.clientWidth / container.clientHeight, 0.1, 20.0); cameraRef.current.position.set(0.0, 1.0, 3.0); rendererRef.current = new window.THREE.WebGLRenderer({ antialias: true, alpha: true, powerPreference: "high-performance" }); rendererRef.current.setSize(container.clientWidth, container.clientHeight); rendererRef.current.setPixelRatio(window.devicePixelRatio); if (rendererRef.current.outputEncoding !== undefined) { rendererRef.current.outputEncoding = window.THREE.sRGBEncoding; } else if (rendererRef.current.outputColorSpace !== undefined) { rendererRef.current.outputColorSpace = window.THREE.SRGBColorSpace; } container.appendChild(rendererRef.current.domElement); controlsRef.current = new window.OrbitControls(cameraRef.current, rendererRef.current.domElement); controlsRef.current.target.set(0.0, 1.0, 0.0); controlsRef.current.screenSpacePanning = true; controlsRef.current.enableDamping = true; controlsRef.current.dampingFactor = 0.1; controlsRef.current.update(); const ambientLight = new window.THREE.AmbientLight(0xffffff, 0.7); sceneRef.current.add(ambientLight); const directionalLight = new window.THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(1, 1, 1).normalize(); sceneRef.current.add(directionalLight); const gridHelper = new window.THREE.GridHelper(10, 10); sceneRef.current.add(gridHelper); window.addEventListener("resize", handleResize); animate(); console.log("Three.js initialized successfully"); setLoading(false); } catch (error) { console.error("Three.js initialization error:", error); setErrorMessage(`Three.jsの初期化に失敗しました: ${error.message}`); setError(true); setLoading(false); } }, 500); } catch (error) { console.error("Three.js initialization error:", error); setErrorMessage(`Three.jsの初期化に失敗しました: ${error.message}`); setError(true); setLoading(false); } }; const animate = ()=>{ if (!rendererRef.current || !sceneRef.current || !cameraRef.current) return; requestAnimationFrame(animate); try { const delta = clockRef.current.getDelta(); if (currentVrm) { currentVrm.update(delta); } if (controlsRef.current) { controlsRef.current.update(); } rendererRef.current.render(sceneRef.current, cameraRef.current); } catch (error) { console.error("Animation error:", error); } }; const handleResize = ()=>{ if (!cameraRef.current || !rendererRef.current || !canvasContainerRef.current) return; try { const container = canvasContainerRef.current; cameraRef.current.aspect = container.clientWidth / container.clientHeight; cameraRef.current.updateProjectionMatrix(); rendererRef.current.setSize(container.clientWidth, container.clientHeight); } catch (error) { console.error("Resize error:", error); } }; initThreeJs(); return ()=>{ window.removeEventListener("resize", handleResize); if (rendererRef.current && rendererRef.current.domElement && canvasContainerRef.current) { try { canvasContainerRef.current.removeChild(rendererRef.current.domElement); rendererRef.current.dispose(); } catch (e) { console.error("Error during cleanup:", e); } } if (currentVrm && sceneRef.current) { try { sceneRef.current.remove(currentVrm.scene); currentVrm.dispose(); } catch (e) { console.error("Error disposing VRM:", e); } } }; }, []); const loadVRM = (url)=>{ if (!window.THREE || !window.GLTFLoader || !window.VRM) { setErrorMessage("Three.jsモジュールがまだ読み込まれていません。しばらく待ってから再試行してください。"); setError(true); return; } if (!canvasContainerRef.current || !sceneRef.current || !cameraRef.current || !rendererRef.current || !controlsRef.current) { setErrorMessage("Three.jsの初期化が完了していません。しばらく待ってから再試行してください。"); setError(true); return; } setLoading(true); setError(false); try { console.log("Loading VRM file..."); const loader = new window.GLTFLoader(); loader.load(url, (gltf)=>{ try { console.log("GLTF loaded, converting to VRM..."); window.VRM.from(gltf).then((vrm)=>{ console.log("VRM created successfully:", vrm); if (currentVrm && sceneRef.current) { sceneRef.current.remove(currentVrm.scene); currentVrm.dispose(); } sceneRef.current.add(vrm.scene); setCurrentVrm(vrm); const box = new window.THREE.Box3().setFromObject(vrm.scene); const center = box.getCenter(new window.THREE.Vector3()); controlsRef.current.target.copy(center); controlsRef.current.update(); setLoading(false); }).catch((err)=>{ console.error("Failed to create VRM from GLTF:", err); setErrorMessage(`VRMの変換に失敗しました: ${err.message}`); setLoading(false); setError(true); }); } catch (loadError) { console.error("Error processing loaded VRM:", loadError); setErrorMessage(`VRMの処理に失敗しました: ${loadError.message}`); setLoading(false); setError(true); if (currentVrm && sceneRef.current) { sceneRef.current.remove(currentVrm.scene); currentVrm.dispose(); setCurrentVrm(null); } } finally{ URL.revokeObjectURL(url); } }, (progress)=>{ const percent = progress.lengthComputable ? progress.loaded / progress.total * 100 : 0; console.log(`Loading model... ${percent.toFixed(2)}%`); }, (error)=>{ console.error("Failed to load VRM:", error); setErrorMessage(`VRMファイルの読み込みに失敗しました: ${error.message}`); setLoading(false); setError(true); URL.revokeObjectURL(url); }); } catch (error) { console.error("VRM loading error:", error); setErrorMessage(`VRMローダーの初期化に失敗しました: ${error.message}`); setLoading(false); setError(true); } }; const handleFileSelect = (event)=>{ const file = event.target.files[0]; if (!file) return; console.log("File selected:", file.name, file.size, file.type); try { const blob = new Blob([ file ], { type: "application/octet-stream" }); const url = URL.createObjectURL(blob); loadVRM(url); } catch (error) { console.error("File processing error:", error); setErrorMessage(`ファイルの処理に失敗しました: ${error.message}`); setError(true); } event.target.value = ""; }; const checkWebGLSupport = ()=>{ try { const canvas = document.createElement("canvas"); return !!(window.WebGLRenderingContext && (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))); } catch (e) { return false; } }; React.useEffect(()=>{ if (typeof window !== "undefined") { if (!checkWebGLSupport()) { setErrorMessage("お使いのブラウザはWebGLをサポートしていません。最新のブラウザをご使用ください。"); setError(true); } } }, []); return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900 text-white h-screen w-full overflow-hidden relative", __source: { fileName: "", lineNumber: 405, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4 z-10", __source: { fileName: "", lineNumber: 406, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fileInput", className: "bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out cursor-pointer", __source: { fileName: "", lineNumber: 407, columnNumber: 9 }, __self: this }, "VRMファイルを選択"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "fileInput", accept: ".vrm", className: "hidden", onChange: handleFileSelect, __source: { fileName: "", lineNumber: 413, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { id: "canvas-container", ref: canvasContainerRef, className: "w-full h-screen", __source: { fileName: "", lineNumber: 422, columnNumber: 7 }, __self: this }), loading && /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-800 text-white p-4 rounded-lg shadow-md z-10", __source: { fileName: "", lineNumber: 429, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 430, columnNumber: 11 }, __self: this }, "読み込み中...")), error && /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-red-600 text-white p-4 rounded-lg shadow-md z-10 max-w-md", __source: { fileName: "", lineNumber: 435, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 436, columnNumber: 11 }, __self: this }, "エラーが発生しました"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 437, columnNumber: 11 }, __self: this }, errorMessage), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-sm", __source: { fileName: "", lineNumber: 438, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 439, columnNumber: 13 }, __self: this }, "考えられる原因:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 mt-1", __source: { fileName: "", lineNumber: 440, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 441, columnNumber: 15 }, __self: this }, "ブラウザがWebGLをサポートしていない"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 442, columnNumber: 15 }, __self: this }, "外部スクリプトの読み込みがブロックされている"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 443, columnNumber: 15 }, __self: this }, "VRMファイルが破損しているか、対応していない形式"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 446, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.location.reload(), className: "bg-white text-red-600 font-bold py-1 px-3 rounded-lg shadow-md transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 447, columnNumber: 13 }, __self: this }, "ページを再読み込み")))); }