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; sceneRef.current = scene;
// 相机 // 相机
const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000); const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
camera.position.set(4, 3.5, 4); camera.position.set(4.5, 4, 4.5);
camera.lookAt(0, 0.3, 0); camera.lookAt(0, 0.3, 0);
cameraRef.current = camera; cameraRef.current = camera;
@ -330,11 +330,26 @@ export function QwenCameraWidget({
}; };
animate(); 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 () => { return () => {
if (animationIdRef.current) { if (animationIdRef.current) {
cancelAnimationFrame(animationIdRef.current); cancelAnimationFrame(animationIdRef.current);
} }
resizeObserver.disconnect();
renderer.dispose(); renderer.dispose();
scene.clear(); scene.clear();
}; };