ThreeJS场景带纹理，为什么toDataUrl返回黑色JPG? [英] ThreeJS scene with textures, why toDataUrl return black JPG?

问题描述

我有一个带有 2 个纹理的场景，从 jpg 加载.我做

I have a scene with 2 textures, that loaded from jpg. I make

 imgData = renderer.domElement.toDataURL(strMime)

并看到黑色图像.我发现了这个问题和从他那里得到了这句话:

and see black image. I found this question and took from him this lines:

 texture.needsUpdate = true
 texture2.needsUpdate = true

但结果 jpg 文件是黑色方块.我制作了一个 codepen with full code 来重现这个案例

but result jpg file is black square. I make a codepen with full code for reproduce this case

如何正确保存jpg帧图像?谢谢！

How save jpg frame image correctly? Thanks!

推荐答案

保存在后调用renderer.render(scene, camera)，保证画布用一些渲染输出初始化.

Save it after call to renderer.render(scene, camera), when the canvas is guaranteed to be initialized with some render output.

例如:

var saveRequested = false;

function render() {
    renderer.render(scene, camera);

    // FIX: scene is rendered, ready to save it
    if (saveRequested) {
        saveAsImage2();
        saveRequested = false;
    }
}

function saveAsImage() {
    // say, need to take a snapshot after next frame is rendered
    saveRequested = true;
}

function saveAsImage2() {
    var imgData, imgNode;

    try {
        var strMime = "image/jpeg";
        var strDownloadMime = "image/octet-stream";

        let imgData = renderer.domElement.toDataURL(strMime);
        console.log(imgData);

        saveFile(imgData.replace(strMime, strDownloadMime), "test.jpg");

    } catch (e) {
        console.log(e);
        return;
    }
}

这篇关于ThreeJS场景带纹理，为什么toDataUrl返回黑色JPG?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！