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

Question

我需要在服务器上运行 WebGLRenderer，但对此有不同的声音。有人说这是不可能的，有人说他们正在尝试让它发挥作用，但那是讨论结束的时候。

是否有可能做到这一点，在这种情况下，方法是什么？是否可以将 moch-browser 与 node-gl 结合使用？

[编辑] 添加解决方案

Answer 1

这是我自己解决问题的方法。根据场景及其对象的大小，可能需要一些时间。在我的情况下，我想返回相当小的对象版本，但仍然需要大约 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);

Answer 2

您可以尝试headless-gl，但您需要使用其他一些库来模拟 DOM 和 Image 标签（用于纹理加载）以及 Canvas 标签和/或 Canvas2D（如果您也需要）。

否则你可以shell to a browser running on top of OSMESA 或者试试headless chromium

Answer 3

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

var fs = require("fs")

var self = {};

var ratio = 16/9.0;

var canvasWidth = 500;
var canvasHeight = 500;

var window = {
    innerWidth: canvasWidth,
    innerHeight: canvasHeight

};
var document = {
    createElement: function(name) {
        if (name == "canvas") {
            //return new Canvas(canvasWidth, canvasHeight);
        }
        var Canvas = require('canvas')
        return new Canvas(500,500)
    },
    createElementNS: function(name) {

        var Canvas = require('canvas')
        return new Canvas(500,500)
    }
};

var THREE = require("./threejs/three.js")
eval(fs.readFileSync("threejs/additionalRenderers.js").toString())
eval(fs.readFileSync("threejs/SceneUtils.js").toString())

const EventEmitter = require('events');

//var OS = new ShereOS()

class ThreeClient extends EventEmitter {
    constructor() {
        super()
        var self = this
        this.appId = 667


        self.loaded = false

        this.bgColor = '#282c34'
        this.textColor = '#fff'
        this.tildeColor = '#0000ff'
        this.selectColor = '#ffffff'

        this.width = 500
        this.height = 500



        this.renderer = new THREE.CanvasRenderer();
        this.renderer.setSize(this.width, this.height);

        this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 0.001, 3000);
        this.camera.position.z = 2;




        this.scene = new THREE.Scene();

        this.scene.background = new THREE.Color( 0xECF8FF );
        this.scene.add( new THREE.HemisphereLight( 0x606060, 0x404040 ) );
        this.light = new THREE.DirectionalLight( 0xffffff );
        this.light.position.set( 1, 1, 1 ).normalize();
        this.scene.add( this.light );
        //console.log(this.scene.children)


        this.updated = false
        /*
        var geometry = new THREE.SphereGeometry( 0.1, 32, 32 );
        var material = new THREE.MeshBasicMaterial( {color: 0xFF0000} );
        this.sphere = new THREE.Mesh( geometry, material );
        this.scene.add( this.sphere );
        */
    }




    getTexture() {
        this.renderer.render(this.scene, this.camera);
        var data = this.renderer.domElement.toDataURL().substr("data:image/png;base64,".length)
        var buf = new Buffer(data, 'base64');
        fs.writeFile('image.png', buf);
        //return this.renderer.domElement.toDataURL().substr("data:image/png;base64,".length);
        
    }
}

var THREEClient = new ThreeClient();

npm install avros