如何从节点 js 中的 glb 或 gltf 文件生成缩略图？

Question

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

Answer 1

您可以将 glb 或 gltf 文件加载到 WebGLRenderer (three.js)，然后使用

读取 canvas

var imagedata =  renderer.domElement.toDataURL();

通过这种方式，您可以从 canvas 中获取 Base64 代码，就像屏幕截图一样，您可以从中制作图像。在我的项目中，我刚刚添加了 Base64 代码作为 link 下载。

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

下载缩略图

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

当您单击“下载缩略图”时，您会得到一个“thumbnail.png”，它基本上是 canvas 的屏幕截图，其中显示了您的模型。在阅读 Base64 代码之前，您应该添加一个像计时器这样的功能，或者检查模型是否已 100% 加载。

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

}, 1000 );

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

Answer 2

thanks for your answer, but i was looking to do it from backend – Naeem

这可能是个问题。如果我没记错的话，除了在前端，没有其他方法可以显示 3D Models/Scenes。客户端需要下载 glb-file 以在 WebGLRenderer (three.js) 中呈现它们，因此需要 JavaScript。如果我错了请纠正我，但现在没有 php-WebGLRenderer.

好吧，如果我没听错，您需要所有 3D 模型的图像“缩略图”？！我的第一个问题是，谁将 glb-file 上传到服务器，多久上传一次？是可以上传文件（动态）的客户端还是仅具有固定数量文件（静态）的后端（Company/Shop...的管理员/工作人员）。

您有 4 个选项：

（后端）您使用 Microsoft 3D-Viewer 等 3D 查看器加载 glb 文件，并将 glb-file 导出到图像。你需要为你拥有的每个 glb 文件重复它，而不是你需要将“缩略图”上传到服务器，所以这是最坏的情况解决方案。不太实用
（后端）有一些应用程序 (like this one) 可以自动执行该过程，您可以一次 select 更多 glb 文件来制作真正的“缩略图” .还需要有人上传文件到服务器
(Frontend + Backend) 所以现在你只能使用混合的前端/后端解决方案。您可以做的是，第一次 时间 glb-file 由某人上传，通常这个“人”（管理员/客户）也是第一个看到 3D 的人在 3D WebGLRenderer 中建模，你可以尝试使用一些 javascript+ajax+php (frontend/backend).

所以就在那一刻，你制作了 WebGLRenderer (canvas) 的一个“屏幕截图 - 缩略图”：

var mybase64Image = renderer.domElement.toDataURL();

您获得了 Base64 代码。它就像一个图像，只是在其他“代码”中，当您使用 ajax 将 Base64 代码传输到后端 php-function 时，您可以编辑此代码并立即将其与后端保存在服务器上。这样就可以生成缩略图（jpg, png...）。

（等待Whosebug大师）

Answer 3

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

Here is the link to that topic

显然 threejs.org 通过 node.js 和 e2e 从他们的示例中截取了屏幕截图，并且 puppeteer.js 具有屏幕截图逻辑。所以是的，有一种方法可以使用 node.js

制作屏幕截图

puppeteer.js

如何从节点 js 中的 glb 或 gltf 文件生成缩略图？

How to generate thumbnails from glb or gltf file in node js?

node.js

gltf