mirror of
https://github.com/R0m1k3/EveFlow.git
synced 2026-10-21 14:18: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}
|
emotion={currentEmotion}
|
||||||
isSpeaking={isSpeaking}
|
isSpeaking={isSpeaking}
|
||||||
avatarId={avatarId}
|
avatarId={avatarId}
|
||||||
|
isFloatingMode={isFloatingMode}
|
||||||
/>
|
/>
|
||||||
{avatarId !== 'eve' && activeAvatar.assetPath && (
|
{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' }}>
|
<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;
|
emotion: EveEmotion;
|
||||||
isSpeaking: boolean;
|
isSpeaking: boolean;
|
||||||
avatarId?: EveAvatar;
|
avatarId?: EveAvatar;
|
||||||
|
isFloatingMode?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface HologramProjectionProps {
|
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 (
|
return (
|
||||||
<div style={{ width: '100%', height: '100%', position: 'relative' }}>
|
<div style={{ width: '100%', height: '100%', position: 'relative' }}>
|
||||||
<Canvas
|
<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 }}
|
gl={{ alpha: true, antialias: true, premultipliedAlpha: false }}
|
||||||
onCreated={({ gl }) => {
|
onCreated={({ gl }) => {
|
||||||
gl.setClearColor(0x000000, 0);
|
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 calibrated to prevent clipping or losing focus */}
|
||||||
<OrbitControls
|
<OrbitControls
|
||||||
enableZoom={true}
|
enableZoom={true}
|
||||||
minDistance={4.8}
|
minDistance={isFloatingMode ? 2.4 : 4.8}
|
||||||
maxDistance={6.8}
|
maxDistance={isFloatingMode ? 4.7 : 6.8}
|
||||||
enablePan={false}
|
enablePan={false}
|
||||||
autoRotate={false}
|
autoRotate={false}
|
||||||
maxPolarAngle={Math.PI / 1.7}
|
maxPolarAngle={Math.PI / 1.7}
|
||||||
|
|||||||
Reference in new issue
Block a user