如何在Three.js中使用SVG作为可缩放纹理？

嘿，这个需求完全可以实现！默认的THREE.TextureLoader加载SVG时会直接把它光栅化成位图，自然就丢了矢量的无损缩放优势。我们需要换一种思路，让SVG始终以矢量形式渲染到Canvas，再把Canvas作为Three.js的动态纹理源，这样就能在任何缩放级别下保持清晰。

下面是具体的实现步骤和代码示例：

核心思路 #

不直接用SVG作为纹理，而是：

• 把SVG加载为Image对象（保持矢量特性）
• 创建一个动态更新的Canvas，将SVG绘制到Canvas上
• 使用THREE.CanvasTexture把Canvas作为纹理，它会自动监听Canvas的变化并更新纹理
• 在相机缩放、窗口 resize 等场景下，重新调整Canvas尺寸并重新绘制SVG，确保纹理清晰度

具体代码实现 #

1. 加载SVG为Image对象 #

首先我们需要把SVG文件加载成Image，这样才能绘制到Canvas上：

async function loadSVGAsImage(svgUrl) {
  const response = await fetch(svgUrl);
  const svgText = await response.text();
  // 将SVG文本转为Blob，再创建可访问的URL
  const blob = new Blob([svgText], { type: 'image/svg+xml' });
  const url = URL.createObjectURL(blob);
  
  const img = new Image();
  // 等待Image加载完成
  await new Promise(resolve => {
    img.onload = resolve;
    img.src = url;
  });
  
  // 释放临时URL
  URL.revokeObjectURL(url);
  return img;
}

2. 初始化Canvas纹理和3D场景 #

接下来创建Canvas、CanvasTexture，并把纹理应用到球体上：

let svgImage;
let canvasTexture;
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 假设你已经有了scene、camera、renderer这些基础对象
async function initSVGTexture() {
  svgImage = await loadSVGAsImage('someimage.svg');
  
  // 初始化Canvas尺寸（用设备像素比保证高清）
  updateCanvasTexture();
  
  // 创建Canvas纹理
  canvasTexture = new THREE.CanvasTexture(canvas);
  
  // 创建球体并应用纹理
  const sphereGeo = new THREE.SphereGeometry(5, 64, 64);
  const sphereMat = new THREE.MeshBasicMaterial({ map: canvasTexture });
  const sphere = new THREE.Mesh(sphereGeo, sphereMat);
  scene.add(sphere);
}

// 调用初始化函数
initSVGTexture();

3. 动态更新Canvas和纹理 #

写一个函数来更新Canvas尺寸并重新绘制SVG，同时标记纹理需要更新：

function updateCanvasTexture() {
  // 这里可以根据相机距离、窗口大小等调整Canvas尺寸
  // 示例：根据设备像素比和窗口大小设置画布尺寸
  const pixelRatio = window.devicePixelRatio;
  canvas.width = window.innerWidth * pixelRatio;
  canvas.height = window.innerHeight * pixelRatio;
  
  // 清空画布并等比例绘制SVG
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(svgImage, 0, 0, canvas.width, canvas.height);
  
  // 告诉Three.js纹理需要更新
  canvasTexture.needsUpdate = true;
}

4. 监听事件触发更新 #

在窗口大小变化或者相机缩放时，触发纹理更新：

// 监听窗口resize
window.addEventListener('resize', () => {
  updateCanvasTexture();
  // 同步更新相机和渲染器
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

// 如果使用OrbitControls，监听相机变化
controls.addEventListener('change', () => {
  // 根据相机与球体的距离调整Canvas尺寸，距离越近尺寸越大
  const distance = camera.position.distanceTo(sphere.position);
  const scaleFactor = Math.max(1, 30 / distance); // 按需调整比例
  const pixelRatio = window.devicePixelRatio;
  
  canvas.width = svgImage.width * scaleFactor * pixelRatio;
  canvas.height = svgImage.height * scaleFactor * pixelRatio;
  
  ctx.drawImage(svgImage, 0, 0, canvas.width, canvas.height);
  canvasTexture.needsUpdate = true;
});

注意事项 #

• SVG内联样式：确保SVG的样式都是内联的，不要引用外部CSS，否则绘制到Canvas时可能样式丢失。
• 性能平衡：不要把Canvas尺寸设置过大，否则会占用过多内存并影响渲染性能，找到清晰度和性能的平衡点。
• 防抖处理：如果是resize这类高频事件，可以加防抖函数减少重绘次数，避免性能浪费。

内容的提问来源于stack exchange，提问作者Théo Champion