如何动态地交换低分辨率与高分辨率纹理并总体上改进纹理加载

Question

在我的 ThreeJS 项目中，我想将一个纹理换成另一个纹理，但是一旦我这样做，UV 就完全损坏了。您可以在下面的代码中看到我是如何做到的：

var texture = new THREE.TextureLoader().load( "T_Test_1k_BaseColor.jpg" );

function loadDraco6141012( src ) {
    var loader = new THREE.GLTFLoader().setPath('');
    loader.setDRACOLoader( new THREE.DRACOLoader() );
    loader.load( src, function( gltf ) {
        gltf.scene.traverse( function ( child ) {
            if ( child.isMesh ) {
                child.material.envMap = envMap;
                child.position.y -= 0.6
                mesh = child;

                // This needs to trigger only after the texture has fully loaded

                setTimeout(function(){ 
                    mesh.material.map = texture;
                }, 5000);

                // either way the uv doesn't seem to be correct anymore, what happened..?
            }
        } );
        scene.add( gltf.scene );
    }
}

您可以在此处看到整个过程 www.dev.openstring-studios.com 如您所见，此示例中有几处非常错误。

前面说加载时间还是很慢，请问如何改善？使用像 MySQL 这样的数据库会提高性能吗？
为什么 UV 坏了，这看起来很糟糕，可能是什么问题？需要说明的是，绿色纹理贴图与蓝色纹理贴图相同，只是颜色不同。

这里是 ThreeJs Documentation / MeshStandardMaterial 关于应用地图应该如何工作的内容。我无法解释为什么它在这里不起作用。为什么紫外线突然坏了？

Answer 1

您不应该一次问多个问题 post，但我会尝试：

您可以通过大幅减少锅的多边形数量来缩短加载时间。查看开发工具中的网络选项卡，我注意到您的 .gltf 是 3.67MB，这对于一个简单的锅来说太大了。你可能不需要这个级别的细节，你可以删除 2/3 的顶点数，你的锅看起来仍然不错。
- 您似乎也在导出捆绑在 GLTF 中的纹理，这有助于使您的文件变得那么大。也许它会以非常大的尺寸 (4096x4096) 自动导出纹理？您应该尝试单独导出纹理，将它们转换为压缩格式 (JPG)，并确保它们不会过大（1024x1024 可以）。然后就可以分别加载了。
无法以这种方式加载纹理。您必须以逐渐增大的尺寸（256、512、1024 等）手动加载它们。 TextureLoader has a callback 让您知道何时加载了纹理。
UV 没有损坏，您只是加载了第二个纹理，它与第一个纹理不遵循相同的布局。确保此图像 https://www.dev.openstring-studios.com/T_Test_1k_BaseColor.jpg 遵循与原始（绿色）纹理相同的布局。

最后，你把锅分成5个不同的目数，有什么原因吗？只要有可能，您应该尝试将其设为一个网格以减少 WebGL 绘制调用的数量并获得一点性能提升。

如何动态地交换低分辨率与高分辨率纹理并总体上改进纹理加载

How to swap low resolution with high resolution textures dynamically and improve texture loading in general

html

javascript

three.js

gltf