我正在尝试使用 html2canvas.js 渲染 THREE.js 场景 + 一些覆盖的 HTML 元素。有用大多数时候，但并非一直如此。
在失败的情况下，将渲染 HTML 元素（背景、覆盖层等），但不会渲染其他元素。 THREE.js 场景表现得好像完全是空的，尽管它明显包含数据。我可以说，对于较大的模型，它通常会失败，但只是在渲染的早期阶段。确实如此最终在所有情况下都有效，但较大的模型大约需要 30 秒。就好像我必须给缓冲区一些时间来稳定。
html2canvas 按照您的预期处理 THREE.js 画布 - 它只是使用drawImage将 THREE.js 画布绘制到库最终返回的新画布上。
否则，我会尝试确保画布上没有其他东西忙碌，就像这个小提琴一样：http://jsfiddle.net/TheJim01/k6dto5sk/63/ http://jsfiddle.net/TheJim01/k6dto5sk/63/（下面是js代码）
正如您所看到的，我做了很多工作来尝试阻止渲染循环，并在我想要捕获场景时再执行一次渲染。但即使所有这些预防措施似乎也没有帮助。
有没有更好的方法从 THREE.js 画布中获取图像？我可以手动完成该部分，然后将 THREE.js 画布换成足够长的时间，以便 html2canvas 完成其工作，然后将 THREE.js 画布换回。我不想这样做，所以如果用户制作大量快照（图像资源、到处都是图像资源......），我不会弄乱 DOM。
无论如何，这是代码。欢迎任何想法或建议。谢谢！
var hostDiv, scene, renderer, camera, root, controls, light, shape, theta, aniLoopId, animating;
function snap() {
animating = false;
cancelAnimationFrame(aniLoopId);
renderer.render(scene, camera);
// html2canvas version:
/*
var element = document.getElementById('scenePlusOverlays');
// the input buttons represent my overlays
html2canvas( element, function(canvas) {
// I'd convert the returned canvas to a PNG
animating = true;
animate();
});
*/
// This is basically what html2canvas does with the THREE.js canvas.
var c = document.getElementById('rendererCanvas');
var toC = document.createElement('canvas');
toC.width = c.width;
toC.height = c.height;
var toCtx = toC.getContext('2d');
toCtx.drawImage(c, 0, 0);
console.log(toC.toDataURL('image/png'));
animating = true;
animate();
}
function addGeometry() {
//var geo = new THREE.BoxGeometry(1, 1, 1);
var geo = new THREE.SphereGeometry(5, 32, 32);
var beo = new THREE.BufferGeometry().fromGeometry(geo);
geo.dispose();
geo = null;
var mat = new THREE.MeshPhongMaterial({color:'red'});
var msh;
var count = 10;
count /= 2;
var i = 20;
var topLayer = new THREE.Object3D();
var zLayer, xLayer, yLayer;
for(var Z = -count; Z < count; Z++){
zLayer = new THREE.Object3D();
for(var X = -count; X < count; X++){
xLayer = new THREE.Object3D();
for(var Y = -count; Y < count; Y++){
yLayer = new THREE.Object3D();
msh = new THREE.Mesh(beo, mat);
yLayer.add(msh);
msh.position.set((X*i)+(i/2), (Y*i)+(i/2), (Z*i)+(i/2));
xLayer.add(yLayer);
}
zLayer.add(xLayer);
}
topLayer.add(zLayer);
}
scene.add(topLayer);
}
var WIDTH = '500';//window.innerWidth,
HEIGHT = '500';//window.innerHeight,
FOV = 35,
NEAR = 0.1,
FAR = 10000;
function init() {
hostDiv = document.getElementById('hostDiv');
document.body.insertBefore(hostDiv, document.body.firstElementChild);
renderer = new THREE.WebGLRenderer({ antialias: true, preserverDrawingBuffer: true });
renderer.setSize(WIDTH, HEIGHT);
renderer.domElement.setAttribute('id', 'rendererCanvas');
hostDiv.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
camera.position.z = 500;
controls = new THREE.TrackballControls(camera, renderer.domElement);
light = new THREE.PointLight(0xffffff, 1, Infinity);
light.position.copy(camera.position);
scene = new THREE.Scene();
scene.add(camera);
scene.add(light);
animating = true;
animate();
}
function animate() {
if(animating){
light.position.copy(camera.position);
aniLoopId = requestAnimationFrame(animate);
}
renderer.render(scene, camera);
controls.update();
}
EDIT:以所描述的方式调用 readPixels 或 toDataURL 是可能的——我曾考虑过使用类似的方法来获取缓冲区，但由于所需的异步代码量而推迟了。像这样的事情：
var global_callback = null;
function snapshot_method() {
global_callback = function(returned_image) {
// do something with the image
}
}
// ...
function render() {
renderer.render();
if(global_callback !== null) {
global_callback(renderer.domElement.toDataURL());
global_callback = null;
}
}
