1

我正在使用此代码

 jQuery(document).ready(function () {
    console.log('loaded');
    show();
});

因此，当我页面上的所有内容加载一个函数时，就会启动项目。但是，我将其与 Three.JS 一起使用，其中我加载了几 mb 的模型。

该脚本在几毫秒后返回“已加载”，但模型并未完全加载。此外，Chrome 控制台告诉我模型需要几秒钟才能完全加载：/

这是绕过它的错误方法吗？对不起，我对它很陌生！

4

4 回答 4

1

此页面：http://lightmap.staticloud.com/等到两个纹理被加载，然后显示渲染按钮。

如果认为该示例页面的源代码可能会对您有所帮助。

var loadCount = 0;

function loadTexture(url) {
    var image = new Image();
    var texture = new THREE.Texture(image);
    image.onload = function() {
        texture.needsUpdate = true;
        console.log("texture " + url + " loaded");
        loadCount++;
        // Enable Render button when both images loaded
        if (loadCount == 2)
            document.getElementById("renderButton").disabled = false;
    };
    image.src = url;
    return texture;
}
于 2012-04-16T12:20:44.200 回答
0

上面 Thdk 给出的 loadTexture 函数与 Three.js 中包含的ImageUtils 源码中给出的函数基本相同。

如果您查看 THREE.ImageUtils.loadTexture 函数的源代码，您会发现它与上面的函数相同，除了一些小的更改。我们还有额外的纹理映射参数和回调。回调被放置在 Image 对象的 onload 事件中。这意味着我们可以利用它来推迟创建对象，直到我们拥有它们的纹理并确保在我们制作动画之前所有它们都已加载。

loadTexture: function ( path, mapping, callback ) {

        var image = new Image(), texture = new THREE.Texture( image, mapping );

        image.onload = function () { texture.needsUpdate = true; if ( callback ) callback( this ); };
        image.crossOrigin = this.crossOrigin;
        image.src = path;

        return texture;

    },

使用回调，您可以通过以下方式利用它来实现您想要的：

THREE.ImageUtils.loadTexture(path1, null, function () {
THREE.ImageUtils.loadTexture(path2, null, function () {
THREE.ImageUtils.loadTexture(path3, null, function () { renderingEnabled = true; }) }) });

然后在调用动画逻辑和渲染调用时加上if(renderingEnabled). 或者，如果您正确设置了所有内容，您可以简单地从最后一个回调中调用动画循环。

于 2012-06-29T06:29:38.617 回答
0

文件已加载。

three.js 生成不属于初始文档的模型。它们在生成时由 ThreeJS 插入，如项目页面所示：https ://github.com/mrdoob/three.js/

注意这一行：

document.body.appendChild( renderer.domElement );
于 2012-04-16T11:32:14.743 回答
0

jQuery 就绪事件将在 DOM 加载后触发。在其他所有内容（即图像等）加载之后，窗口 onload 事件将稍后出现。

于 2012-04-16T11:32:29.037 回答