ThreeJS - 褪色纹理

Question

我用 ThreeJS 创建了一个简单的模型查看器。 我从 .mtl 和 .obj（带纹理）文件加载。 除了纹理之外，一切都工作正常。 如果我使用环境光，纹理就会显得褪色。 如果我禁用环境光，则根本不会显示纹理。 我在带有 WebView 的 Android 应用程序中运行它。

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 3;


        scene = new THREE.Scene();

        ambient = new THREE.AmbientLight(0x404040);
        scene.add(ambient);


        renderer = new THREE.WebGLRenderer();

        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        container.appendChild(renderer.domElement);


        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;
        controls.enableZoom = true;

        window.addEventListener('resize', onWindowResize, false);

        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.load('../foods_models/7/mtl.mtl', function (materials) {
            materials.preload();

            if (materials.materials.default != undefined) {
                materials.materials.default.map.magFilter = THREE.NearestFilter;
                materials.materials.default.map.minFilter = THREE.LinearFilter;
            }
            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.load('../foods_models/7/obj.obj', function (object) {
                scene.add(object);
                zoomCameraToSelection(camera, controls, object);
            });
        });

Answer 1

我在研究我的项目中映射纹理看起来被冲淡的问题时发现了这篇文章。

我正在 REACT THREE FIBER 工作，但我想分享我的解决方案，以防其他人进行相同的搜索...我发现文档是相关的。

THREE 中存在与 sRGB 编码相关的问题。在 RTF 中，您可以在

linear

上使用

flat

和

<Canvas/>

属性：

<Canvas
  linear
  flat
>
...
</Canvas>

https://github.com/pmndrs/react- Three-Fiber/blob/master/markdown/api.md?plain=1#L50-L51

我不确定如何将其适应普通三，但这条评论帮助我在 React 中实现目标：

THREE.js 中 sRGB 纹理的伽玛校正处理

Answer 2

对于普通 ThreeJS，您需要将纹理上的

colorSpace

属性设置为

THREE.SRGBColorSpace

。由于某种原因，它默认为

THREE.NoColorSpace

，这可能会导致纹理看起来褪色。例如：

const texture = new THREE.CanvasTexture(textureImageBitmap)
texture.colorSpace = THREE.SRGBColorSpace