Three.js 将webgl嵌入powerpoint或从webgl渲染动画gif

任何人都知道如何将webgl动画嵌入powerpoint。服务器端有没有可以用来捕捉动画gif的工具

---

我无法将webgl html直接嵌入到powerpoint中。

您可以通过调用toDataURL（）创建webgl图像，如中所示

要制作动画，您可以将每个屏幕截图发送到服务器

...
var image = canvas.toDataURL();
var req = new XMLHTTPRequest();
req.open("POST", "http://localhost:8080", true);
var data = {
  cmd: 'screenshot',
  dataURL: image,
};
req.setRequestHeader("Content-type", "application/json");
req.send(JSON.stringify(data));

这里有一个node.js服务器，它将截图保存为.png文件。然后，您可以将它们加载到某个程序中，将它们转换为gif格式

var port = 8080
var screenshotCount = 0;

var http = require('http'),
    url = require('url'),
    fs = require('fs'),
    util = require('util'),
    path = require('path'),
    querystring = require('querystring');

function postHandler(request, callback) {
  var query_ = { };
  var content_ = '';

  request.addListener('data', function(chunk) {
    content_ += chunk;
  });

  request.addListener('end', function() {
    query_ = JSON.parse(content_);
    callback(query_);
  });
}

function sendJSONResponse(res, object) {
  res.writeHead(200, {'Content-Type': 'application/json'});
  res.write(JSON.stringify(object), 'utf8');
  res.end();
}

function startsWith(str, start) {
  return (str.length >= start.length &&
          str.substr(0, start.length) == start);
}

function saveScreenshotFromDataURL(dataURL) {
  var EXPECTED_HEADER = "data:image/png;base64,";
  if (startsWith(dataURL, EXPECTED_HEADER)) {
    var filename = "screenshot-" + (screenshotCount++) + ".png";
    fs.writeFile(
        filename,
        dataURL.substr(
            EXPECTED_HEADER.length,
            dataURL.length - EXPECTED_HEADER.length),
        'base64');
    util.print("Saved Screenshot: " + filename + "\n");
  }
}

server = http.createServer(function(req, res) {
  // your normal server code
  if (req.method == "POST") {
    postHandler(req, function(query) {
      switch (query.cmd) {
        case 'screenshot':
          saveScreenshotFromDataURL(query.dataURL);
          sendJSONResponse(res, { ok: true });
          break;
        default:
          util.print("err: unknown post: " + query + "\n");
          break;
      }
    });
  }
}),

server.listen(port);

---

请注意，服务器只保存屏幕截图，不提供文件（为简洁起见）。因此，您需要添加该功能或从另一台服务器提供文件。

我认为您可以抓取屏幕上显示的内容并从中制作视频（使用Fraps for eg或任何其他此类软件），然后编辑它，只保留您的webgl窗口，然后将此视频插入您的powerpoint。本文详细介绍了如何从three.js获取屏幕截图

var port = 8080
var screenshotCount = 0;

var http = require('http'),
    url = require('url'),
    fs = require('fs'),
    util = require('util'),
    path = require('path'),
    querystring = require('querystring');

function postHandler(request, callback) {
  var query_ = { };
  var content_ = '';

  request.addListener('data', function(chunk) {
    content_ += chunk;
  });

  request.addListener('end', function() {
    query_ = JSON.parse(content_);
    callback(query_);
  });
}

function sendJSONResponse(res, object) {
  res.writeHead(200, {'Content-Type': 'application/json'});
  res.write(JSON.stringify(object), 'utf8');
  res.end();
}

function startsWith(str, start) {
  return (str.length >= start.length &&
          str.substr(0, start.length) == start);
}

function saveScreenshotFromDataURL(dataURL) {
  var EXPECTED_HEADER = "data:image/png;base64,";
  if (startsWith(dataURL, EXPECTED_HEADER)) {
    var filename = "screenshot-" + (screenshotCount++) + ".png";
    fs.writeFile(
        filename,
        dataURL.substr(
            EXPECTED_HEADER.length,
            dataURL.length - EXPECTED_HEADER.length),
        'base64');
    util.print("Saved Screenshot: " + filename + "\n");
  }
}

server = http.createServer(function(req, res) {
  // your normal server code
  if (req.method == "POST") {
    postHandler(req, function(query) {
      switch (query.cmd) {
        case 'screenshot':
          saveScreenshotFromDataURL(query.dataURL);
          sendJSONResponse(res, { ok: true });
          break;
        default:
          util.print("err: unknown post: " + query + "\n");
          break;
      }
    });
  }
}),

server.listen(port);