React中Spline组件滚动时自动缩放问题求助

问题描述 #

我一直尝试在网站滚动时保持Spline Viewer组件的尺寸不变，即便在导出设置中关闭了所有缩放效果，仍无法控制该动画。相关代码如下：

import React from 'react';
import {TypeAnimation} from 'react-type-animation';
import {motion} from 'framer-motion';
import {fadeIn} from '../variants';
import { Suspense } from 'react';
import Loading from './Loading';
const Spline = React.lazy(() => import('@splinetool/react-spline'));
const Banner = () => {
  return (
    <section className='h-screen pb-10 container mx-auto  flex items-center' id='home'>
      <div className='flex-col relative container flex  justify-between h-screen items-center'>
        <div className='flex w-full self-center flex-col justify-center'>
          <div className='text-center'>
            <motion.h1 variants={fadeIn('up, 0.3')} initial="hidden" whileInView={'show'} viewport={{ once: false, amount: 0.7 }} className='text-[4rem] mb-[5rem]'>Hello World!</motion.h1>
          </div>
        </div>
        <div className='absolute h-screen w-screen mb-10 my-3 flex items-center justify-center'>
        <Suspense fallback={<Loading />}>
          <Spline
          className=''
            scene="https://prod.spline.design/BSToMHfvR0DfJewQ/scene.splinecode"
          />
          </Suspense>
        </div>
      </div>
    </section>
  );
};

export default Banner;

解决方案 #

1. 锁定Spline相机缩放并设置固定尺寸 #

直接给Spline组件添加camera属性锁定缩放行为，同时设置固定宽高：

<Spline
  className="w-[800px] h-[600px]"
  scene="https://prod.spline.design/BSToMHfvR0DfJewQ/scene.splinecode"
  camera={{ zoom: 1, disableZoom: true }}
/>

disableZoom: true会禁用所有缩放交互，zoom: 1强制初始缩放比例为1，配合固定宽高确保组件尺寸稳定。

2. 调整父容器定位逻辑 #

原父容器的h-screen w-screen会随视口滚动改变尺寸，替换为基于transform的居中方式，避免容器尺寸波动：

<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
  <Suspense fallback={<Loading />}>
    <Spline
      className="w-[800px] h-[600px]"
      scene="https://prod.spline.design/BSToMHfvR0DfJewQ/scene.splinecode"
      camera={{ disableZoom: true, zoom: 1 }}
    />
  </Suspense>
</div>

这种居中方式不依赖视口尺寸，滚动时容器的位置和大小都不会变化。

3. CSS强制固定canvas尺寸（兜底方案） #

如果上述方法仍无效，用CSS强制覆盖Spline内部canvas的样式：

.fixed-spline {
  width: 800px !important;
  height: 600px !important;
  transform: none !important;
}

然后给Spline组件添加该类名：

<Spline className="fixed-spline" ... />

通过!important强制覆盖内部样式，彻底禁止缩放和尺寸变化。

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