500 lines
16 KiB
TypeScript
500 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import { useRef, useState, useCallback, useMemo, Suspense, useEffect } from "react";
|
||
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
||
import { OrbitControls, PerspectiveCamera, Html, useHelper } from "@react-three/drei";
|
||
import type { OrbitControls as OrbitControlsImpl } from "three-stdlib";
|
||
import * as THREE from "three";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
// 角度配置常量
|
||
const AZIMUTH_OPTIONS = [
|
||
{ angle: 0, label: "正前方", value: "front" },
|
||
{ angle: 45, label: "前右", value: "front-right" },
|
||
{ angle: 90, label: "右侧", value: "right" },
|
||
{ angle: 135, label: "后右", value: "back-right" },
|
||
{ angle: 180, label: "正后方", value: "back" },
|
||
{ angle: 225, label: "后左", value: "back-left" },
|
||
{ angle: 270, label: "左侧", value: "left" },
|
||
{ angle: 315, label: "前左", value: "front-left" },
|
||
];
|
||
|
||
const ELEVATION_OPTIONS = [
|
||
{ angle: -30, label: "仰视", value: "low" },
|
||
{ angle: 0, label: "平视", value: "eye-level" },
|
||
{ angle: 30, label: "俯视", value: "elevated" },
|
||
{ angle: 60, label: "高角度", value: "high" },
|
||
];
|
||
|
||
const DISTANCE_OPTIONS = [
|
||
{ factor: 0.6, label: "特写", value: "close" },
|
||
{ factor: 1.0, label: "中景", value: "medium" },
|
||
{ factor: 1.8, label: "远景", value: "wide" },
|
||
];
|
||
|
||
interface AngleController3DProps {
|
||
onChange?: (angles: {
|
||
azimuth: string;
|
||
elevation: string;
|
||
distance: string;
|
||
azimuthDegree: number;
|
||
elevationDegree: number;
|
||
distanceFactor: number;
|
||
}) => void;
|
||
initialAzimuth?: number;
|
||
initialElevation?: number;
|
||
initialDistance?: number;
|
||
showObject?: boolean;
|
||
className?: string;
|
||
}
|
||
|
||
// 3D 场景中的相机指示器 - 简约现代风格
|
||
function CameraIndicator({ position }: { position: THREE.Vector3 }) {
|
||
// 计算相机朝向中心的旋转
|
||
const lookAtCenter = useMemo(() => {
|
||
const quaternion = new THREE.Quaternion();
|
||
const up = new THREE.Vector3(0, 1, 0);
|
||
const matrix = new THREE.Matrix4();
|
||
matrix.lookAt(position, new THREE.Vector3(0, 0, 0), up);
|
||
quaternion.setFromRotationMatrix(matrix);
|
||
return quaternion;
|
||
}, [position]);
|
||
|
||
return (
|
||
<group position={position} quaternion={lookAtCenter}>
|
||
{/* 相机主体 - 哑光黑/深灰 */}
|
||
<mesh castShadow>
|
||
<boxGeometry args={[0.28, 0.2, 0.18]} />
|
||
<meshStandardMaterial color="#334155" metalness={0.2} roughness={0.8} />
|
||
</mesh>
|
||
|
||
{/* 相机顶部 */}
|
||
<mesh position={[0, 0.12, -0.02]} castShadow>
|
||
<boxGeometry args={[0.12, 0.06, 0.1]} />
|
||
<meshStandardMaterial color="#1e293b" metalness={0.2} roughness={0.8} />
|
||
</mesh>
|
||
|
||
{/* 镜头筒 - 金属质感 */}
|
||
<mesh position={[0, 0, 0.14]} rotation={[Math.PI / 2, 0, 0]} castShadow>
|
||
<cylinderGeometry args={[0.08, 0.1, 0.12, 24]} />
|
||
<meshStandardMaterial color="#475569" metalness={0.6} roughness={0.3} />
|
||
</mesh>
|
||
|
||
{/* 镜头玻璃 - 蓝色反光 */}
|
||
<mesh position={[0, 0, 0.21]}>
|
||
<circleGeometry args={[0.07, 24]} />
|
||
<meshStandardMaterial
|
||
color="#3b82f6"
|
||
metalness={0.9}
|
||
roughness={0.1}
|
||
transparent
|
||
opacity={0.9}
|
||
/>
|
||
</mesh>
|
||
|
||
{/* 视野指示 - 极简线条 */}
|
||
<group position={[0, 0, 0.2]}>
|
||
<line>
|
||
<bufferGeometry>
|
||
<bufferAttribute
|
||
attach="attributes-position"
|
||
count={5}
|
||
args={[
|
||
new Float32Array([
|
||
-0.3, -0.2, 1.0, // 左下
|
||
0.3, -0.2, 1.0, // 右下
|
||
0.3, 0.2, 1.0, // 右上
|
||
-0.3, 0.2, 1.0, // 左上
|
||
-0.3, -0.2, 1.0, // 闭合
|
||
]),
|
||
3
|
||
]}
|
||
/>
|
||
</bufferGeometry>
|
||
<lineBasicMaterial color="#3b82f6" opacity={0.3} transparent />
|
||
</line>
|
||
|
||
{/* 连接线 */}
|
||
{[
|
||
[-0.3, -0.2, 1.0], [0.3, -0.2, 1.0], [0.3, 0.2, 1.0], [-0.3, 0.2, 1.0]
|
||
].map((point, i) => (
|
||
<line key={i}>
|
||
<bufferGeometry>
|
||
<bufferAttribute
|
||
attach="attributes-position"
|
||
count={2}
|
||
args={[
|
||
new Float32Array([0, 0, 0, ...point]),
|
||
3
|
||
]}
|
||
/>
|
||
</bufferGeometry>
|
||
<lineBasicMaterial color="#3b82f6" opacity={0.15} transparent />
|
||
</line>
|
||
))}
|
||
</group>
|
||
</group>
|
||
);
|
||
}
|
||
|
||
// 方位角刻度圆环 - 更加隐形
|
||
function AzimuthRing() {
|
||
return (
|
||
<group>
|
||
{/* 圆环 */}
|
||
<mesh rotation={[-Math.PI / 2, 0, 0]}>
|
||
<ringGeometry args={[1.98, 2.02, 64]} />
|
||
<meshBasicMaterial color="#94a3b8" opacity={0.2} transparent side={THREE.DoubleSide} />
|
||
</mesh>
|
||
|
||
{/* 方位角标签 */}
|
||
{AZIMUTH_OPTIONS.map((opt) => {
|
||
const rad = (opt.angle * Math.PI) / 180;
|
||
const x = Math.sin(rad) * 2.3;
|
||
const z = Math.cos(rad) * 2.3;
|
||
return (
|
||
<Html key={opt.value} position={[x, 0, z]} center>
|
||
<div className="text-[10px] font-medium text-muted-foreground whitespace-nowrap select-none pointer-events-none bg-background/50 px-1.5 py-0.5 rounded-full border shadow-sm backdrop-blur-[2px]">
|
||
{opt.label}
|
||
</div>
|
||
</Html>
|
||
);
|
||
})}
|
||
</group>
|
||
);
|
||
}
|
||
|
||
// 目标物体 - 极简风格
|
||
function TargetObject() {
|
||
return (
|
||
<group>
|
||
{/* 极简几何体代表目标 */}
|
||
<mesh position={[0, 0.25, 0]}>
|
||
<boxGeometry args={[0.5, 0.5, 0.5]} />
|
||
<meshStandardMaterial color="#e2e8f0" metalness={0.1} roughness={0.8} />
|
||
</mesh>
|
||
|
||
{/* 底部阴影 */}
|
||
<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.01, 0]}>
|
||
<circleGeometry args={[0.6, 32]} />
|
||
<meshBasicMaterial color="#000000" opacity={0.1} transparent />
|
||
</mesh>
|
||
|
||
{/* 网格地面 */}
|
||
<gridHelper args={[4, 8, 0xe2e8f0, 0xf1f5f9]} position={[0, 0, 0]} />
|
||
</group>
|
||
);
|
||
}
|
||
|
||
// 3D 控制场景
|
||
function Scene({
|
||
azimuth,
|
||
elevation,
|
||
distance,
|
||
onAngleChange,
|
||
showObject,
|
||
}: {
|
||
azimuth: number;
|
||
elevation: number;
|
||
distance: number;
|
||
onAngleChange: (azimuth: number, elevation: number) => void;
|
||
showObject: boolean;
|
||
}) {
|
||
const controlsRef = useRef<OrbitControlsImpl>(null);
|
||
const ghostCameraRef = useRef<THREE.PerspectiveCamera>(null);
|
||
const mainCameraRef = useRef<THREE.PerspectiveCamera>(null);
|
||
|
||
// 计算目标拍摄位置（CameraIndicator的位置）
|
||
const targetPosition = useMemo(() => {
|
||
const azimuthRad = (azimuth * Math.PI) / 180;
|
||
const elevationRad = (elevation * Math.PI) / 180;
|
||
const radius = 2 * distance;
|
||
|
||
const x = radius * Math.cos(elevationRad) * Math.sin(azimuthRad);
|
||
const y = radius * Math.sin(elevationRad);
|
||
const z = radius * Math.cos(elevationRad) * Math.cos(azimuthRad);
|
||
|
||
return new THREE.Vector3(x, y, z);
|
||
}, [azimuth, elevation, distance]);
|
||
|
||
// 同步 Ghost Camera 位置到 state
|
||
// 当 state 改变时，更新 Ghost Camera 位置
|
||
useEffect(() => {
|
||
if (ghostCameraRef.current) {
|
||
ghostCameraRef.current.position.copy(targetPosition);
|
||
ghostCameraRef.current.lookAt(0, 0, 0);
|
||
}
|
||
}, [targetPosition]);
|
||
|
||
// 监听控制器变化 (用户拖拽)
|
||
const handleControlsChange = useCallback(() => {
|
||
if (ghostCameraRef.current) {
|
||
const camera = ghostCameraRef.current;
|
||
const spherical = new THREE.Spherical();
|
||
spherical.setFromVector3(camera.position);
|
||
|
||
// 将球面坐标转换为我们的角度系统
|
||
let newAzimuth = THREE.MathUtils.radToDeg(spherical.theta);
|
||
if (newAzimuth < 0) newAzimuth += 360;
|
||
|
||
const newElevation = 90 - THREE.MathUtils.radToDeg(spherical.phi);
|
||
|
||
// 只有当角度变化超过阈值时才触发更新，避免浮点数抖动
|
||
if (Math.abs(newAzimuth - azimuth) > 0.5 || Math.abs(newElevation - elevation) > 0.5) {
|
||
onAngleChange(Math.round(newAzimuth), Math.round(newElevation));
|
||
}
|
||
}
|
||
}, [onAngleChange, azimuth, elevation]);
|
||
|
||
return (
|
||
<>
|
||
{/* 主相机：上帝视角，固定位置 */}
|
||
<PerspectiveCamera
|
||
makeDefault
|
||
ref={mainCameraRef}
|
||
position={[3.5, 2.5, 3.5]}
|
||
fov={45}
|
||
onUpdate={(c) => c.lookAt(0, 0, 0)}
|
||
/>
|
||
|
||
{/* 幽灵相机：用于 OrbitControls 交互，不可见 */}
|
||
<PerspectiveCamera ref={ghostCameraRef} position={targetPosition} />
|
||
|
||
{/* 控制器绑定到幽灵相机 */}
|
||
<OrbitControls
|
||
ref={controlsRef}
|
||
camera={ghostCameraRef.current as any}
|
||
enablePan={false}
|
||
enableZoom={false}
|
||
minPolarAngle={Math.PI / 6}
|
||
maxPolarAngle={(Math.PI * 5) / 6}
|
||
onChange={handleControlsChange}
|
||
/>
|
||
|
||
{/* 灯光 */}
|
||
<ambientLight intensity={0.5} />
|
||
<directionalLight position={[5, 5, 5]} intensity={1} castShadow />
|
||
<pointLight position={[-5, 5, -5]} intensity={0.5} />
|
||
|
||
{/* 场景内容 */}
|
||
{showObject && <TargetObject />}
|
||
<AzimuthRing />
|
||
|
||
{/* 拍摄相机模型（在目标位置渲染） */}
|
||
<CameraIndicator position={targetPosition} />
|
||
|
||
{/* 坐标轴辅助 */}
|
||
<axesHelper args={[0.5]} />
|
||
</>
|
||
);
|
||
}
|
||
|
||
// 主组件
|
||
export function AngleController3D({
|
||
onChange,
|
||
initialAzimuth = 45,
|
||
initialElevation = 0,
|
||
initialDistance = 1.0,
|
||
showObject = true,
|
||
className,
|
||
}: AngleController3DProps) {
|
||
const [azimuth, setAzimuth] = useState(initialAzimuth);
|
||
const [elevation, setElevation] = useState(initialElevation);
|
||
const [distance, setDistance] = useState(initialDistance);
|
||
|
||
// 将角度映射到最近的预设值
|
||
const getClosestAzimuth = useCallback((deg: number) => {
|
||
let minDiff = 360;
|
||
let closest = AZIMUTH_OPTIONS[0];
|
||
for (const opt of AZIMUTH_OPTIONS) {
|
||
const diff = Math.min(Math.abs(deg - opt.angle), 360 - Math.abs(deg - opt.angle));
|
||
if (diff < minDiff) {
|
||
minDiff = diff;
|
||
closest = opt;
|
||
}
|
||
}
|
||
return closest;
|
||
}, []);
|
||
|
||
const getClosestElevation = useCallback((deg: number) => {
|
||
let minDiff = 180;
|
||
let closest = ELEVATION_OPTIONS[0];
|
||
for (const opt of ELEVATION_OPTIONS) {
|
||
const diff = Math.abs(deg - opt.angle);
|
||
if (diff < minDiff) {
|
||
minDiff = diff;
|
||
closest = opt;
|
||
}
|
||
}
|
||
return closest;
|
||
}, []);
|
||
|
||
const getClosestDistance = useCallback((factor: number) => {
|
||
let minDiff = 10;
|
||
let closest = DISTANCE_OPTIONS[0];
|
||
for (const opt of DISTANCE_OPTIONS) {
|
||
const diff = Math.abs(factor - opt.factor);
|
||
if (diff < minDiff) {
|
||
minDiff = diff;
|
||
closest = opt;
|
||
}
|
||
}
|
||
return closest;
|
||
}, []);
|
||
|
||
// 处理角度变化
|
||
const handleAngleChange = useCallback(
|
||
(newAzimuth: number, newElevation: number) => {
|
||
setAzimuth(newAzimuth);
|
||
setElevation(newElevation);
|
||
|
||
const closestAzimuth = getClosestAzimuth(newAzimuth);
|
||
const closestElevation = getClosestElevation(newElevation);
|
||
const closestDistance = getClosestDistance(distance);
|
||
|
||
onChange?.({
|
||
azimuth: closestAzimuth.value,
|
||
elevation: closestElevation.value,
|
||
distance: closestDistance.value,
|
||
azimuthDegree: newAzimuth,
|
||
elevationDegree: newElevation,
|
||
distanceFactor: distance,
|
||
});
|
||
},
|
||
[distance, getClosestAzimuth, getClosestElevation, getClosestDistance, onChange]
|
||
);
|
||
|
||
// 处理距离变化
|
||
const handleDistanceChange = useCallback(
|
||
(newDistance: number) => {
|
||
setDistance(newDistance);
|
||
|
||
const closestAzimuth = getClosestAzimuth(azimuth);
|
||
const closestElevation = getClosestElevation(elevation);
|
||
const closestDistance = getClosestDistance(newDistance);
|
||
|
||
onChange?.({
|
||
azimuth: closestAzimuth.value,
|
||
elevation: closestElevation.value,
|
||
distance: closestDistance.value,
|
||
azimuthDegree: azimuth,
|
||
elevationDegree: elevation,
|
||
distanceFactor: newDistance,
|
||
});
|
||
},
|
||
[azimuth, elevation, getClosestAzimuth, getClosestElevation, getClosestDistance, onChange]
|
||
);
|
||
|
||
// 快速选择预设角度
|
||
const handlePresetClick = useCallback(
|
||
(presetAzimuth: number, presetElevation: number) => {
|
||
setAzimuth(presetAzimuth);
|
||
setElevation(presetElevation);
|
||
|
||
const closestAzimuth = getClosestAzimuth(presetAzimuth);
|
||
const closestElevation = getClosestElevation(presetElevation);
|
||
const closestDistance = getClosestDistance(distance);
|
||
|
||
onChange?.({
|
||
azimuth: closestAzimuth.value,
|
||
elevation: closestElevation.value,
|
||
distance: closestDistance.value,
|
||
azimuthDegree: presetAzimuth,
|
||
elevationDegree: presetElevation,
|
||
distanceFactor: distance,
|
||
});
|
||
},
|
||
[distance, getClosestAzimuth, getClosestElevation, getClosestDistance, onChange]
|
||
);
|
||
|
||
const currentAzimuth = getClosestAzimuth(azimuth);
|
||
const currentElevation = getClosestElevation(elevation);
|
||
const currentDistance = getClosestDistance(distance);
|
||
|
||
return (
|
||
<div className={cn("flex flex-col gap-4", className)}>
|
||
{/* 3D 视图 */}
|
||
<div className="relative aspect-square w-full max-w-[400px] mx-auto rounded-xl overflow-hidden bg-gradient-to-b from-slate-100 to-white border border-slate-200 shadow-sm dark:from-slate-900 dark:to-slate-950 dark:border-slate-800">
|
||
<Canvas>
|
||
<Suspense fallback={null}>
|
||
<Scene
|
||
azimuth={azimuth}
|
||
elevation={elevation}
|
||
distance={distance}
|
||
onAngleChange={handleAngleChange}
|
||
showObject={showObject}
|
||
/>
|
||
</Suspense>
|
||
</Canvas>
|
||
|
||
{/* 当前角度显示 - 悬浮卡片风格 */}
|
||
<div className="absolute bottom-3 left-3 right-3 flex justify-between text-xs font-medium text-foreground/80 bg-background/80 backdrop-blur-md rounded-lg px-3 py-2 border shadow-sm select-none pointer-events-none">
|
||
<span>方位: {currentAzimuth.label} ({azimuth}°)</span>
|
||
<span>仰角: {currentElevation.label} ({elevation}°)</span>
|
||
</div>
|
||
|
||
{/* 操作提示 */}
|
||
<div className="absolute top-3 left-3 text-[10px] font-medium text-muted-foreground bg-background/50 backdrop-blur-sm rounded-full px-2 py-1 border border-border/50 select-none pointer-events-none">
|
||
🖱️ 拖拽旋转相机位置
|
||
</div>
|
||
</div>
|
||
|
||
{/* 快速预设按钮 */}
|
||
<div className="space-y-3">
|
||
<div className="text-sm font-medium text-foreground">快速选择</div>
|
||
<div className="grid grid-cols-4 gap-2">
|
||
{[
|
||
{ label: "正前", azimuth: 0, elevation: 0 },
|
||
{ label: "前3/4", azimuth: 45, elevation: 0 },
|
||
{ label: "侧面", azimuth: 90, elevation: 0 },
|
||
{ label: "后3/4", azimuth: 135, elevation: 0 },
|
||
{ label: "正后", azimuth: 180, elevation: 0 },
|
||
{ label: "俯视", azimuth: 0, elevation: 60 },
|
||
{ label: "仰视", azimuth: 0, elevation: -30 },
|
||
{ label: "鸟瞰", azimuth: 45, elevation: 60 },
|
||
].map((preset) => (
|
||
<button
|
||
type="button"
|
||
key={preset.label}
|
||
onClick={() => handlePresetClick(preset.azimuth, preset.elevation)}
|
||
className={cn(
|
||
"px-2 py-1.5 text-xs rounded-md border transition-all duration-200 font-medium",
|
||
currentAzimuth.angle === preset.azimuth &&
|
||
currentElevation.angle === preset.elevation
|
||
? "bg-primary text-primary-foreground border-primary shadow-sm"
|
||
: "bg-background hover:bg-accent hover:text-accent-foreground border-border text-muted-foreground"
|
||
)}
|
||
>
|
||
{preset.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 距离控制 */}
|
||
<div className="space-y-2">
|
||
<div className="text-sm font-medium text-foreground">镜头距离</div>
|
||
<div className="flex p-1 bg-muted rounded-lg">
|
||
{DISTANCE_OPTIONS.map((opt) => (
|
||
<button
|
||
type="button"
|
||
key={opt.value}
|
||
onClick={() => handleDistanceChange(opt.factor)}
|
||
className={cn(
|
||
"flex-1 px-3 py-1.5 text-xs rounded-md transition-all duration-200 font-medium",
|
||
currentDistance.value === opt.value
|
||
? "bg-background text-foreground shadow-sm"
|
||
: "text-muted-foreground hover:text-foreground"
|
||
)}
|
||
>
|
||
{opt.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default AngleController3D;
|