ThreeJS - 洗掉的纹理

Posted 2023-02-22

【中文标题】ThreeJS - 洗掉的纹理

【英文标题】：ThreeJS - Washed out textures

【发布时间】：2021-11-03 13:37:53

【问题描述】：

我用 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);
            );
        );

【参考方案1】：

我在研究一个贴图纹理在我的项目中看起来褪色的问题时发现了这篇文章。

我正在研究 REACT THREE FIBER，但我想分享我的解决方案，以防有其他人在同一搜索中...我发现文档是相关的。

在 THREE 中存在与 sRGB 编码相关的问题。在 RTF 中，您可以在 <Canvas/> 上使用 linear 和 flat 属性：

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

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

我不确定如何使其适应原版 THREE，但这条评论帮助我在 React 中实现了目标：

Gamma correct treatment of sRGB textures in THREE.js