CubeTextureLoader - three.js not working

[OwenStritz]

this code is suppost to create a skybox that just a repeated windows logo but it doesn’t. i’ve looked everywhere. I even stool the code from threejs.org and changed the file paths but even that didn’t work. i know i dont have to import anything because this is part of three.js and the file paths seem to be correct

heres the code that isn’t working

scene.background = new THREE.CubeTextureLoader()
  .setPath( 'img/' )
	.load( [
		'windows.png',
    'windows.png',
    'windows.png',
    'windows.png',
    'windows.png',
    'windows.png'
	] );

here for the project if you want to see whole thing https://replit.com/@OwenStritz/3js?v=1 but other wise this is the code:

import * as THREE from 'three';
import * as dat from 'https://unpkg.com/dat.gui@0.7.7/build/dat.gui.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

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(-10, 30, 30);
orbit.update();

const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({color: 0x00FF00});
const box = new THREE.Mesh(geometry, material);
scene.add(box);

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, 10, 0);
sphere.castShadow = true;

const ambientLight = new THREE.AmbientLight(0x333333);
scene.add(ambientLight);

//const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
//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)

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.Fog(0xFFFFFF, 0, 200);
scene.fog = new THREE.FogExp2(0xFFFFFF, 0.01);

scene.background = new THREE.CubeTextureLoader()
  .setPath( 'img/' )
	.load( [
		'windows.png',
    'windows.png',
    'windows.png',
    'windows.png',
    'windows.png',
    'windows.png'
	] );

//const texture = new THREE.TextureLoader();
//scene.background = texture.load('img/windows.png');

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() {
  requestAnimationFrame(animate);

  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();
  
  box.rotation.x += 0.05;
  box.rotation.y += 0.05;
  
  renderer.render(scene, camera);
}
animate();

[dragonhunter1]

May i ask how it is not working? I see several errors in dev tools when I go to your site, is that your problem?

[OwenStritz]

uuuh my school blocked the console recently so oof. can you seen me picture of the errors if you can.

(edit) may be fixed i was just screwing around with it dont know if that was the issue, idk if it was though

[dragonhunter1]

It works now? I don’t see any windows logos or skyboxes tho.

Here are some webgl errors:

[.WebGL-0000609C00B28700] GL_INVALID_VALUE: Each cubemap face must have equal width and height.
[.WebGL-0000609C00B28700] GL_INVALID_OPERATION: Level of detail outside of range.
[.WebGL-0000609C00B28700] GL_INVALID_OPERATION: Texture format does not support mipmap generation.

[OwenStritz]

i asume most of this is to do with size of image? please tell me thats all thats wrong. also if so if i do get sqaure image would it scale down?

thanks already figgured it out it was to do with img size