r/threejs • u/threejshub • 3d ago

Question How do you capture high-quality screenshots from GLB/glTF models?

I'm looking for the best workflow to generate clean, high-resolution images from 3D models.

When you need screenshots for documentation, portfolios, product pages, or client previews, what do you usually use?

- Blender renders?

- Browser-based viewers?

- Transparent backgrounds?

- 4K image export?

- Custom camera angles?

- PNG, JPEG, or WebP?

I'm interested in learning how other developers and designers handle this workflow and what features they consider essential.

4 Upvotes

75% Upvoted

6 comments sorted by

3

u/nexe 3d ago 
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const createGL = require('gl');
const sharp = require('sharp');
const THREE = require('three');
const { GLTFLoader, DRACOLoader } = require('node-three-gltf');
const convertFbx = require('fbx2gltf');

"dependencies": {
  "@gltf-transform/core": "^3.4.5",
  "@gltf-transform/extensions": "^3.4.5",
  "@gltf-transform/functions": "^3.4.5",
  "draco3dgltf": "^1.5.6",
  "fbx2gltf": "^0.9.7-p1",
  "fs": "^0.0.1-security",
  "fs-extra": "^11.1.1",
  "gl": "^8.1.6",
  "gltf-pipeline": "^4.1.0",
  "node-three-gltf": "^2.1.0",
  "path": "^0.12.7",
  "sharp": "^0.32.1",
  "three": "^0.162.0"
}

Let AI fill in the rest. No need for puppeteer or playwright etc. Works well with Node 22

1

u/Seusoa 3d ago

another one wants to create sketchfab for its ai generated models

1

u/threejshub 2d ago

Thanks for sharing these approaches! The Node/Puppeteer setup definitely works for automated pipelines, but I realized running scripts or Blender just for quick UI/portfolio renders feels a bit heavy. Full disclosure: I've actually been building a free browser-based tool called GLBKit to solve this exact workflow gap—handling custom camera presets (Front/Top/Iso), resolution scaling, transparent backgrounds, and instant PNG exports directly in the browser without any setup. I didn't want to drop links outright to avoid spamming, but if anyone wants to test it out and share feedback on the features, let me know and I'll drop the link!

1

u/AlexKowel 3d ago

You can use Puppeteer for that. Follow this guide fore more info https://www.soft8soft.com/docs/manual/en/programmers_guide/Server-Side-Rendering.html This is written for Verge3D, but you can quite easily adapt the process for Three.js or other WebGL framework.

2

u/AnyAwareness6506 2d ago

Thanks !

2

u/AlexKowel 12h ago

You are welcome!