fix: 调整 3D 相机视场角和 Resize 逻辑,防止控制器显示不全

This commit is contained in:
Your Name 2026-01-11 11:26:10 +08:00
parent 13a4784fa5
commit ea45b7fbc5

View File

@ -178,8 +178,8 @@ export function QwenCameraWidget({
sceneRef.current = scene;
// 相机
const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.set(4, 3.5, 4);
const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
camera.position.set(4.5, 4, 4.5);
camera.lookAt(0, 0.3, 0);
cameraRef.current = camera;
@ -330,11 +330,26 @@ export function QwenCameraWidget({
};
animate();
// 监听容器大小变化
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
const { width, height } = entry.contentRect;
if (width && height && cameraRef.current && rendererRef.current) {
cameraRef.current.aspect = width / height;
cameraRef.current.updateProjectionMatrix();
rendererRef.current.setSize(width, height);
}
}
});
resizeObserver.observe(container);
// 清理
return () => {
if (animationIdRef.current) {
cancelAnimationFrame(animationIdRef.current);
}
resizeObserver.disconnect();
renderer.dispose();
scene.clear();
};