import { Vector3 } from '@react-three/fiber' ; export const CAMERA_DISTANCE = 2.5 ; export const Z_FLICKER_PREVENTION = 0.001 ; export const PHONE_SHININESS = 30 ; export const PHONE_CURVE_SEGMENTS = 8 ; export const PHONE_COLOR = 0x0e4eaf ; const getPhoneHeight = ( aspectRatio , baseScale ) : number => { if ( aspectRatio > 1 ) { return baseScale ; } return baseScale / aspectRatio ; } ; const getPhoneWidth = ( aspectRatio , baseScale ) : number => { if ( aspectRatio < 1 ) { return baseScale ; } return baseScale * aspectRatio ; } ; type Layout = { position : Vector3 ; height : number ; width : number ; radius : number ; } ; type PhoneLayout = { phone : Layout & { thickness : number ; bevel : number ; } ; screen : Layout ; } ; export const getPhoneLayout = ( aspectRatio , baseScale ) : PhoneLayout => { const phoneThickness = baseScale * 0.15 ; const phoneBevel = baseScale * 0.04 ; const screenRadius = baseScale * 0.07 ; const phoneHeight = getPhoneHeight ( aspectRatio , baseScale ) ; const phoneWidth = getPhoneWidth ( aspectRatio , baseScale ) ; const phonePosition = [ - phoneWidth / 2 , - phoneHeight / 2 , 0 ] ; const screenWidth = phoneWidth - phoneBevel * 2 ; const screenHeight = phoneHeight - phoneBevel * 2 ; const screenPosition = [ - screenWidth / 2 , - screenHeight / 2 , phoneThickness + Z_FLICKER_PREVENTION , ] ; const phoneRadius = screenRadius + ( getPhoneWidth ( aspectRatio , baseScale ) - screenWidth ) / 2 ; return { phone : { position : phonePosition , height : phoneHeight , width : phoneWidth , radius : phoneRadius , thickness : phoneThickness , bevel : phoneBevel , } , screen : { position : screenPosition , height : screenHeight , width : screenWidth , radius : screenRadius , } , } ; } ;