三个js，MeshStandardMaterial看起来是黄色的

Question

您好，我正在我的场景中加载 GLTF 模型。但是模型看起来太黄了，我认为这与 material 有关。但我不知道是什么原因造成的，它不是模型本身，因为如果我在 donmccurdy's gltf viewer 上检查它，它看起来很完美。

参见下面的参考资料：
GLTF 查看器：

这就是同一模型在我的场景中的样子：

我已经在场景中添加了一个环境贴图，这个修复了可能的问题，但不是黄色.. 请参阅下面的当前代码：

let scene, camera, renderer, controls;
let dummy = new THREE.Object3D();
let mat4 = new THREE.Matrix4();

const loader = new THREE.GLTFLoader();
let clock = new THREE.Clock();


function loadModel(url, callback) {
    loader.load(
        url,
        function ( gltf ) {
            const model = gltf.scene.children[0];
            callback(model);
        },
        function ( xhr ) {
            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
        },
        function ( error ) {
            console.log( 'An error happened', error );
        }
    );
}

function generateInstances(model, count) {
    const geometry = model.geometry;
    geometry.scale(0.1, 0.1, 0.1);
    const material = model.material;
    return new THREE.InstancedMesh(geometry, material, count);
}

function setInstancePositions(instances, startPos, counts, spacing) {
    if(instances.count < counts.x * counts.y * counts.z) throw Error("counts exceeds max instanciated meshes");

    let index = 0;
    for (let x = 0; x < counts.x; x++) {
        for (let y = 0; y < counts.y; y++) {
            for (let z = 0; z < counts.z; z++) {
                dummy.position.addVectors(startPos, new THREE.Vector3(x * spacing.x, y * spacing.y, z * spacing.z));
                dummy.updateMatrix();
                instances.setMatrixAt(index, dummy.matrix);
                index++;
            }
        }
    }

    return instances;
}

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
    camera.position.set(50, 75, 100);
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(innerWidth, innerHeight);
    renderer.setClearColor(0xFFFFFF);
    renderer.physicallyCorrectLights = true;
    document.body.appendChild(renderer.domElement);

    new THREE.RGBELoader()
        .load('assets/enviroment.hdr', function ( texture ) {
            texture.mapping = THREE.EquirectangularReflectionMapping;
            scene.environment = texture;
        });


    let controls = new THREE.OrbitControls(camera, renderer.domElement);

    const light1  = new THREE.AmbientLight(0xffffff, 0.3);
    light1.name = 'ambient_light';
    scene.add( light1 );

    loadModel('assets/100-dollars.glb', (model) => {
        let instances = generateInstances(model, 1500);
        instances = setInstancePositions(instances, new THREE.Vector3(), new THREE.Vector3(5, 30, 10), new THREE.Vector3(27, 3, 13));
        scene.add(instances);
    });


    renderer.setAnimationLoop(() => {

        camera.lookAt(scene.position);
        renderer.render(scene, camera);
    });
}

init();

这里是 hdr 文件：url
这是模型：url

Answer 1

使用 GLTFLoader 需要 sRGB 工作流程，但您的应用中并未配置该工作流程。添加以下行并查看它是否解决了颜色问题：

renderer.outputEncoding = THREE.sRGBEncoding;

此外，考虑打开抗锯齿和使用 setPixelRatio() 以获得更好的质量：

renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);

三个js，MeshStandardMaterial看起来是黄色的

Three js, MeshStandardMaterial looks yellow

javascript

textures

lighting

three.js

gltf