如何在react-three-fiber中加载带SVG纹理的GLTF并解决模糊问题

方案一：将drei的

drei的<SVG>组件基于HTML矢量渲染，你可以把它绘制到Canvas上，再将Canvas转为Three.js纹理，以此保留SVG的清晰质感：

1. 创建隐藏Canvas元素，将SVG内容绘制到Canvas
2. 用CanvasTexture把Canvas转为纹理
3. 将纹理绑定到网格材质上

示例代码：

import { useRef, useEffect } from 'react'
import { CanvasTexture, MeshBasicMaterial, Vector3 } from 'three'
import { useFrame, useLoader } from '@react-three/fiber'
import { SVG } from '@react-three/drei'
import { SVGLoader } from 'three/addons/loaders/SVGLoader.js'

function SVGTextureMesh({ svgPath, ...props }) {
  const canvasRef = useRef(document.createElement('canvas'))
  const textureRef = useRef()
  const meshRef = useRef()

  useEffect(() => {
    const canvas = canvasRef.current
    const ctx = canvas.getContext('2d')
    // 加载SVG并获取内容
    const svgData = useLoader(SVGLoader, svgPath)
    const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
    svgElement.innerHTML = svgData.svgString

    // 设置Canvas尺寸（放大4倍确保缩放后清晰）
    const svgWidth = svgElement.viewBox.baseVal.width || 512
    const svgHeight = svgElement.viewBox.baseVal.height || 512
    canvas.width = svgWidth * 4
    canvas.height = svgHeight * 4

    // 把SVG绘制到Canvas
    const img = new Image()
    img.onload = () => {
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      textureRef.current.needsUpdate = true
    }
    img.src = `data:image/svg+xml;base64,${btoa(svgElement.outerHTML)}`

    // 创建纹理并配置
    textureRef.current = new CanvasTexture(canvas)
    textureRef.current.magFilter = CanvasTexture.LinearFilter
    textureRef.current.minFilter = CanvasTexture.LinearFilter
    textureRef.current.generateMipmaps = false

    return () => textureRef.current?.dispose()
  }, [svgPath])

  useFrame(() => {
    if (meshRef.current && textureRef.current) {
      meshRef.current.material.map = textureRef.current
    }
  })

  return (
    <mesh ref={meshRef} {...props}>
      <boxGeometry />
      <meshBasicMaterial />
    </mesh>
  )
}

方案二：同步

如果不想转纹理，可直接通过useRef监听网格的变换数据，实时同步给<SVG>组件：

1. 给网格添加ref，获取其位置、旋转、缩放属性
2. 在useFrame中更新<SVG>的对应参数，匹配网格状态
3. 根据网格几何体尺寸调整SVG大小

示例代码：

import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { SVG } from '@react-three/drei'
import { Vector3 } from 'three'

function SVGSyncedMesh({ svgPath, ...props }) {
  const meshRef = useRef()
  const svgRef = useRef()

  useFrame(() => {
    if (!meshRef.current || !svgRef.current) return
    // 同步位置与旋转
    svgRef.current.position.copy(meshRef.current.position)
    svgRef.current.rotation.copy(meshRef.current.rotation)
    // 匹配网格尺寸
    const size = new Vector3()
    meshRef.current.geometry.computeBoundingBox()
    meshRef.current.geometry.boundingBox.getSize(size)
    svgRef.current.scale.set(size.x, size.y, size.z)
  })

  return (
    <>
      <mesh ref={meshRef} {...props}>
        <boxGeometry />
        <meshBasicMaterial transparent opacity={0} /> {/* 透明占位，仅提供运动数据 */}
      </mesh>
      <SVG ref={svgRef} url={svgPath} />
    </>
  )
}

方案三：优化useTexture加载SVG的清晰度 #

若坚持用useTexture加载SVG，可通过调整纹理参数提升清晰度：

• 设置magFilter和minFilter为LinearFilter，避免像素化
• 关闭generateMipmaps，防止自动生成低分辨率缩略图
• 开启各向异性过滤，提升斜向视角的清晰度

示例代码：

import { useTexture } from '@react-three/fiber'
import { LinearFilter } from 'three'

function SVGTextureOptimized({ svgPath, ...props }) {
  const texture = useTexture(svgPath)
  texture.magFilter = LinearFilter
  texture.minFilter = LinearFilter
  texture.generateMipmaps = false
  texture.anisotropy = 16 // 利用GPU各向异性过滤增强清晰度

  return (
    <mesh {...props}>
      <boxGeometry />
      <meshBasicMaterial map={texture} />
    </mesh>
  )
}

额外注意事项 #

• 不要在GLTF中直接嵌入SVG，Three.js对GLTF内的SVG纹理支持有限，易出现编码解析错误
• 作为纹理使用的SVG，尽量简化路径和滤镜，避免Canvas绘制性能损耗
• 若SVG包含动画，绘制到Canvas后需设置texture.needsUpdate = true来触发纹理刷新

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