如何动态地使用高分辨率纹理替换低分辨率纹理，并提高纹理加载效率。

Question

如何动态地使用高分辨率纹理替换低分辨率纹理，并提高纹理加载效率。

3

在我的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文档/MeshStandardMaterial，点击此处。但我无法解释为什么在这里不能奏效。为什么UV突然会出现问题呢？

- Miger

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- M - · Accepted Answer

在一个帖子中不应该问多个问题，但我会尝试回答：

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

最后，您将壶分成了5个不同的网格，是否有特别的原因？尽可能地，您应该尝试使它成为一个网格，以减少 WebGL 绘制调用次数并获得一些性能提升。