代码之家  ›  专栏  ›  技术社区  ›  FutureCake

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

  •  0
  • FutureCake  · 技术社区  · 4 年前

    嗨,我正在我的场景中加载GLTF模型。但这个模型看起来太黄了,我想这与材料有关。但我不知道是什么原因导致的,这不是模型本身,因为如果我检查它 donmccurdy's gltf viewer 它看起来很完美。

    请参阅以下参考资料:
    GLTF查看器:
    enter image description here

    这就是同一个模型在我的场景中的样子:
    enter image description here

    我已经为场景添加了一个环境地图,这修复了可能的东西,但没有黄色。。 请参阅下面的当前代码:

    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

    0 回复  |  直到 4 年前
        1
  •  2
  •   Mugen87    4 年前

    使用 GLTFLoader 需要sRGB工作流,而该工作流未在您的应用程序中配置。添加以下行,看看它是否解决了颜色问题:

    renderer.outputEncoding = THREE.sRGBEncoding;
    

    此外,考虑打开抗锯齿和的使用 setPixelRatio() 为了获得更好的质量:

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