如何在Node.js中从glb或gltf文件生成缩略图？

Question

我遇到了困难，需要从glb或gltf文件中生成缩略图以在Web浏览器中显示。因此，唯一活动的图像将是原始gltf文件，其他图像将只是图库中的缩略图。我尝试在每个论坛上搜索它，但是我没有得到任何想法或解决方案。

- Naeem

Answer 1

您可以将glb或gltf文件加载到WebGLRenderer（three.js）中，然后使用以下代码读取画布：

var imagedata =  renderer.domElement.toDataURL();

这种方法可以从画布中获取一个Base64编码，就像截屏一样，你可以将其制作成图像。在我的项目中，我将Base64编码添加为下载链接。

document.getElementById('downloadthumbnail').setAttribute('href',imagedata);

下载缩略图

<a class="downloadthumbnail" id="downloadthumbnail" download="thumbnail.png">Download Thumbnail</a>

当您点击“下载缩略图”时，您将获得一个“thumbnail.png”，它基本上是从画布中截取的屏幕截图，显示了您的模型。在读取Base64代码之前，您应该添加一个像定时器或检查模型是否已加载100％这样的函数。

setTimeout( function() {
        
  var imagedata =  renderer.domElement.toDataURL();
  document.getElementById('downloadthumbnail').setAttribute('href',imagedata);

}, 1000 );

我仍在寻找一种解决方案或途径，可以使用javascript直接将生成的图像保存到服务器上，但我认为这是不可能的。

- ExoGeniA

---

谢谢您的回答，但我想从后端实现它。 - Naeem

Answer 2

谢谢您的回答，但我想从后端实现这个功能。 - Naeem

这可能是个问题。如果我没记错的话，除了在前端之外，没有其他显示3D模型/场景的方法。客户端需要下载glb文件以在WebGLRenderer（three.js）中渲染它们，因此需要JavaScript。如果我错了，请纠正我，但现在还没有php-WebGLRenderer。

好吧，如果我理解正确，您需要为所有3D模型制作图像“缩略图”？！ 对我来说，第一个问题是，谁将glb文件上传到服务器上，以及上传频率如何？ 客户端可以上传文件（动态），还是后端（公司/商店的管理员/工人）只能上传固定数量的文件（静态）。

您有4个选项：

(后端) 您可以使用类似于 Microsoft 3D-Viewer 的 3D 查看器加载 glb 文件并将其导出为图像。对于每个 glb 文件，您需要重复此过程，然后将“缩略图”上传到服务器，因此这是最糟糕的情况。不太实用。

(后端) 有一些应用程序（例如 这个）可以自动执行该过程，并且您可以一次选择多个 glb 文件以创建真正的“缩略图”。仍然需要有人将文件上传到服务器。

(前端+后端) 所以现在您陷入了混合前端/后端解决方案。您可以做的是，在某个人（管理员/客户端）首次上传 glb 文件时，并且通常这个“人”也是第一个在 3D WebGLRenderer 中查看 3D 模型的人，您可以尝试使用一些 javascript+ajax+php（前端/后端）。

所以就在那一刻，您通过以下方式从 WebGLRenderer（画布）制作了一个“截图 - 缩略图”：

var mybase64Image = renderer.domElement.toDataURL();

你得到了Base64代码。它就像一张图片，只是用另一种“代码”表示。当你使用ajax将Base64代码传输到后端的php函数时，你可以编辑这个代码并立即在服务器上保存。这样你就可以生成缩略图（jpg、png等）。

4. （等待stackoverflow大师们的回答）

- ExoGeniA

---

感谢您详细的回答，我希望其中一个解决方案适用于我。 - Naeem

问题是关于node.js在后端使用，而不是php。 - fourk

我写了一个服务，可以通过URL创建一个glb文件的缩略图/图片（以便直接嵌入到图像标签中）。你可以在这里尝试：https://www.flowkit.app/ 如果你能将它添加到你的回答中，我会非常感激！ - teh.fonsi

@teh.fonsi 嗨！很棒的工具，但是怎么移除Logo呢？是付费选项吗？ - ExoGeniA

@ExoGeniA 我还没有真正考虑过这个问题，想先看看它是否有用。但我会很感激一些反馈意见，你可以通过 Twitter 私信给我（请查看我的个人资料）。 - teh.fonsi

Answer 3

查看这个仓库，使用前端的threejs将glb模型转换为图像

https://github.com/ketanvariya/modelToImage

它也可以在后端使用，只需将图像文件发送到后端并保存即可。

- ketan

Answer 4

我发现 Shopify 开发了一个 CLI 工具，可以将屏幕截图转换为 glb 文件并创建缩略图。我猜你可以在服务器环境中安装它，并从后端运行类似以下的命令：

const { exec } = require("child_process");

exec(`screenshot-glb -i ${<PATH_TO_MODEL>} -o ${<PATH_TO_OUTPUT_IMAGE>}`, (error, stdout, stderr) => {
    if (error) {
        // handle error
    }
    if (stderr) {
        // handle error
    }
    // Screenshot taken successfully
});

- Marcel

Answer 5

我刚发现，在后端使用node.js确实可以制作屏幕截图“缩略图”。

这是相关话题的链接

显然，threejs.org通过node.js和e2e以及puppeteer.js捕捉逻辑从它们的样例中制作屏幕截图。因此，使用node.js制作屏幕截图的方法是存在的。

puppeteer.js

- ExoGeniA