src/components/three/ModelSwitcher.tsx - features - beck/gsap_mac

src/components/three/ModelSwitcher.tsx

73 строки2 KB

yuldoshev.ihtier

feat(ui): implement switch model

25 окт 2025, 15:02

25 окт 2025, 15:02b6575e3

import { useRef } from 'react'
import { useGSAP } from '@gsap/react'
import { PresentationControls } from '@react-three/drei'

import { MacbookModel16 } from '../models/Macbook-16'
import { MacbookModel14 } from '../models/Macbook14'

import { moveGroup } from './libs/moveGroup'
import { fadeMeshes } from './libs/fadeMeshes'

import {
	OFFSET_DISTANCE,
	SCALE_14_LARGE_DESKTOP,
	SCALE_14_SMALL_DESKTOP,
	SCALE_16_LARGE_DESKTOP,
	SCALE_16_SMALL_DESKTOP,
} from '../../consts'

interface ModelSwitcherProps {
	scale: number
	isMobile: boolean
}

export const ModelSwitcher = ({ isMobile, scale }: ModelSwitcherProps) => {
	const smallMacbookRef = useRef(null)
	const largeMacbookRef = useRef(null)

	const showLargeMacbook =
		scale === SCALE_16_LARGE_DESKTOP || scale === SCALE_16_SMALL_DESKTOP

	useGSAP(() => {
		if (showLargeMacbook) {
			moveGroup(smallMacbookRef.current, -OFFSET_DISTANCE)
			moveGroup(largeMacbookRef.current, 0)

			fadeMeshes(smallMacbookRef.current, 0)
			fadeMeshes(largeMacbookRef.current, 1)
		} else {
			moveGroup(smallMacbookRef.current, 0)
			moveGroup(largeMacbookRef.current, OFFSET_DISTANCE)

			fadeMeshes(smallMacbookRef.current, 1)
			fadeMeshes(largeMacbookRef.current, 0)
		}
	}, [scale])

	const controlsCongif = {
		snap: true,
		speed: 1,
		zoom: 1,
		azimuth: [-Infinity, Infinity] as [number, number],
		config: { mass: 1, tension: 0, friction: 26 },
	}

	return (
		<>
			<PresentationControls {...controlsCongif}>
				<group ref={largeMacbookRef}>
					<MacbookModel16
						scale={isMobile ? SCALE_16_SMALL_DESKTOP : SCALE_16_LARGE_DESKTOP}
					/>
				</group>
			</PresentationControls>
			<PresentationControls {...controlsCongif}>
				<group ref={smallMacbookRef}>
					<MacbookModel14
						scale={isMobile ? SCALE_14_SMALL_DESKTOP : SCALE_14_LARGE_DESKTOP}
					/>
				</group>
			</PresentationControls>
		</>
	)
}