在 Three.js 中，如何防止将图像加载到场景背景时显示为灰色？

Question

我正在尝试弄清楚如何使用 TextureLoader() 类将图像加载到场景背景上而不会显示为灰色。

我正在关注 three.js 教程 https://www.youtube.com/watch?v=xJAfLdUgdc4&list=PLjcjAqAnHd1EIxV4FSZIiJZvsdrBc1Xho 我基本上在关注他在做什么，但是当我尝试以与他相同的方式加载时它（使用与他相同的图像），图像显示为灰色。我去了他的存储库并克隆了它，它看起来仍然是一样的，所以我不确定他是如何做的是否过时或是否可能是其他一些因素（浏览器、图像等）。 我试着做了一些研究，但仍然找不到任何有用的东西。

这是它的样子：

这是它应该出现的样子（来自他的教程）：

这是完整的代码，或者您可以在他的存储库中查看它（https://github.com/WaelYasmina/threetutorial）

import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'dat.gui'

import nebula from '../img/nebula.jpg'
import stars from '../img/stars.jpg'

const renderer = new THREE.WebGLRenderer();

renderer.shadowMap.enabled = true

renderer.setSize(window.innerWidth, window.innerHeight)

document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
)

const orbit = new OrbitControls(camera, renderer.domElement)

const axesHelper = new THREE.AxesHelper(3)
scene.add(axesHelper)

camera.position.set(30,30,30)
orbit.update()

//Box
//First Phase
const boxGeometry = new THREE.BoxGeometry()
//Second Phase
const boxMaterial = new THREE.MeshBasicMaterial({color:0x00FF00})
//Third Phase
const box = new THREE.Mesh(boxGeometry,boxMaterial)
scene.add(box)

//Plane
const planeGeometry = new THREE.PlaneGeometry(30,30)
const planeMaterial = new THREE.MeshStandardMaterial({
    color: 0xFFFFFF,
    side: THREE.DoubleSide
})
const plane = new THREE.Mesh(planeGeometry,planeMaterial)
scene.add(plane)
plane.rotation.x = Math.PI * -0.5
plane.receiveShadow = true

//Grid Helper
const gridHelper = new THREE.GridHelper(30)
scene.add(gridHelper)

//Sphere
const sphereGeometry = new THREE.SphereGeometry(4,50,50)
const sphereMaterial = new THREE.MeshStandardMaterial({
    color: 0x0000FF,
    wireframe: false
})
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
scene.add(sphere)
sphere.position.set(-10,10,0)
sphere.castShadow = true

//Ambient Light
const ambientLight = new THREE.AmbientLight(0x333333)
scene.add(ambientLight)

//Directional Light
// const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.8)
// scene.add(directionalLight)
// directionalLight.position.set(-30,50,0)
// directionalLight.castShadow = true
// directionalLight.shadow.camera.bottom = -12

// const dLightHelper = new THREE.DirectionalLightHelper(directionalLight,5)
// scene.add(dLightHelper)

// const dLightShadowHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
// scene.add(dLightShadowHelper)

//Spotlight
const spotLight = new THREE.SpotLight(0xFFFFFF)
scene.add(spotLight)
spotLight.position.set(-100,100,0)
spotLight.castShadow = true
spotLight.angle = 0.2

const sLightHelper = new THREE.SpotLightHelper(spotLight)
scene.add(sLightHelper)

//FOG
//scene.fog = new THREE.Fog(0xFFFFFF, 0, 200)

// scene.fog = new THREE.FogExp2(0xFFFFFF, 0.01)
// renderer.setClearColor(0xFFEA00)

//Texture
const textureLoader = new THREE.TextureLoader()
scene.background = textureLoader.load(stars)

// const cubeTextureLoader = new THREE.CubeTextureLoader()
// scene.background = cubeTextureLoader.load([
//     nebula,
//     nebula,
//     stars,
//     stars,
//     stars,
//     stars
// ])

//GUI
const gui = new dat.GUI()
const options = {
    sphereColor : '#ffea00',
    wireframe: false,
    speed: 0.01,
    angle: 0.2,
    penumbra: 0,
    intensity: 1
}

// color gui
gui.addColor(options, 'sphereColor').onChange(function(e){
    sphere.material.color.set(e)
})

// wireframe gui
gui.add(options, 'wireframe').onChange(function(e){
    sphere.material.wireframe = e
})

// speed gui
gui.add(options, 'speed', 0, 0.1)

gui.add(options, 'angle', 0, 0.1)
gui.add(options, 'penumbra', 0, 0.1)
gui.add(options, 'intensity', 0, 1)



//Animation
let step = 0



function animate(time) {
    box.rotation.x = time/1000
    box.rotation.y = time/1000

    step += options.speed 
    sphere.position.y = 10* Math.abs(Math.sin(step))
    
    spotLight.angle = options.angle
    spotLight.penumbra = options.penumbra
    spotLight.intensity = options.intensity
    sLightHelper.update()
    
    renderer.render(scene, camera)

}

renderer.setAnimationLoop(animate)

我试着查看有关 TextureLoader() 的文档https://threejs.org/docs/index.html?q=textureloader#api/en/loaders/TextureLoader 但我找不到任何有用的东西。

我试图将 alpha 设置为 true 但它不起作用 const renderer = new THREE.WebGLRenderer( { alpha: true } );

Answer 1

所以我在 three.js 论坛和其中一个模组中询问某人（ Mugen87) 解决了它。

这是我问的地方 https://discourse.threejs.org/t/how-can-i-prevent-an-image-from-appearing-greyed-out-when-loading-it-onto-the-scene-background-in-three -js/51136

从最新的three.js版本r152开始，引擎默认采用sRGB工作流程。您可以在此处找到有关此更改的更多信息： https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791

所以这是有效的新代码：

const bgTexture = textureLoader.load(stars)
bgTexture.colorSpace = THREE.SRGBColorSpace
scene.background = bgTexture