当前位置: 首页 > news >正文

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)

相关文章:

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

Node.js 渲染三维模型并导出为图片 1. 前言 本文将介绍如何在 Node.js 中使用 Three.js 进行 3D 模型渲染。通过结合 gl 和 canvas 这两个主要依赖库,我们能够在服务器端实现高效的 3D 渲染。这个方法解决了在服务器端生成和处理 3D 图形的需求,使得可…...

Win11下安装VS2022失败的解决办法

前几天我把我的HP Z840的操作系统换成了Win11,在重装VS2022时遇到了麻烦,提示无法安装 Microsoft.VisualStudio.Devenv.Msi。 查看安装日志提示:Could not write value devenv.exe to key \SOFTWARE\Microsoft\Internet Explorer\Main\Featur…...

动态规划:基本概念

Dynamic Programming 动态规划(Dynamic Programming, DP) 是一种算法设计技巧,通常用来解决具有重叠子问题和最优子结构性质的问题。它通过将问题分解为更小的子问题,逐步解决这些子问题并将结果存储起来,以避免重复计…...

小山菌_代码随想录算法训练营第二十九天| 455. 分发饼干 、376. 摆动序列、53. 最大子序和

455. 分发饼干 文档讲解&#xff1a;代码随想录.分发饼干 视频讲解&#xff1a;贪心算法&#xff0c;你想先喂哪个小孩&#xff1f;| LeetCode&#xff1a;455.分发饼干 状态&#xff1a;已完成 代码实现 class Solution { public:int findContentChildren(vector<int>&…...

快手可灵大模型开放视频续写功能,可生成最长约3分钟视频

6月21日&#xff0c;可灵再度进化&#xff0c;正式推出图生视频功能&#xff0c;支持用任意静态图像生成5s视频&#xff0c;并且可搭配不同的文本内容&#xff0c;实现丰富的视觉叙事 。 同时&#xff0c;可灵还发布了业内领先的视频续写功能&#xff0c;可为已生成的视频&…...

【代码随想录】【算法训练营】【第45天】 [198]打家劫舍 [213]打家劫舍II [337]打家劫舍III

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 45&#xff0c;周五&#xff0c;坚持不了一点~ 题目详情 [198] 打家劫舍 题目描述 198 打家劫舍 解题思路 前提&#xff1a; 思路&#xff1a; 重点&#xff1a; 代码实现 C语言 虚拟头…...

python安装目录文件说明----Dlls文件夹

在Python的安装目录下&#xff0c;通常会有一个DLLs文件夹&#xff0c;它是Python标准库的一部分。这个文件夹包含了一些动态链接库&#xff08;Dynamic Link Libraries&#xff0c;DLL&#xff09;&#xff0c;这些库提供了Python解释器和标准库的一些关键功能。以下是对这个文…...

java实现持续集成

要使用Java实现Jenkins持续集成&#xff0c;你可以使用Jenkins的Java客户端库来执行一些常见的操作&#xff0c;例如创建任务&#xff0c;触发构建等。下面是一个简单的示例代码&#xff0c;展示了如何使用Java实现Jenkins持续集成&#xff1a; java import com.offbytwo.jenk…...

ClickHouse安装与下载22.3.2.2

ClickHouse安装与下载 目录 1. ClickHouse简介 1.1 ClickHouse优点&#xff1a; 1.2 ClickHouse缺点&#xff1a; 1.3 ClickHouse引擎&#xff1a; 1.3.1 数据库引擎 1.3.2 表引擎 2. ClickHouse下载安装 2.1 ClickHouse下载安装 2.2 ClickHouse使用 1. ClickHouse简…...

【Go语言】Gin 框架教程

Gin 框架教程 1.第一个 Gin 程序 1.1 Gin 安装 # 执行执行如下操作即可&#xff0c;安装Gin前需要安装Go环境 go get -u -v github.com/gin-gonic/gin # -v&#xff1a;打印出被构建的代码包的名字 # -u&#xff1a;已存在相关的代码包&#xff0c;强行更新代码包及其依赖包…...

MySQL性能问题诊断方法和常用工具

作者介绍&#xff1a;老苏&#xff0c;10余年DBA工作运维经验&#xff0c;擅长Oracle、MySQL、PG数据库运维&#xff08;如安装迁移&#xff0c;性能优化、故障应急处理等&#xff09; 公众号&#xff1a;老苏畅谈运维 欢迎关注本人公众号&#xff0c;更多精彩与您分享。MySQL运…...

CGFloat转NSString保持原有的精度,末尾不添加0

问题阐述&#xff1a; 我们进行CGFloat转NSString可能会遇到一个问题 例如有一个CGFloat的值为2.1&#xff0c;转化成NSString后显示2.1000... 解决办法&#xff1a; 方法一&#xff1a; 如何解决呢&#xff0c;可以使用%g格式符&#xff0c;可以保证传入的不管是2还是2.1…...

UDS服务——TransferData (0x36)

诊断协议那些事儿 诊断协议那些事儿专栏系列文章,本文介绍TransferData (0x36)—— 数据传输,用于下载/上传数据时用的,数据的传输方向由不同的服务控制:0x34服务表示下载,0x35服务表示上传。通过阅读本文,希望能对你有所帮助。 文章目录 诊断协议那些事儿传输数据服务…...

jQuery 基本操作

01-简介 jQuery 是一个功能丰富且广泛使用的 JavaScript 库&#xff0c;它简化了 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作。jQuery 通过其易用的 API&#xff0c;使复杂的 JavaScript 编程任务变得更加简单&#xff0c;并且兼容各种浏览器。 1、jQuery特点 简化 DOM …...

有玩家在2011年的MacBook上成功运行了Windows XP 还安装了触摸屏

我们已经在许多不同的设备上看到过 Windows XP 正在运行。这个古老的操作系统于 2001 年正式推出&#xff0c;现在已经老到其最后一次软件更新是在近十年前。一位好奇的玩家试图在 2011 年的触摸屏 MacBook 上为 Windows XP 打造了一个新家&#xff0c;复古技术探索者 Michael …...

高纯PFA容量瓶PFA试剂瓶在半导体材料的应用

在半导体生产过程中&#xff0c;为避免金属污染对硅器件性能造成不利影响&#xff0c;碳化硅产业链不同阶段产品&#xff08;如衬底、外延、芯片、器件&#xff09;表面的痕量杂质元素浓度表征至关重要。 在实验人员使用质谱法高精度检测第三代半导体碳化硅材料的痕量杂质浓度…...

AudioSep:从音频中分离出特定声音(人声、笑声、噪音、乐器等)本地一键整合包下载

AudioSep是一种 AI 模型&#xff0c;可以使用自然语言查询进行声音分离。这一创新性的模型由Audio-AGI开发&#xff0c;使用户能够通过简单的语言描述来分离各种声音源。 比如在嘈杂的人流车流中说话的录音中&#xff0c;可以分别提取干净的人声说话声音和嘈杂的人流车流噪声。…...

Prompt 提示词工程:翻译提示

近期在对计算机学习时&#xff0c;许多内容需要看原始的英文论文&#xff0c;对于我这种学渣来说特别不友好&#xff0c;&#x1f937;&#x1f3fb;‍♀️无奈只能一边看翻译&#xff0c;一边学习。 之前有搜到过专门的翻译工具&#xff0c;无奈都是按照字数算费用的&#xf…...

【MySQL 的三大日志的作用】

在管理MySQL数据库时&#xff0c;了解和区分数据库使用的三大日志类型至关重要。这些日志对于确保数据的完整性、提供恢复机制以及维持数据库的稳定性发挥着关键作用。最主要还是小豆前段时间去参加面试被问到了这些内容&#xff0c;下面将详细讨论Redo Log、Binlog和Undo Log的…...

数据库中数据的id生成和算法

id生成策略 自增主键 一般使用整数类型的id可使用自增主键的策略去生成id 优点&#xff1a; 简单、易于使用和理解。保证唯一性&#xff0c;无需额外的查询操作。提高查询性能&#xff0c;因为ID是有序的&#xff0c;且支持索引。 缺点&#xff1a; 不适用于分布式系统&a…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

uniapp 小程序 学习(一)

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

32位寻址与64位寻址

32位寻址与64位寻址 32位寻址是什么&#xff1f; 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元&#xff08;地址&#xff09;&#xff0c;其核心含义与能力如下&#xff1a; 1. 核心定义 地址位宽&#xff1a;CPU或内存控制器用32位…...