Node.js 渲染三维模型并导出为图片

Node.js 渲染三维模型并导出为图片

1. 前言

本文将介绍如何在 Node.js 中使用 Three.js 进行 3D 模型渲染。通过结合 glcanvas 这两个主要依赖库,我们能够在服务器端实现高效的 3D 渲染。这个方法解决了在服务器端生成和处理 3D 图形的需求,使得可以在各种平台上展示复杂的 3D 内容

2. 渲染环境准备

在服务端渲染并导出threeJS模型,难点在于需要在服务端准备一套threeJS模型的渲染环境

2.1 步骤
  1. 服务端提供环境需要依赖两个库canvasgl
    canvas:使服务端能够创建canvas元素,提供一个“地方”给threeJS绘制模型
    gl:提供threeJS绘制的环境

在安装canvas依赖的时候,需要安装一些前置依赖

  • node-gyp
  • GTK2
  • libjpeg-turbo
    前置依赖安装步骤:https://github.com/Automattic/node-canvas/wiki/Installation:-Windows

其中在安装node-gyp

  • 需要安装python39,这里好像只有python39的版本才行,使用最新的版本的Python安装canvas的时候会报错
  • 需要安装 C++的编译环境
    安装步骤:https://github.com/nodejs/node-gyp?tab=readme-ov-file#on-windows
  1. 推荐一个一键式依赖:node-canvas-webgl,这个依赖整合了上面两个依赖,但是安装这个依赖也需要安装canvas依赖的前置依赖
    在这里插入图片描述
    如果安装了 node-canvas-webgl 这个依赖,就不需要再安装canvasgl这两个依赖了,或者是 如果同时安装的node-canvas-webgl 依赖和canvas、gl依赖,那么最好是确保node-canvas-webgl所依赖的canvas、gl的版本和你所安装的canvasgl依赖的版本一致,不然会因为安装的版本不一致导致在创建webGLRenderer的时候出错

这里推荐直接安装node-canvas-webgl依赖

  1. 由于我们在服务端,没有浏览器里面的一些内置对象(window、document),所以需要模拟一些浏览器内置对象,这样在创建 ThreeJS的场景、渲染器的时候才不会报错
    使用mock-browser库是进行模拟windowdocument对象
2.2 步骤总结
  1. 安装 node-canvas-webgl 依赖,为threeJS模型提供渲染环境

安装 node-canvas-webgl时,需要准备canvas所需要的一些前置依赖。因为 node-canvas-webgl这个依赖也是依赖了canvas这个依赖的,所以需要准备canvas所需要的前置条件,canvas前置条件准备步骤

  1. 安装 mock-browser,构造 windowdocument对象
3. 代码实现

这是我安装的依赖
在这里插入图片描述
步骤1-3都是一些前置工作,在node环境准备好了Three.js的渲染环境,接下来就可以编写代码将三维模型导出为图片
在nodeJS的入口(主)文件挂载window、document等对象,方便后续创建Three.js的渲染环境

// app.ts
const MockBrowser = require('mock-browser').mocks.MockBrowser
const document = MockBrowser.createDocument()
const window = MockBrowser.createWindow()
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis
// 在 node 环境下获取全局变量必须使用 global
// 所以将全局变量挂载到 global 下
global.window = window
global.document = document
global.navigator = window.navigator

生成三维模型并导出图片

// generateWebGL.ts
// nodeJS 目前是支持 ES6 的模块化的
import * as THREE from 'three';
// 这里使用了 node-canvas-webgl 这个依赖
const {createCanvas} = require('node-canvas-webgl/lib');
const fs = require('fs');const width = window.innerWidth, height = window.innerHeight;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, width / height, 0.1, 1000 );
// 使用库创建一个 canvas 元素
const canvas = createCanvas(width, height);// 在创建渲染器的时候,需要提供我们之前创建的 canvas 元素供渲染器进行绘制输出
const renderer = new THREE.WebGLRenderer({canvas: canvas});
renderer.setSize(width, height);const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );camera.position.z = 5;renderer.render( scene, camera );// 生成图片
// 使用 canvas 的 toDataURL() 方法转成 base64
const base64 = renderer.domElement.toDataURL('image/png', 1.0)
const base64Image = base64.split(';base64,').pop()
// 将 base64 转成 二进制数据
const bufferData = Buffer.from(base64Image, 'base64')
// 这里替换为你自己需要保存的文件路径
const path = `C:/Users/abc123/Desktop/nodeImages/image1.png`
// 使用 fs 模块将图片保存到桌面的 nodeImages 文件夹
fs.writeFileSync(path, bufferData)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/32154.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【mysql】常用操作:维护用户/开启远程/忘记密码/常用命令

一、维护用户 1.1 创建用户 -- 语法 > CREATE USER [username][host] IDENTIFIED BY [password];-- 例子: -- 添加用户user007,密码123456,并且只能在本地可以登录 > CREATE USER user007localhost IDENTIFIED BY 123456; -- 添加用户…

一文搞懂Linux信号【下】

目录 🚩引言 🚩阻塞信号 🚩信号保存 🚩信号捕捉 🚩操作信号集 1.信号集操作函数 2.其它操作函数 🚩总结: 🚩引言 在观看本博客之前,建议大家先看一文搞懂Linux信…

Mysql 分表存储、多段存储

分表存储 分表存储是一种常用的数据库优化技术,特别是当单一表中的数据量非常大时。分表可以帮助提高查询性能、简化数据管理,并优化备份过程。以下是分表存储的一些常见策略和步骤: 1. 选择分表策略 分表可以基于多种策略,常见…

大火《与凤行》演员片酬曝光!网友:难以置信......

近日,大火的《与凤行》演员片酬被网友曝光:女主赵丽颖2000万,男主林更新1200万,而最让人意外的则是辣目洋子,个人片酬高达800万,但是其在剧中戏份比较低,不少网友感叹:难以置信&…

Star、Star求Star

本章是介绍博主自己的一个小工具的。使用的PythonPyQt5开发的。顺带来求一波star🌟🌟!!! 地址:https://gitee.com/qinganan_admin/PyCom Pycom是博主开发的串口工具,要是说对比其他串口工具&…

IOS Swift 从入门到精通: 可选项、展开和类型转换

文章目录 处理缺失数据展开可选值用保护装置解开强制展开隐式解包可选值零合并可选链式调用可选尝试可失败的初始化器类型转换总结 处理缺失数据 我们已经使用诸如 之类的类型Int来保存像 5 这样的值。但是如果您想存储age用户的属性,如果您不知道某人的年龄&#…

第8章:系统质量属性与架构评估

软件系统属性包括功能属性和质量属性,软件架构重点关注的是质量属性。架构的基本需求是在满足功能属性的前提下,关注软件系统质量属性。为了精确、定量地表达系统的质量属性,通常会采用质量属性场景的方式进行描述。   在确定软件系统架构&…

OpenGL3.3_C++_Windows(15)

理解glad: OpenGL只是一个标准/规范,具体的实现是由驱动开发商针对特定显卡实现的,由于OpenGL驱动版本众多,它大多数函数的位置都无法在编译时确定下来,需要在运行时查询,因此开发者需要在运行时获取函数…

Flutter GetX 状态管理 响应式编程(三)

在2021年4月初,我们在应用开发中大量使用了 GetX,目前看来效果还不错,于是我最近也出了一套GetX的从入门到源码原理的分析教程,欢迎大家关注更新。 【1 GetX 基本使用路由管理】【2 GetX 使用入门 程序计数器】 第一步 使用 GetM…

可灵王炸更新,图生视频、视频续写,最长可达3分钟!Runway 不香了 ...

现在视频大模型有多卷? Runway 刚在6月17号 发布Gen3 ,坐上王座没几天; 可灵就在6月21日中午,重新夺回了王座!发布了图生视频功能,视频续写功能! 一张图概括: 二师兄和团队老师第一…

实施高效冷却技术:确保滚珠丝杆稳定运行!

滚珠丝杆在运行过程中,由于摩擦、惯性力等因素,会产生一定的热量,当热量无法及时散发时,滚珠丝杆的温度就会升高,会直接影响滚珠丝杆的精度和稳定性,从而影响最终的产品质量。为了让滚珠丝杆保持应有的精度…

Redis源码学习:ziplist的数据结构和连锁更新问题

ziplist ziplist 是 Redis 中一种紧凑型的列表结构&#xff0c;专门用来存储元素数量少且每个元素较小的数据。它是一个双端链表&#xff0c; 可以在任意一端进行压入/弹出操作&#xff0c;并且该操作的时间复杂度为O(1)。 ziplist数据结构 <zlbytes><zltail>&l…

Linux基础指令(三)

目录 shell 权限指令&#xff1a; 文件的操作权限&#xff1a; 对文件进行操作的用户分类&#xff1a; 用户对文件进行的操作分类&#xff1a; 所有者、所属组、其他的访问权限&#xff1a; 创建用户 沾滞位 匹配查找指令&#xff1a; grep find shell shell&#x…

Ubuntu22.04开机后发现IP地址变成127.0.0.1

开机就是这个样子 解决办法 ip地址可能被释放&#xff0c;需要重新设置成自动分配 sudo dhclient -v可能网卡未加托管 查看方式: nmcli n若是enable就是已被托管,若是disabled&#xff0c;说明网卡未被托管 解决办法: nmcli n on搞定

DataWhale - 吃瓜教程学习笔记(二)

学习视频&#xff1a;第3章-一元线性回归_哔哩哔哩_bilibili 西瓜书对应章节&#xff1a; 3.1 - 3.2 一元线性回归 - 最小二乘法 - 极大似然估计 - 梯度 多元函数的一阶导数 - 海塞矩阵 多元函数的二阶导数 - 机器学习三要素

软件介绍—Fluent Reader (RSS阅读器)

软件介绍—Fluent Reader &#xff08;RSS阅读器&#xff09; 01 RSS介绍 RSS可翻译为简易信息聚合&#xff08;也叫聚合内容&#xff09;是一种基于XML的标准&#xff0c;在互联网上被广泛采用的内容包装和投递协议。简单来讲&#xff0c;就是可以“订阅”一些网站新发布的内…

【Android面试八股文】Kotlin内置标准函数also的原理是什么?

文章目录 原理解析应用场景为什么使用 `also`?also 是 Kotlin 标准库中的一个内置函数,其原理和应用场景可以通过源码和示例来解释。 原理解析 also 的定义如下: /*** Calls the specified function [block] with `this` value as its argument and returns `this` value.…

Android 开发Android Studio创建第一个Android应用

本文讲解如何Android Studio创建第一个Android应用。 启动Android Studio 或打开的项目的界面 点击File-New-New Project 选择“ Empty Views Activity”&#xff0c;点击Next 点击Next&#xff0c;项目创建完成如下&#xff1a; 创建项目完成&#xff0c;自带一个Activity。 …

FreeRTOS消息队列

队列简介 更详细的操作入下图所示&#xff1a; 传输数据的方法 FreeRTOS中的队列传输使用的是拷贝&#xff1a;把数据、把变量的值复制进队列里 FreeRTOS 使用拷贝值的方法&#xff0c;这更简单&#xff1a; &#xff08;1&#xff09; 局部变量的值可以发送到队列中&#…

linux最大线程数限制及打开最大文件数

1.root用户下执行 ulimit -a 然后查看 max user processes 这个值通常是系统最大线程数的一半 max user processes&#xff1a;当前用户同时打开的进程(包括线程)的最大个数为 2.普通用户下 ulimit -a 出现的max user processes的值 默认是 /etc/security/limits.d/20-nproc.co…