Question

我试图使用jsc3d在网站上渲染角色头像，它有点工作（无法弄清楚如何让它在默认情况下放大......）但无论如何我怎么知道它何时呢？完成渲染？当它完成时我想将base64信息发送到另一个php脚本，该脚本生成一个图像文件供该角色用作个人资料图片，除了何时激活它我已经有了这个

我尝试了setTimeout

setTimeout(function(){
saveImage();
}, 2000);

然而，由于人们拥有不同的计算机速度，这可能会出现问题，因此可能会在应用纹理之前将图像保存为灰色等等。

我在JSC3D github上尝试了这个，但它也不起作用..

 viewer.onloadingcomplete = function() {
 window.open(canvas.toDataURL());
 saveImage();
 };

感谢。

Answer 1

我假设您正在使用obj文件格式，因此我将向您展示如何在加载mtl文件中的所有纹理时创建回调，并应用于网格：

按如下方式更改jsc3d.js（为简洁起见，已跳过原始代码的某些部分）：

1）在viewer.loadScene函数中添加你的新回调，直接在loader.onresource下

JSC3D.Viewer.prototype.loadScene = function() {
    [...]
    loader.onresourcecomplete = function() {
        if(self.onscenecomplete && (typeof self.onscenecomplete) == 'function')
            self.onscenecomplete();
    };
    [...]
};

然后，您需要跟踪纹理请求，并在每个纹理下载并应用到网格后立即减少总计数：

JSC3D.ObjLoader = function(onload, onerror, onprogress, onresource) {
    [...]
    this.resourceRequestCount = 0;
};

JSC3D.ObjLoader.prototype.loadMtlFile = function(scene, urlPath, fileName) {
    [...]
    for(var textureFileName in textures)
        self.resourceRequestCount++;
    [...]
};

JSC3D.ObjLoader.prototype.setupTexture = function(meshList, textureUrlName) {
    var self = this;
    var texture = new JSC3D.Texture;
    texture.onready = function() {
        for(var i=0; i<meshList.length; i++)
            meshList[i].setTexture(this);
        if(self.onresource)
            self.onresource(this);
        if(--self.resourceRequestCount == 0)
            self.onresourcecomplete();
    };
    texture.createFromUrl(textureUrlName);
};

在主js文件中的viewer.onscenecomplete事件中，您可以调用viewer.update()并保存位图，就像在上传完成时一样，但是当下载obj和mtl文件时会引发该事件，而不是纹理，如果有的话。

请注意，您还需要执行其他一些小的更改，例如在请求中止时重置resourceRequestCount，以及其他一些简单的清理。

以下是更详细的更改日志：jsc3d.v2 on GitHub

如何判断jsc3d何时完成渲染？

1 个答案: