CubeTextureLoader - three.js not working

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 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( [
	] );

here for the project if you want to see whole thing but other wise this is the code:

import * as THREE from 'three';
import * as dat from '';
import { OrbitControls } from '';

const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  window.innerWidth / window.innerHeight,
const orbit = new OrbitControls(camera, renderer.domElement);

const axesHelper = new THREE.AxesHelper(3);

camera.position.set(-10, 30, 30);

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

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

const gridHelper = new THREE.GridHelper(30);

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

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

//const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
//directionalLight.position.set(-30, 50, 0);
//directionalLight.castShadow = true;
// = -12

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

//const dLightShadowHelper = new THREE.CameraHelper(;

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

const sLightHelper = new THREE.SpotLightHelper(spotLight);

//scene.fog = new THREE.Fog(0xFFFFFF, 0, 200);
scene.fog = new THREE.FogExp2(0xFFFFFF, 0.01);

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

//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) {

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() {

  step += options.speed;
  sphere.position.y = 10 * Math.abs(Math.sin(step));

  spotLight.angle = options.angle;
  spotLight.penumbra = options.penumbra;
  spotLight.intensity = options.intensity;
  box.rotation.x += 0.05;
  box.rotation.y += 0.05;
  renderer.render(scene, camera);

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?

1 Like

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

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.

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 :slight_smile: it was to do with img size

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.