mirror of
https://github.com/R0m1k3/EveFlow.git
synced 2026-10-12 01:39:13 +02:00
feat: zoom in on 3D avatar in floating widget mode for ultra-high prominence and visual impact
This commit is contained in:
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 |
@@ -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' }}>
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in new issue
Block a user