GLB格式3DT恤模型转PNG图片方案咨询（含批量及自定义场景）

核心技术选型 #

用Three.js处理GLB模型的加载、渲染与截图——它对GLB格式支持完善，内置WebGL渲染能力，能轻松完成3D场景到2D图片的转换。

一、静态GLB模型生成正面图片 #

步骤1：初始化Three.js基础场景 #

• 创建正射相机（OrthographicCamera），保证正面视角下模型比例无畸变；若追求真实透视感，也可用透视相机，但需固定好相机位置与朝向。
• 添加环境光（AmbientLight）+ 方向光（DirectionalLight），让T恤表面光照均匀，避免暗部细节丢失。
• 初始化WebGLRenderer，设置画布尺寸（如800x800），开启抗锯齿提升截图清晰度。

步骤2：加载并定位GLB模型 #

用GLTFLoader加载GLB文件，加载完成后：

• 调整模型旋转角度（如model.rotation.y = 0），确保正面朝向相机。
• 计算模型包围盒（Box3），自动调整缩放比例，避免模型超出画布范围。
• 将模型添加到场景中。

步骤3：绑定按钮截图逻辑 #

给每个模型对应的按钮绑定点击事件，执行以下操作：

1. 调用renderer.render(scene, camera)确保当前帧渲染完成。
2. 通过renderer.domElement.toDataURL('image/png')将画布内容转为PNG格式的DataURL。
3. 创建<a>标签，设置href为DataURL、download属性为对应模型文件名（如tshirt-1.png），触发点击实现下载。

示例代码片段：

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(800, 800);
document.body.appendChild(renderer.domElement);

// 初始化场景与相机
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-4, 4, 4, -4, 0.1, 100);
camera.position.z = 5;

// 添加灯光
scene.add(new THREE.AmbientLight(0xffffff, 0.6));
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(5, 5, 5);
scene.add(dirLight);

// 加载模型
const loader = new THREE.GLTFLoader();
loader.load('tshirt-1.glb', (gltf) => {
  const model = gltf.scene;
  // 调整模型到正面视角
  model.rotation.y = 0;
  // 自动适配画布缩放
  const box = new THREE.Box3().setFromObject(model);
  const size = box.getSize(new THREE.Vector3());
  const maxDim = Math.max(size.x, size.y, size.z);
  const scale = 3 / maxDim; // 根据画布大小调整缩放系数
  model.scale.setScalar(scale);
  scene.add(model);
});

// 截图按钮点击事件
document.getElementById('capture-btn-1').addEventListener('click', () => {
  renderer.render(scene, camera);
  const dataURL = renderer.domElement.toDataURL('image/png');
  const link = document.createElement('a');
  link.href = dataURL;
  link.download = 'tshirt-1.png';
  link.click();
});

二、自定义3DT恤模型截图 #

步骤1：实现自定义交互逻辑 #

• 颜色自定义：给T恤材质绑定颜色选择器，通过material.color.set(hexValue)实时更新材质颜色。
• 图案自定义：允许用户上传图片，将图片转为Three.js的Texture，赋值给材质的map属性；可添加缩放、平移控件，让用户调整图案位置。
• 每次自定义操作后，调用renderer.render(scene, camera)实时更新场景。

步骤2：触发截图与保存 #

和静态模型逻辑一致，添加“保存截图”按钮，点击时：

1. 确保自定义后的模型状态已渲染完成。
2. 执行DataURL转换与下载逻辑，文件名设为custom-tshirt.png即可。

关键注意事项 #

• 跨域问题：若GLB模型或用户上传图案来自外部域名，需服务器配置CORS头，否则会导致纹理加载失败或截图报错。
• 清晰度优化：设置renderer.setPixelRatio(window.devicePixelRatio)，让截图分辨率适配设备屏幕，避免模糊。
• 加载状态控制：模型未加载完成时禁用截图按钮，避免生成空白图片；可通过进度条或状态提示告知用户。
• 光照调试：调整灯光位置与强度，保证T恤正面无过曝或过暗区域，提升截图视觉效果。

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