ThreeJS -洗掉纹理

Question

我用ThreeJS创建了一个简单的模型查看器。我从.mtl和.obj (带有纹理)文件中加载。除了纹理，一切都很好。如果我使用环境光的话，纹理就会被洗掉。如果我禁用环境光，纹理将完全不显示。我正在用WebView在安卓应用程序中运行这个程序。

​

​

​

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

我是在研究一个问题的时候发现这篇文章的，我的项目上有一个映射的纹理，看上去已经被冲垮了。

我的工作是反应三根纤维，但我想分享我的解决方案，以防有其他人在同一搜索.我发现这些文件是相关的。

有一个与sRGB编码有关的问题。在RTF中，您将在linear上使用<Canvas/>和flat道具。

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

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

我不知道该如何使之适应香草三，但这个评论帮助我做出了反应：

Gamma correct treatment of sRGB textures in THREE.js