Why my 3d background is not loading in ThreeJS? - three.js

Question

I'm using CubeTextureLoader for a 3d background of 2 images and it aint working. Even though the path to images is fine and I get the images working fine in TextureLoader.
import * as THREE from "three"
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js"
import * as dat from "dat.gui"
import nebula from './images/nebula.jpg'
import stars from './images/stars.jpg'
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.shadowMap.enabled=true
renderer.setClearColor(0x590d18, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const orbit=new OrbitControls(camera,renderer.domElement)
const axesHelper = new THREE.AxesHelper(2);
scene.add(axesHelper);
camera.position.set(-10, 30, 30);
orbit.update()
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=-0.5*Math.PI
plane.receiveShadow=true
const gridHelper=new THREE.GridHelper(30)
scene.add(gridHelper)
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,4,4)
sphere.castShadow=true
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)
scene.fog=new THREE.FogExp2(0xFFFFFF,0.02)
//loading an image
//const textureLoader=new THREE.TextureLoader()
//scene.background=textureLoader.load(stars) THIS WORKS
const cubeTextureLoader=new THREE.CubeTextureLoader() THIS DONT
scene.background=cubeTextureLoader.load([
stars,
stars,
nebula,
stars,
stars,
stars
])
const gui=new dat.GUI()
const options={
sphereColor:'#ffea00',
wireframe:false,
speed:0.01,
angle:0.2,
penumbra:0,
intensity:1
}
gui.addColor(options,'sphereColor').onChange(function(e){
sphere.material.color.set(e)
})
gui.add(options,'wireframe').onChange(function(e){
sphere.material.wireframe=e
})
gui.add(options,"speed",0,0.1)
gui.add(options,"angle",0,1)
gui.add(options,"penumbra",0,1)
gui.add(options,"intensity",0,1)
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)
I was expecting a 3d background , but instead I get the original black color.
I'm using CubeTextureLoader for a 3d background of 2 images and it aint working. Even though the path to images is fine and I get the images working fine in TextureLoader.

Answer 1

I had the same problem a while back and it turns out all the faces of the CubeTextureLoader must be squares.
So, cropping the images to have a 1:1 dimension might work.