diff --git a/src/components/Canvas.jsx b/src/components/Canvas.jsx index 119cdd2..354425e 100644 --- a/src/components/Canvas.jsx +++ b/src/components/Canvas.jsx @@ -1,32 +1,63 @@ import React, { useEffect, useRef, useState } from 'react'; -import * as THREE from 'three'; -import { Scene } from './Scene'; +import { Scene } from '../three/Scene'; function Canvas() { const containerRef = useRef(null); + const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); const [scene, setScene] = useState(null); + // Handle resize useEffect(() => { - // Only initialize if container exists - if (!containerRef.current) return; - - // Wait for next frame to ensure DOM measurements are accurate - requestAnimationFrame(() => { - try { - const newScene = new Scene(containerRef.current); - setScene(newScene); - - return () => { - if (newScene) { - newScene.dispose(); - } - }; - } catch (error) { - console.error('Error initializing scene:', error); + const handleResize = () => { + if (containerRef.current) { + setDimensions({ + width: containerRef.current.clientWidth, + height: containerRef.current.clientHeight + }); } - }); + }; + + // Initial size + handleResize(); + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); }, []); + // Initialize scene + useEffect(() => { + if (!containerRef.current || dimensions.width === 0 || dimensions.height === 0) { + return; + } + + try { + const newScene = new Scene(containerRef.current, dimensions); + setScene(prev => { + if (prev) { + prev.dispose(); + } + return newScene; + }); + + // Start animation + const animate = () => { + if (newScene) { + newScene.animate(); + } + requestAnimationFrame(animate); + }; + animate(); + + return () => { + if (newScene) { + newScene.dispose(); + } + }; + } catch (error) { + console.error('Error initializing scene:', error); + } + }, [dimensions]); + return (
); }