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

  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)

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部