为什么模型使用 blade 颜色和 Three.js 进行渲染？

Question

你好，我导入了我的模型（obj + mtl + 纹理），但它呈现 blade 颜色。

通常应该是这样的:

目前场景配置代码为：

loadModel()

    scene.current.background = new THREE.Color( 'transparent' );

    scene.current.add(new THREE.AxesHelper( 5 ));

    const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) );
    mesh.rotation.x = - Math.PI / 2;
    mesh.receiveShadow = true;
    scene.current.add( mesh );

    controls.current.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
    controls.current.dampingFactor = 0.2;
    controls.current.screenSpacePanning = false;
    controls.current.maxPolarAngle = Math.PI / 2;
    controls.current.maxDistance = 200
    controls.current.minDistance = 20
    controls.current.target = new THREE.Vector3(0, 16, 0)

    camera.current.position.set( -3, 17, 8 );
    camera.current.lookAt(new THREE.Vector3( 0, 15, 0 ));
    controls.current.update();

    scene.current.background = new THREE.Color( 0xFFFFFF );

    const ambilentLight = new THREE.AmbientLight( 0xffffff, 0.5)
    scene.current.add(ambilentLight)

    const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff );
    hemiLight.position.set( 0, 500, 30 );
    hemiLight.castShadow = true
    scene.current.add( hemiLight );

    scene.current.add(new THREE.HemisphereLightHelper( hemiLight, 5 ));

    const dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
    dirLight.position.set( -10, 50, 50   );
    dirLight.castShadow = true;
    scene.current.add( dirLight );

    scene.current.add(new THREE.DirectionalLightHelper( dirLight, 5 ));

    renderer.current.shadowMap.enabled = true;
    renderer.current.setPixelRatio( window.devicePixelRatio );
    renderer.current.setSize( window.innerWidth, window.innerHeight );
    renderer.current.outputEncoding = THREE.sRGBEncoding;
    renderer.current.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.current.toneMappingExposure = 1;
    renderer.current.physicallyCorrectLights = true;
    container.current.appendChild(renderer.current.domElement);

    window.addEventListener( 'resize', onWindowResize );

    animate();

不知道是灯光问题还是其他问题。有人知道这个问题吗？

Answer 1

如果您正在使用 OBJ/MTL 并将 WebGLRenderer.outputEncoding 设置为 THREE.sRGBEncoding;，我怀疑问题是由不完整的颜色 space 配置引起的。您可以通过两种方式解决此问题：

请勿触摸outputEncoding。
将所有颜色纹理的encoding 属性设置为THREE.sRGBEncoding;。

由于 OBJLoader returns 是 THREE.Group 的实例，您可以像这样更新纹理：

group.traverse( function( object ) {

    if ( object.isMesh === true && object.material.map !== null ) {

        object.material.map.encoding = THREE.sRGBEncoding;

    }

} );

顺便说一句：通常只有在将 HDR 纹理应用到场景时才使用色调映射。

为什么模型使用 blade 颜色和 Three.js 进行渲染？

Why model renders with a blade color with Three.js?

javascript

three.js