🚀 Auto-deploy: melhoria no snap e medição AR em 25/05/2026 12:44:07
This commit is contained in:
+30
-183
@@ -32,7 +32,7 @@ class ModelErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBounda
|
||||
}
|
||||
}
|
||||
import { Canvas, useFrame } from '@react-three/fiber';
|
||||
import { OrbitControls, Text, useGLTF } from '@react-three/drei';
|
||||
import { OrbitControls, Text, useGLTF, Billboard, Image } from '@react-three/drei';
|
||||
import * as THREE from 'three';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { useModelStore, type SceneModel } from '@/stores/useModelStore';
|
||||
@@ -166,6 +166,7 @@ function MiiAvatarBackup({
|
||||
} & Record<string, unknown>) {
|
||||
const groupRef = useRef<THREE.Group>(null);
|
||||
const ringRef = useRef<THREE.Mesh>(null);
|
||||
const headRef = useRef<THREE.Group>(null);
|
||||
const lastSenderRef = useRef(isLastChatSender);
|
||||
const pulseEndTimeRef = useRef(0);
|
||||
|
||||
@@ -176,27 +177,26 @@ function MiiAvatarBackup({
|
||||
lastSenderRef.current = isLastChatSender;
|
||||
}, [isLastChatSender]);
|
||||
|
||||
const mii = useMemo(() => {
|
||||
const skin = SKIN_COLORS[(avatarId - 1) % SKIN_COLORS.length];
|
||||
return {
|
||||
skin,
|
||||
hairColor: avatarId === 3 ? '#eab308' : avatarId === 9 ? '#a855f7' : avatarId === 5 ? '#f97316' : '#27272a',
|
||||
hasGlasses: avatarId === 1 || avatarId === 8,
|
||||
glassesColor: avatarId === 8 ? '#18181b' : '#ef4444',
|
||||
hasCap: avatarId === 4,
|
||||
capColor: '#3b82f6',
|
||||
hasHat: avatarId === 10,
|
||||
hatColor: '#b45309',
|
||||
hairStyle: avatarId === 7 ? 'bald' : (avatarId === 9 ? 'modern' : (avatarId % 3 === 0 ? 'long' : 'short')),
|
||||
beard: avatarId === 7,
|
||||
};
|
||||
}, [avatarId]);
|
||||
const avatarUrl = useMemo(() => {
|
||||
const seed = `${username || 'user'}_${avatarId}`;
|
||||
return `https://api.dicebear.com/7.x/toon-head/png?seed=${encodeURIComponent(seed)}&backgroundColor=transparent`;
|
||||
}, [username, avatarId]);
|
||||
|
||||
useFrame((state) => {
|
||||
if (groupRef.current && props.position && Array.isArray(props.position) && props.position.length >= 2) {
|
||||
groupRef.current.position.y = (props.position[1] as number) + Math.sin(state.clock.getElapsedTime() * 2 + avatarId) * 0.012;
|
||||
}
|
||||
|
||||
if (headRef.current) {
|
||||
if (isTalking) {
|
||||
headRef.current.position.y = 0.16 + Math.abs(Math.sin(state.clock.getElapsedTime() * 12)) * 0.025;
|
||||
headRef.current.rotation.z = Math.sin(state.clock.getElapsedTime() * 12) * 0.06;
|
||||
} else {
|
||||
headRef.current.position.y = THREE.MathUtils.lerp(headRef.current.position.y, 0.16, 0.15);
|
||||
headRef.current.rotation.z = THREE.MathUtils.lerp(headRef.current.rotation.z, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
if (ringRef.current) {
|
||||
const now = Date.now();
|
||||
const material = ringRef.current.material as THREE.MeshBasicMaterial;
|
||||
@@ -236,7 +236,7 @@ function MiiAvatarBackup({
|
||||
|
||||
return (
|
||||
<group ref={groupRef} position={positionVector} rotation={rotationEuler} scale={scale}>
|
||||
<group position={[0, 0.28, 0]}>
|
||||
<group position={[0, 0.32, 0]}>
|
||||
<mesh position={[0, 0, -0.001]}>
|
||||
<planeGeometry args={[0.22, 0.05]} />
|
||||
<meshBasicMaterial color="#0f172a" transparent opacity={0.7} />
|
||||
@@ -253,175 +253,22 @@ function MiiAvatarBackup({
|
||||
</mesh>
|
||||
)}
|
||||
|
||||
<mesh position={[0, 0.1, 0]} scale={[1, 1.15, 1]}>
|
||||
<sphereGeometry args={[0.08, 32, 32]} />
|
||||
<meshStandardMaterial color={mii.skin} roughness={0.6} />
|
||||
</mesh>
|
||||
|
||||
{mii.hairStyle === 'short' && (
|
||||
<group>
|
||||
<mesh position={[0, 0.15, -0.015]} scale={[1.05, 0.8, 1.05]}>
|
||||
<sphereGeometry args={[0.08, 16, 16]} />
|
||||
<meshStandardMaterial color={mii.hairColor} roughness={0.8} />
|
||||
</mesh>
|
||||
<mesh position={[-0.078, 0.11, 0.02]} scale={[0.2, 0.5, 0.4]}>
|
||||
<sphereGeometry args={[0.03, 8, 8]} />
|
||||
<meshStandardMaterial color={mii.hairColor} roughness={0.8} />
|
||||
</mesh>
|
||||
<mesh position={[0.078, 0.11, 0.02]} scale={[0.2, 0.5, 0.4]}>
|
||||
<sphereGeometry args={[0.03, 8, 8]} />
|
||||
<meshStandardMaterial color={mii.hairColor} roughness={0.8} />
|
||||
</mesh>
|
||||
</group>
|
||||
)}
|
||||
|
||||
{mii.hairStyle === 'long' && (
|
||||
<group>
|
||||
<mesh position={[0, 0.16, -0.01]} scale={[1.05, 0.7, 1.05]}>
|
||||
<sphereGeometry args={[0.08, 16, 16]} />
|
||||
<meshStandardMaterial color={mii.hairColor} roughness={0.8} />
|
||||
</mesh>
|
||||
<mesh position={[0, 0.16, 0.045]} scale={[1.3, 0.3, 0.4]} rotation={[0.1, 0, 0]}>
|
||||
<sphereGeometry args={[0.04, 16, 16]} />
|
||||
<meshStandardMaterial color={mii.hairColor} roughness={0.8} />
|
||||
</mesh>
|
||||
<mesh position={[-0.076, 0.05, 0.01]} scale={[0.3, 1.6, 0.6]}>
|
||||
<sphereGeometry args={[0.038, 16, 16]} />
|
||||
<meshStandardMaterial color={mii.hairColor} roughness={0.8} />
|
||||
</mesh>
|
||||
<mesh position={[0.076, 0.05, 0.01]} scale={[0.3, 1.6, 0.6]}>
|
||||
<sphereGeometry args={[0.038, 16, 16]} />
|
||||
<meshStandardMaterial color={mii.hairColor} roughness={0.8} />
|
||||
</mesh>
|
||||
</group>
|
||||
)}
|
||||
|
||||
{mii.hairStyle === 'modern' && (
|
||||
<group>
|
||||
<mesh position={[0, 0.16, -0.01]} scale={[1.05, 0.7, 1.05]}>
|
||||
<sphereGeometry args={[0.08, 16, 16]} />
|
||||
<meshStandardMaterial color={mii.hairColor} roughness={0.8} />
|
||||
</mesh>
|
||||
<mesh position={[0, 0.19, 0.02]} rotation={[-0.3, 0, 0]} scale={[0.8, 1.2, 0.8]}>
|
||||
<coneGeometry args={[0.04, 0.08, 4]} />
|
||||
<meshStandardMaterial color={mii.hairColor} roughness={0.8} />
|
||||
</mesh>
|
||||
<mesh position={[-0.076, 0.09, 0.01]} scale={[0.3, 1.0, 0.5]}>
|
||||
<sphereGeometry args={[0.03, 8, 8]} />
|
||||
<meshStandardMaterial color={mii.hairColor} roughness={0.8} />
|
||||
</mesh>
|
||||
<mesh position={[0.076, 0.09, 0.01]} scale={[0.3, 1.0, 0.5]}>
|
||||
<sphereGeometry args={[0.03, 8, 8]} />
|
||||
<meshStandardMaterial color={mii.hairColor} roughness={0.8} />
|
||||
</mesh>
|
||||
</group>
|
||||
)}
|
||||
|
||||
{mii.hasCap && (
|
||||
<group position={[0, 0.17, 0.01]}>
|
||||
<mesh scale={[1.05, 0.65, 1.05]}>
|
||||
<sphereGeometry args={[0.08, 16, 16]} />
|
||||
<meshStandardMaterial color={mii.capColor} roughness={0.5} />
|
||||
</mesh>
|
||||
<mesh position={[0, 0, -0.08]} rotation={[0.1, 0, 0]}>
|
||||
<boxGeometry args={[0.11, 0.008, 0.08]} />
|
||||
<meshStandardMaterial color={mii.capColor} roughness={0.5} />
|
||||
</mesh>
|
||||
</group>
|
||||
)}
|
||||
|
||||
{mii.hasHat && (
|
||||
<group position={[0, 0.17, 0]}>
|
||||
<mesh>
|
||||
<cylinderGeometry args={[0.055, 0.065, 0.05, 16]} />
|
||||
<meshStandardMaterial color={mii.hatColor} roughness={0.8} />
|
||||
</mesh>
|
||||
<mesh position={[0, -0.02, 0]}>
|
||||
<cylinderGeometry args={[0.12, 0.12, 0.006, 16]} />
|
||||
<meshStandardMaterial color={mii.hatColor} roughness={0.8} />
|
||||
</mesh>
|
||||
</group>
|
||||
)}
|
||||
|
||||
<group position={[-0.028, 0.11, 0.07]} rotation={[0.08, -0.15, 0]}>
|
||||
<mesh>
|
||||
<sphereGeometry args={[0.011, 16, 16]} />
|
||||
<meshBasicMaterial color="#111827" />
|
||||
</mesh>
|
||||
<mesh position={[0.004, 0.004, 0.008]}>
|
||||
<sphereGeometry args={[0.004, 8, 8]} />
|
||||
<meshBasicMaterial color="#ffffff" />
|
||||
</mesh>
|
||||
{/* Cabeça do Avatar: Toon Head do Dicebear em Billboard com efeito de pulo ao falar */}
|
||||
<group ref={headRef} position={[0, 0.16, 0]}>
|
||||
<Billboard follow={true}>
|
||||
<Image
|
||||
url={avatarUrl}
|
||||
transparent
|
||||
scale={[0.24, 0.24]}
|
||||
/>
|
||||
</Billboard>
|
||||
</group>
|
||||
|
||||
<group position={[0.028, 0.11, 0.07]} rotation={[0.08, 0.15, 0]}>
|
||||
<mesh>
|
||||
<sphereGeometry args={[0.011, 16, 16]} />
|
||||
<meshBasicMaterial color="#111827" />
|
||||
{/* Base cônica para dar uma sustentação 3D estilizada */}
|
||||
<mesh position={[0, 0.03, 0]}>
|
||||
<coneGeometry args={[0.045, 0.1, 32]} />
|
||||
<meshStandardMaterial color="#475569" roughness={0.5} metalness={0.2} transparent opacity={0.8} />
|
||||
</mesh>
|
||||
<mesh position={[0.004, 0.004, 0.008]}>
|
||||
<sphereGeometry args={[0.004, 8, 8]} />
|
||||
<meshBasicMaterial color="#ffffff" />
|
||||
</mesh>
|
||||
</group>
|
||||
|
||||
<mesh position={[-0.028, 0.128, 0.072]} rotation={[0.05, -0.15, 0.08]}>
|
||||
<boxGeometry args={[0.028, 0.005, 0.005]} />
|
||||
<meshBasicMaterial color="#18181b" />
|
||||
</mesh>
|
||||
<mesh position={[0.028, 0.128, 0.072]} rotation={[0.05, 0.15, -0.08]}>
|
||||
<boxGeometry args={[0.028, 0.005, 0.005]} />
|
||||
<meshBasicMaterial color="#18181b" />
|
||||
</mesh>
|
||||
|
||||
<mesh position={[0, 0.09, 0.076]} scale={[1, 1.2, 1.2]}>
|
||||
<sphereGeometry args={[0.008, 8, 8]} />
|
||||
<meshStandardMaterial color={mii.skin} roughness={0.6} />
|
||||
</mesh>
|
||||
|
||||
<mesh position={[-0.042, 0.08, 0.071]} scale={[1, 0.6, 0.2]}>
|
||||
<sphereGeometry args={[0.01, 16, 16]} />
|
||||
<meshBasicMaterial color="#f43f5e" transparent opacity={0.5} />
|
||||
</mesh>
|
||||
<mesh position={[0.042, 0.08, 0.071]} scale={[1, 0.6, 0.2]}>
|
||||
<sphereGeometry args={[0.01, 16, 16]} />
|
||||
<meshBasicMaterial color="#f43f5e" transparent opacity={0.5} />
|
||||
</mesh>
|
||||
|
||||
<mesh position={[0, 0.062, 0.073]} rotation={[0, 0, Math.PI]}>
|
||||
<torusGeometry args={[0.014, 0.003, 8, 24, Math.PI]} />
|
||||
<meshBasicMaterial color="#b91c1c" />
|
||||
</mesh>
|
||||
|
||||
{mii.beard && (
|
||||
<group>
|
||||
<mesh position={[0, 0.075, 0.075]}>
|
||||
<boxGeometry args={[0.04, 0.006, 0.005]} />
|
||||
<meshBasicMaterial color="#713f12" />
|
||||
</mesh>
|
||||
<mesh position={[0, 0.045, 0.072]} scale={[1.2, 1, 1]}>
|
||||
<sphereGeometry args={[0.015, 8, 8]} />
|
||||
<meshStandardMaterial color="#713f12" roughness={0.8} />
|
||||
</mesh>
|
||||
</group>
|
||||
)}
|
||||
|
||||
{mii.hasGlasses && (
|
||||
<group position={[0, 0.11, 0.072]}>
|
||||
<mesh position={[-0.028, 0, 0.002]}>
|
||||
<ringGeometry args={[0.016, 0.019, 16]} />
|
||||
<meshBasicMaterial color={mii.glassesColor} />
|
||||
</mesh>
|
||||
<mesh position={[0.028, 0, 0.002]}>
|
||||
<ringGeometry args={[0.016, 0.019, 16]} />
|
||||
<meshBasicMaterial color={mii.glassesColor} />
|
||||
</mesh>
|
||||
<mesh position={[0, 0, 0.002]}>
|
||||
<boxGeometry args={[0.028, 0.004, 0.002]} />
|
||||
<meshBasicMaterial color={mii.glassesColor} />
|
||||
</mesh>
|
||||
</group>
|
||||
)}
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user