如何让React Three Drei的Text组件响应式并自动垂直排列？

一、实现窗口尺寸变化时文本自动缩放 #

通过监听窗口尺寸动态调整Text组件的字号和最大宽度，结合react-three-fiber的useWindowSize钩子即可实现：

• 导入useWindowSize钩子实时获取窗口宽高
• 根据窗口宽度计算缩放比例，同时限制字号的最小/最大值，避免过度缩放
• 给Text组件设置动态maxWidth，确保小屏上文本不会溢出

示例代码：

import { useWindowSize } from '@react-three/fiber'
import { Text } from '@react-three/drei'

function ResponsiveText({ children }) {
  const { width } = useWindowSize()
  // 基于窗口宽度计算字号，限制在0.4~1.2之间
  const fontSize = Math.max(0.4, Math.min(1.2, width / 700))
  // 动态设置最大宽度，适配不同屏幕
  const maxWidth = width / 150

  return (
    <Text
      fontSize={fontSize}
      maxWidth={maxWidth}
      textAlign="center"
      color="white"
    >
      {children}
    </Text>
  )
}

二、获取Text组件高度实现自动垂直堆叠 #

利用@react-three/drei的useMeasure钩子获取3D元素的边界框信息，从而得到文本实际高度，以此自动计算下一个组件的Y轴位置：

• 将Text组件包裹在<group>中，对该group使用useMeasure
• 从返回值的box属性中提取高度（box.max.y - box.min.y）
• 用状态保存已渲染文本的高度，依次计算后续组件的Y轴偏移

示例代码：

import { useRef } from 'react'
import { useMeasure, Text } from '@react-three/drei'

function AutoStackedTexts() {
  // 第一个文本的测量
  const group1Ref = useRef()
  const { box: box1 } = useMeasure(group1Ref)
  const height1 = box1.max.y - box1.min.y

  // 第二个文本的测量
  const group2Ref = useRef()
  const { box: box2 } = useMeasure(group2Ref)
  const height2 = box2.max.y - box2.min.y

  // 计算第二个文本的Y位置：基于第一个文本的高度，加上间距
  const secondTextY = 0 - height1 / 2 - height2 / 2 - 0.2

  return (
    <>
      <group ref={group1Ref} position={[0, 0, 0]}>
        <Text fontSize={1} maxWidth={5} textAlign="center">
          第一行文本
        </Text>
      </group>
      <group ref={group2Ref} position={[0, secondTextY, 0]}>
        <Text fontSize={1} maxWidth={5} textAlign="center">
          第二行文本
        </Text>
      </group>
    </>
  )
}

如果需要动态渲染多个文本，可将逻辑封装为循环，用数组保存每个文本的高度，批量计算位置。

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