React Three Fiber Canvas响应式失效问题求助

问题描述 #

用其他元素替代Canvas时，页面布局可正常随窗口缩放响应；添加React Three Fiber的Canvas组件后，页面响应式效果完全失效——布局不再跟随窗口尺寸变化调整。

相关代码 #

App.js #

import React from "react";
import Scene from "./Scene";

export default function MainTitle() {
  return (
    <section className="flex flex-auto justify-center items-center w-full h-screen bg-orange-500">
      <div className="flex-row-reverse flex-auto w-1/2 h-full lgs:flex" >

        {/* 3D avatar's face */}
        <div className="w-auto h-2/3 bg-blue-900 lgs:w-1/2 lgs:h-full" name="avatar_face">
          <div style={{ width: "100%", height: "100%" }}>
            <Scene/>
          </div>
        </div>
        
        {/* Greetings */}
        <div className="w-auto h-1/3 bg-blue-400 lgs:bg-red-400 lgs:w-1/2 lgs:h-full"  name="greetings">
          hello
        </div>
      </div>
    </section>
  );
}

Scene.js #

import React, { Suspense, useEffect, useRef } from 'react';
import { Canvas } from '@react-three/fiber';
import { Model } from './Avatar'

export default function Scene() {
  return (
    <Canvas
      camera={{ position: [2, 0, 12.25], fov: 15 }}
      style={{
        backgroundColor: '#111a21',
      }}
      updateDefaultCamera={true}
    >
      <ambientLight intensity={1.25} />
      <directionalLight intensity={0.4} />
      <mesh scale={5} position={[1.17, -2.48, 0]}>
        <Suspense fallback={null}>
          <Model position={[-0.12, -0.1, 0.7]} />
        </Suspense>
      </mesh>
    </Canvas>
  );
}

解决方案 #

1. 让Canvas强制继承父容器尺寸 #

React Three Fiber的Canvas默认可能未正确继承父元素宽高，需显式设置其样式为100%宽高，确保它完全适配父容器：
修改Scene.js中的Canvas组件：

<Canvas
  camera={{ position: [2, 0, 12.25], fov: 15 }}
  style={{
    backgroundColor: '#111a21',
    width: '100%',
    height: '100%' // 添加这行
  }}
  updateDefaultCamera={true}
>

2. 简化布局层级并强化Flex约束 #

移除App.js中包裹Scene的多余div，给包含Canvas的容器添加flex-1类，确保它在Flex布局中正确分配空间：
修改App.js中的avatar_face容器：

<div className="flex-1 h-2/3 bg-blue-900 lgs:w-1/2 lgs:h-full" name="avatar_face">
  <Scene/>
</div>

3. 手动监听窗口Resize事件（可选） #

如果上述方法无效，可手动添加Resize监听，强制Canvas更新尺寸：
在Scene.js中引入useThree钩子并添加监听：

import { Canvas, useThree } from '@react-three/fiber';

export default function Scene() {
  const { gl } = useThree();
  
  useEffect(() => {
    const handleResize = () => {
      const container = gl.domElement.parentElement;
      gl.setSize(container.clientWidth, container.clientHeight);
    };
    window.addEventListener('resize', handleResize);
    // 初始化时执行一次
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, [gl]);

  // ... 其余代码不变
}

4. 检查Tailwind断点配置 #

确认Tailwind配置中正确定义了lgs断点，否则对应的响应式类不会生效，导致布局无法切换：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'lgs': '960px', // 替换为你的目标断点尺寸
      },
    },
  },
};

内容的提问来源于stack exchange，提问作者Yasha_ops