為什么 Three.js 等距矩形背景的顏色/對比度如此糟糕，我該如何解決？

Question

我在一家建築公司的網站項目中使用 Three.js。 他們想要一些我用手機（Google pixel 5）拍攝的 360° 照片（photospheres）。 他們還想展示他們的一個項目的 3D 表示，因此使用 Three.js 似乎是最好的解決方案。

這是它在 Google 相冊中的樣子：

谷歌照片截圖

Three.js 中的樣子：

Three.js 截圖

您可以看到 colors 與原始版本相比非常糟糕（對比度、白平衡、idk）。

這是我第一次使用 Three.js 所以這是我的代碼：

場景：

async connectedCallback() {
    // Scene
    this.scene = new THREE.Scene();

    // Background equirectangular texture
    const background_img = this.getAttribute('background');
    if (background_img) this.loadBackground(background_img);

    // Camera
    this.camera = new THREE.PerspectiveCamera(60, this.clientWidth / this.clientHeight, 1, 5000);

    // Lights
    // this.scene.add(new THREE.HemisphereLight(0xffeeb1, 0x080820, 0));

    const spotLight = new THREE.SpotLight(0xffa95c, 5);
    spotLight.position.set(20, 20, 20);
    spotLight.castShadow = true;
    spotLight.shadow.bias = -0.0001;
    spotLight.shadow.mapSize.width = 1024 * 4;
    spotLight.shadow.mapSize.height = 1024 * 4;
    this.scene.add(spotLight);

    // Renderer
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.toneMapping = THREE.ReinhardToneMapping;
    this.renderer.toneMappingExposure = 2.3;
    this.renderer.shadowMap.enabled = true;
    this.renderer.setPixelRatio(devicePixelRatio);
    this.renderer.setSize(this.clientWidth, this.clientHeight);
    this.appendChild(this.renderer.domElement);

    // Orbit controls
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.controls.autoRotate = true;

    // Resize event
    addEventListener('resize', e => this.resize());

    // Load model
    const url = this.getAttribute('model');
    if (url) this.loadModel(url);

    // Animate
    this.resize();
    this.animate();

    // Resize again in .1s
    setTimeout(() => this.resize(), 100);

    // Init observer
    new IntersectionObserver(entries => this.classList.toggle('visible', entries[0].isIntersecting), { threshold: 0.1 }).observe(this);
}

背景（光球）：

loadBackground(src) {
    const equirectangular = new THREE.TextureLoader().load(src);
    equirectangular.mapping = THREE.EquirectangularReflectionMapping;

    // Things Github Copilot suggested, removing it does not change colors so I thing it's not the problem
    equirectangular.magFilter = THREE.LinearFilter;
    equirectangular.minFilter = THREE.LinearMipMapLinearFilter;
    equirectangular.format = THREE.RGBFormat;
    equirectangular.encoding = THREE.sRGBEncoding;
    equirectangular.anisotropy = 16;

    this.scene.background = equirectangular;
}

Answer 1

正如馬奎佐在評論中所說：

您正在更改渲染器的色調映射和曝光。 當您對顏色 output 進行修改時，結果不同是正常的。

我一直說問題不在於副駕駛建議的 Github 建議的行，因為我在刪除這些行時得到了相同的結果，但我嘗試一次刪除一行，結果發現這條行是問題所在：

equirectangular.format = THREE.RGBFormat;

現在我的結果與谷歌照片的結果相比有點暗，但 colors 終於准確了。 我還有很多東西要學哈哈。

刪除問題行后的 Three.js 截圖

謝謝馬奎佐！