做网站是用c 吗,网站管理运营,WordPress页眉文件,阿里域名购买网站Node.js 渲染三维模型并导出为图片
1. 前言
本文将介绍如何在 Node.js 中使用 Three.js 进行 3D 模型渲染。通过结合 gl 和 canvas 这两个主要依赖库#xff0c;我们能够在服务器端实现高效的 3D 渲染。这个方法解决了在服务器端生成和处理 3D 图形的需求#xff0c;使得可…Node.js 渲染三维模型并导出为图片
1. 前言
本文将介绍如何在 Node.js 中使用 Three.js 进行 3D 模型渲染。通过结合 gl 和 canvas 这两个主要依赖库我们能够在服务器端实现高效的 3D 渲染。这个方法解决了在服务器端生成和处理 3D 图形的需求使得可以在各种平台上展示复杂的 3D 内容
2. 渲染环境准备
在服务端渲染并导出threeJS模型难点在于需要在服务端准备一套threeJS模型的渲染环境
2.1 步骤
服务端提供环境需要依赖两个库canvas和gl ○ canvas使服务端能够创建canvas元素提供一个“地方”给threeJS绘制模型 ○ gl提供threeJS绘制的环境 在安装canvas依赖的时候需要安装一些前置依赖 node-gypGTK2libjpeg-turbo 前置依赖安装步骤https://github.com/Automattic/node-canvas/wiki/Installation:-Windows 其中在安装node-gyp时 需要安装python39这里好像只有python39的版本才行使用最新的版本的Python安装canvas的时候会报错需要安装 C的编译环境 安装步骤https://github.com/nodejs/node-gyp?tabreadme-ov-file#on-windows 推荐一个一键式依赖node-canvas-webgl这个依赖整合了上面两个依赖但是安装这个依赖也需要安装canvas依赖的前置依赖 如果安装了 node-canvas-webgl 这个依赖就不需要再安装canvas和gl这两个依赖了或者是 如果同时安装的node-canvas-webgl 依赖和canvas、gl依赖那么最好是确保node-canvas-webgl所依赖的canvas、gl的版本和你所安装的canvas和gl依赖的版本一致不然会因为安装的版本不一致导致在创建webGLRenderer的时候出错
这里推荐直接安装node-canvas-webgl依赖
由于我们在服务端没有浏览器里面的一些内置对象window、document,所以需要模拟一些浏览器内置对象这样在创建 ThreeJS的场景、渲染器的时候才不会报错 使用mock-browser库是进行模拟window和document对象
2.2 步骤总结
安装 node-canvas-webgl 依赖为threeJS模型提供渲染环境 安装 node-canvas-webgl时需要准备canvas所需要的一些前置依赖。因为 node-canvas-webgl这个依赖也是依赖了canvas这个依赖的所以需要准备canvas所需要的前置条件canvas前置条件准备步骤 安装 mock-browser构造 window和document对象
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)
