feat: zoom in on 3D avatar in floating widget mode for ultra-high prominence and visual impact

This commit is contained in:
Michael committed 2026-05-21 21:03:44 +02:00
1 parent 17d00b085b
commit 033b93563d
3 files changed
+6 -4

No files matched your search

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 64 KiB

+1
View File
@@ -2240,6 +2240,7 @@ export const App: React.FC = () => {
emotion={currentEmotion}
isSpeaking={isSpeaking}
avatarId={avatarId}
isFloatingMode={isFloatingMode}
/>
{avatarId !== 'eve' && activeAvatar.assetPath && (
<div style={{ position: 'absolute', top: '16px', left: '50%', transform: 'translateX(-50%)', padding: '7px 14px', borderRadius: '18px', backgroundColor: 'var(--bg-secondary)', border: '1px solid rgba(0,212,245,0.25)', boxShadow: '0 0 20px rgba(0,212,245,0.1)', fontSize: '9px', fontFamily: 'var(--font-mono)', fontWeight: 800, letterSpacing: '0.8px', color: 'var(--text-secondary)', textTransform: 'uppercase', pointerEvents: 'none' }}>
+5 -4
View File
@@ -17,6 +17,7 @@ interface ThreeCanvasProps {
emotion: EveEmotion;
isSpeaking: boolean;
avatarId?: EveAvatar;
isFloatingMode?: boolean;
}
interface HologramProjectionProps {
@@ -574,11 +575,11 @@ const HologramProjection: React.FC<HologramProjectionProps> = ({ emotion, isSpea
);
};
export const ThreeCanvas: React.FC<ThreeCanvasProps> = ({ emotion, isSpeaking, avatarId = 'eve' }) => {
export const ThreeCanvas: React.FC<ThreeCanvasProps> = ({ emotion, isSpeaking, avatarId = 'eve', isFloatingMode = false }) => {
return (
<div style={{ width: '100%', height: '100%', position: 'relative' }}>
<Canvas
camera={{ position: [0, 1.1, 5.8], fov: 36 }}
camera={{ position: isFloatingMode ? [0, 0.72, 3.7] : [0, 1.1, 5.8], fov: isFloatingMode ? 30 : 36 }}
gl={{ alpha: true, antialias: true, premultipliedAlpha: false }}
onCreated={({ gl }) => {
gl.setClearColor(0x000000, 0);
@@ -615,8 +616,8 @@ export const ThreeCanvas: React.FC<ThreeCanvasProps> = ({ emotion, isSpeaking, a
{/* OrbitControls calibrated to prevent clipping or losing focus */}
<OrbitControls
enableZoom={true}
minDistance={4.8}
maxDistance={6.8}
minDistance={isFloatingMode ? 2.4 : 4.8}
maxDistance={isFloatingMode ? 4.7 : 6.8}
enablePan={false}
autoRotate={false}
maxPolarAngle={Math.PI / 1.7}