не пишет никаких ошибок, но не отображает картинку ../img/stars.jpg. Отображается белый фон.
почему?
код:
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import * as dat from 'dat.gui';

import stars from '../img/stars.jpg';
console.log(stars);

const renderer = new THREE.WebGL1Renderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;


let width = window.innerWidth;
let height = window.innerHeight;


document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
    75,
    width/ height,
    0.1,
    1000
);

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

const axesHalper = new THREE.AxesHelper(4);
scene.add(axesHalper);

camera.position.set(0,1,5);
orbit.update();

const boxGeometry = new THREE.BoxGeometry();
const boxMaterial = new THREE.MeshStandardMaterial({color: 0xF0F100});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(box);
box.castShadow = true;

const planeGeometry = new THREE.PlaneGeometry(10,10,10);
const planeMaterial = new THREE.MeshStandardMaterial({
    color: 0xFDDFF0,
    side: THREE.DoubleSide    
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);
plane.rotation.x = -Math.PI/2;
plane.position.y = -1;
plane.receiveShadow = true;


const sphereGeometry = new THREE.SphereGeometry(0.9, 100.8, 100);
const sphereMaterial = new THREE.MeshStandardMaterial({
    color: 0x000fff,
    wireframe: false    
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
sphere.position.set(1, 1, 0);
sphere.castShadow = true;

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

// const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.5);
// scene.add(directionalLight);
// directionalLight.position.set(3,3,3);
// directionalLight.castShadow = true;
// //directionalLight.shadow.camera.bottom = -1;

// const dLightHalper = new THREE.DirectionalLightHelper(directionalLight, 1);
// scene.add(dLightHalper); 

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

const spotLight = new THREE.SpotLight(0xFFFFFF);
scene.add(spotLight);
spotLight.position.set(5,5,0);
spotLight.castShadow = true;

const sLightHalper = new THREE.SpotLightHelper(spotLight);
scene.add(sLightHalper);

const gridHalper = new THREE.GridHelper();
scene.add(gridHalper);

// scene.fog = new THREE.Fog(0xFFFFFF, 0, 20);
scene.fog = new THREE.FogExp2(0x000000, 0.1);

// renderer.setClearColor(0xFFAE00);

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

const cubeTextureLoader = new THREE.CubeTextureLoader();
scene.background = cubeTextureLoader.load(stars);
console.log(scene.background );

const gui = new dat.GUI();
const options = {
    spotLightHight: 2,
    sphereColor: '#ffee00',
    wireframe: false,
    speed: 0.2,
    angleLight: 0.5,
    penumbra: 0.5,
    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.2);
gui.add(options, 'spotLightHight', 0, 10);
gui.add(options, 'angleLight', 0, 1.5);
gui.add(options, 'penumbra', 0, 1);
gui.add(options, 'intensity', 0, 2);

let step = 0;

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

    step += options.speed;
    sphere.position.y = 0.4 * Math.abs(Math.sin(step));
    spotLight.position.y = options.spotLightHight;
    spotLight.angle = options.angleLight;
    spotLight.penumbra = options.penumbra;
    spotLight.intensity = options.intensity;
    sLightHalper.update();
    width = window.innerWidth;
    renderer.setSize(width, height);

    renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);