Webgl three js - światło punktowe

pytanie zadane 12 stycznia 2023 w JavaScript przez Czang Kai Shrek Obywatel (1,990 p.)

Cześć, tworzę model ziemi w webgl w bibliotece three.js:

Chcę uzyskać efekt światła słońca z oddali. Myślę, że najlepiej się nada tzw. światło punktowe:

const light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );

Mam problem z zaimplementowaniem, gdzie bym nie dał światła - brak efektu. To kwesta tego, że nie ma podłoża pod obiektem?
Albo niewłaściwy rodzaj światła?
Tak wygląda mój kod:

<html>
	<head>
		<style>canvas { width: 100%; height: 100% }</style>
	</head>
	<style>
		body { background-color: black;}
		p {color: white;};
	</style>
	
	<body>
		
		<script src="js/three.js"></script>		
		<script>  
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 40*1024 ); 
			var renderer = new THREE.WebGLRenderer({ antialias: true });
			
			renderer.setSize( window.innerWidth, window.innerHeight ); 
			document.body.appendChild( renderer.domElement ); 
			camera.position.set(0,128,1024); 
				

		var textures = ['img/EARTH.jpg']; var materials = [];
		for(var i=0;i<textures.length;i++) {
			var texture = THREE.ImageUtils.loadTexture(textures[i]);
			texture.anisotropy = renderer.getMaxAnisotropy();
			materials.push(	new THREE.MeshBasicMaterial({map: texture})); 
		}
		var geometry = new THREE.SphereGeometry(512,128,256);
		var cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials )); //Utworzenie siatki trojkatow tworzacej kostke
		scene.add( cube );  
		cube.position.x+=512;  
		cube.position.y+=128;

			//Wczytanie tekstur
			var textures = ['img/skybox/north.jpg',
							'img/skybox/south.jpg',
							'img/skybox/top.jpg',
							'img/skybox/bottom.jpg',
							'img/skybox/west.jpg',
							'img/skybox/east.jpg'];
			var materials = [];
			
			for(var i=0;i<textures.length;i++) {	
				var texture = THREE.ImageUtils.loadTexture(textures[i]);
				texture.anisotropy = renderer.getMaxAnisotropy();
				materials.push(	new THREE.MeshBasicMaterial({map: texture, side: THREE.BackSide}));  
			}																						
		
			var geometry = new THREE.CubeGeometry(32*1024,32*1024,32*1024); // cube (skybox)	
			var skyBox = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials )); 
			skyBox.position.y -= 1024;
			
			scene.add( skyBox );  
			
			
        	const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );

			var kat = 0;
			function render() {		
				requestAnimationFrame(render);
				
								
				    kat -= 0.004; 
					camera.position.x = Math.sin( kat ) * 1500; 
					camera.position.z = Math.cos( kat ) * 1024; 
					camera.lookAt( scene.position ); 
					
				
		
				renderer.render(scene, camera);
			}
			render();
					
		</script>
	</body>
	
</html>

Teoretycznie powinno działać niemal gdziekolwiek, gdzie zaimplementuję kod w <script>