Question

我正在尝试为动画的固定帧创建高分辨率的屏幕截图。我有一个连续旋转的元素，同时使用.rotation.set（）和.setFromRotationMatrix（）进行动画处理（使用touchmove进行操作时会应用该元素），然后重置元素的旋转，以便将其以正确的视图导出到图像，并且可以正常工作，但通常也无法以正确的旋转角度捕获图像，好像没有时间捕获图像或未正确重置图像一样。

有任何提示吗？这是我的捕获和重置代码。

 let oldRotation;
function resetDefaults() {
// A.renderer.setSize(3000, 3000);
A.play = false;

A.renderer.setSize(2100, 2100);

oldRotation = {
    heart: A.heart.rotation.y,
    heartParts: [
        A.heartParts[0].rotation.y,
        A.heartParts[1].rotation.y,
        A.heartParts[2].rotation.y,
    ]
};
A.camera.aspect = 1;
A.camera.updateProjectionMatrix();
A.renderer.setClearAlpha(0);
A.renderer.setClearColor(0xffffff, 0.0);
A.scene.background = null;
A.planeBottom.visible = false;
if(!A.isMobile) {
    A.particle.mesh.visible = false;
    A.fullParticle.mesh.visible = false;
}

//w.document.body.style.backgroundColor = "red";
var img = new Image();

// Without 'preserveDrawingBuffer' set to true, we must render now
A.heart.rotation.y = 1;
A.heartParts[0].rotation.y = 0;
A.heartParts[1].rotation.y = 0;
A.heartParts[2].rotation.y = 0;

A.renderer.render(A.scene, A.camera, null, false);
img.src = A.renderer.domElement.toDataURL();


setToPrevious(img);

}

function setToPrevious(img, color) {
A.camera.aspect = window.innerWidth / window.innerHeight;
A.camera.updateProjectionMatrix();

A.renderer.setSize(window.innerWidth, window.innerHeight);
A.heart.rotation.y = oldRotation.heart;
A.heartParts[0].rotation.y = oldRotation.heartParts[0];
A.heartParts[1].rotation.y = oldRotation.heartParts[1];
A.heartParts[2].rotation.y = oldRotation.heartParts[2];
A.planeBottom.visible = true;
if (!A.isMobile) {
    A.particle.mesh.visible = true;
    A.fullParticle.mesh.visible = true;
}
A.play = true;
setTimeout(()=> {
    sendOver(img.src, color);  
}, 400)
}`enter code here`

https://jsbin.com/tuhesuvofe

一个生动的例子在https://ahumanbody.com

Three.js：场景的高分辨率屏幕截图

0 个答案: