|
| 1 | +import { useRef, useEffect, useState } from 'react'; |
| 2 | +import * as THREE from 'three'; |
| 3 | +import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; |
| 4 | + |
| 5 | +const RobotModel = () => { |
| 6 | + const mountRef = useRef<HTMLDivElement>(null); |
| 7 | + const [isLoading, setIsLoading] = useState(true); |
| 8 | + |
| 9 | + useEffect(() => { |
| 10 | + const currentMount = mountRef.current; |
| 11 | + if (!currentMount) return; |
| 12 | + |
| 13 | + const clock = new THREE.Clock(); |
| 14 | + let model: THREE.Group | null = null; |
| 15 | + let mixer: THREE.AnimationMixer | null = null; |
| 16 | + |
| 17 | + const scene = new THREE.Scene(); |
| 18 | + const camera = new THREE.PerspectiveCamera( |
| 19 | + 25, |
| 20 | + currentMount.clientWidth / currentMount.clientHeight, |
| 21 | + 0.1, |
| 22 | + 1000 |
| 23 | + ); |
| 24 | + camera.position.z = 10; |
| 25 | + |
| 26 | + const renderer = new THREE.WebGLRenderer({ |
| 27 | + antialias: true, |
| 28 | + alpha: true, |
| 29 | + }); |
| 30 | + renderer.setSize(currentMount.clientWidth, currentMount.clientHeight); |
| 31 | + renderer.setPixelRatio(window.devicePixelRatio); |
| 32 | + renderer.outputColorSpace = THREE.SRGBColorSpace; |
| 33 | + renderer.toneMapping = THREE.ACESFilmicToneMapping; |
| 34 | + renderer.toneMappingExposure = 1.0; |
| 35 | + currentMount.appendChild(renderer.domElement); |
| 36 | + |
| 37 | + // --- Luces --- |
| 38 | + const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); |
| 39 | + scene.add(ambientLight); |
| 40 | + const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); |
| 41 | + directionalLight.position.set(5, 10, 7.5); |
| 42 | + scene.add(directionalLight); |
| 43 | + |
| 44 | + const loader = new GLTFLoader(); |
| 45 | + loader.load( |
| 46 | + '/robot.glb', |
| 47 | + (gltf) => { |
| 48 | + model = gltf.scene; |
| 49 | + model.scale.set(1.3, 1.3, 1.3); |
| 50 | + model.position.y = -1.5; |
| 51 | + model.rotation.y = -Math.PI / 2; |
| 52 | + scene.add(model); |
| 53 | + |
| 54 | + if (gltf.animations.length > 0) { |
| 55 | + mixer = new THREE.AnimationMixer(model); |
| 56 | + const action = mixer.clipAction(gltf.animations[0]); |
| 57 | + action.timeScale = 0.4; |
| 58 | + action.play(); |
| 59 | + } |
| 60 | + |
| 61 | + model.traverse((child) => { |
| 62 | + if ((child as THREE.Mesh).isMesh) { |
| 63 | + const meshChild = child as THREE.Mesh; |
| 64 | + if ( |
| 65 | + meshChild.material && |
| 66 | + 'emissiveIntensity' in meshChild.material |
| 67 | + ) { |
| 68 | + ( |
| 69 | + meshChild.material as THREE.MeshStandardMaterial |
| 70 | + ).emissiveIntensity = 0; |
| 71 | + } |
| 72 | + } |
| 73 | + }); |
| 74 | + |
| 75 | + setIsLoading(false); |
| 76 | + }, |
| 77 | + undefined, |
| 78 | + (error) => { |
| 79 | + console.error('An error happened while loading the model:', error); |
| 80 | + setIsLoading(false); |
| 81 | + } |
| 82 | + ); |
| 83 | + |
| 84 | + let mouseX = 0; |
| 85 | + let mouseY = 0; |
| 86 | + const handleMouseMove = (event: MouseEvent) => { |
| 87 | + mouseX = (event.clientX / window.innerWidth) * 2 - 1; |
| 88 | + mouseY = -(event.clientY / window.innerHeight) * 2 + 1; |
| 89 | + }; |
| 90 | + window.addEventListener('mousemove', handleMouseMove); |
| 91 | + |
| 92 | + const animate = () => { |
| 93 | + requestAnimationFrame(animate); |
| 94 | + const deltaTime = clock.getDelta(); |
| 95 | + |
| 96 | + if (mixer) mixer.update(deltaTime); |
| 97 | + |
| 98 | + if (model) { |
| 99 | + model.rotation.y = -Math.PI / 2 + mouseX * 0.5; |
| 100 | + model.rotation.x += (-mouseY * 0.5 - model.rotation.x) * 0.05; |
| 101 | + } |
| 102 | + renderer.render(scene, camera); |
| 103 | + }; |
| 104 | + animate(); |
| 105 | + |
| 106 | + const handleResize = () => { |
| 107 | + if (!currentMount) return; |
| 108 | + camera.aspect = currentMount.clientWidth / currentMount.clientHeight; |
| 109 | + camera.updateProjectionMatrix(); |
| 110 | + renderer.setSize(currentMount.clientWidth, currentMount.clientHeight); |
| 111 | + }; |
| 112 | + window.addEventListener('resize', handleResize); |
| 113 | + |
| 114 | + return () => { |
| 115 | + window.removeEventListener('resize', handleResize); |
| 116 | + window.removeEventListener('mousemove', handleMouseMove); |
| 117 | + if (renderer.domElement && currentMount.contains(renderer.domElement)) { |
| 118 | + currentMount.removeChild(renderer.domElement); |
| 119 | + } |
| 120 | + }; |
| 121 | + }, []); |
| 122 | + |
| 123 | + return ( |
| 124 | + <div style={{ width: '100%', height: '100%', position: 'relative' }}> |
| 125 | + {isLoading && ( |
| 126 | + <div className="loading-spinner-container"> |
| 127 | + <div className="loading-spinner"></div> |
| 128 | + </div> |
| 129 | + )} |
| 130 | + <div |
| 131 | + ref={mountRef} |
| 132 | + style={{ |
| 133 | + width: '100%', |
| 134 | + height: '100%', |
| 135 | + opacity: isLoading ? 0 : 1, |
| 136 | + transition: 'opacity 0.5s ease-in-out', |
| 137 | + }} |
| 138 | + /> |
| 139 | + </div> |
| 140 | + ); |
| 141 | +}; |
| 142 | + |
| 143 | +export default RobotModel; |
0 commit comments