Javascript 是否可以在node.js服务器上运行Three.js WebGLRenderer？

我需要在服务器上运行WebGLRenderer，但对此有不同的看法。有人说这是不可能的，也有人说他们正在努力让它发挥作用，但讨论到此结束

有可能做到吗？在这种情况下，方法是什么？是否可以将moch浏览器与节点gl或其他东西结合使用

[编辑] 添加的解决方案

您可以尝试，但如果需要，还需要使用一些其他库来模拟DOM和图像标记（用于纹理加载）以及画布标记和/或Canvas2D

---

否则，您可以尝试这是我自己解决问题的方法。根据场景及其对象的大小，可能需要一些时间。在我的例子中，我想返回对象的非常小的版本，但仍然需要大约400毫秒的时间来响应400x400px png。希望这有助于其他人

Server.js

var THREE = require("three.js");

// Create a DOM
var MockBrowser = require('mock-browser').mocks.MockBrowser;
var mock = new MockBrowser();
var document = MockBrowser.createDocument();
var window = MockBrowser.createWindow();

//REST API
var express     = require('express');      
var app         = express();    
var bodyParser  = require('body-parser');
var router = express.Router();

var gl = require('gl')(1,1); //headless-gl

var pngStream = require('three-png-stream');
var port = process.env.PORT || 8080;

router.get('/render', function(req, res){

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, this.width / this.height, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer({context:gl});

    scene.add(camera);

    renderer.setSize(this.width, this.height);
    renderer.setClearColor(0xFFFFFF, 1);

    /*...
        Add your objects & light to the scene 
    ...*/

    var target = new THREE.WebGLRenderTarget(this.width, this.height);
    renderer.render(scene, camera, target);


   res.setHeader('Content-Type', 'image/png');
   pngStream(renderer, target).pipe(res);
});

app.use('/api', router);

app.listen(port);
console.log('Server active on port: ' + port);

---

我设法做到了这一点，诀窍是渲染到画布并取出一个png图像对象

var fs=require（“fs”）
var self={}；
风险价值比率=16/9.0；
var canvasWidth=500；
var canvasHeight=500；
变量窗口={
内部宽度：画布宽度，
内部高度：画布高度
};
var文档={
createElement:函数（名称）{
如果（名称=“画布”）{
//返回新画布（画布宽度、画布高度）；
}
var Canvas=require（'Canvas'）
返回新画布（500500）
},
CreateElements:函数（名称）{
var Canvas=require（'Canvas'）
返回新画布（500500）
}
};
var-THREE=require（“./threejs/THREE.js”）
eval（fs.readFileSync（“threejs/additionalrenders.js”）.toString（）
eval（fs.readFileSync（“threejs/SceneUtils.js”）.toString（）
const EventEmitter=require（'events'）；
//var OS=新的ShereOS（）
类客户端扩展了EventEmitter{
构造函数（）{
超级（）
var self=这个
this.appId=667
self.load=false
this.bgColor='#282c34'
this.textColor='#fff'
this.tildologir='#0000ff'
this.selectColor='#ffffff'
这个宽度=500
这个高度=500
this.renderer=new THREE.CanvasRenderer（）；
this.renderer.setSize（this.width，this.height）；
this.camera=新的三视角摄像机（75，this.width/this.height，0.0013000）；
这个.camera.position.z=2；
this.scene=新的三个.scene（）；
this.scene.background=新的三种颜色（0xECF8FF）；
this.scene.add（新的三个半球灯光（0x606060，0x404040））；
this.light=新的三方向光（0xffffff）；
this.light.position.set（1,1,1）.normalize（）；
this.scene.add（this.light）；
//console.log（this.scene.children）
this.updated=false
/*
var几何=新的三种。球墨法（0.1,32,32）；
var material=new THREE.MeshBasicMaterial（{color:0xFF0000}）；
this.sphere=新的三个网格（几何体、材质）；
this.scene.add（this.sphere）；
*/
}
getTexture（）{
this.renderer.render（this.scene，this.camera）；
var data=this.renderer.domeElement.toDataURL（）.substr（“数据：image/png；base64，”.length）
var buf=新缓冲区（数据“base64”）；
fs.writeFile（'image.png'，buf）；
//返回此.renderer.doElement.toDataURL（）.substr（“数据：image/png；base64，”.length）；
}
}
var THREEClient=new THREEClient（）您计划如何处理渲染结果？将其流回用户浏览器或保存到文件或@Matey将其作为png流返回给用户。流一系列png？还是发送一个PNG文件？@Matey我会将其流式传输回客户端。事实上，我成功地渲染了它。我会发布一个解决方案，当我有一个干净的解决方案准备@JakobMillah为什么要使用javascript进行服务器端渲染？是的，我最终使用的是headless gl！它与模拟浏览器结合生成DOM。三个png流将渲染流传回客户端。这对复杂的3d动画是否可行？我想不是。。。只是因为网络延迟，但我很好奇。