• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Webgl three js - światło punktowe

VPS Starter Arubacloud
+2 głosów
168 wizyt
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>

1 odpowiedź

0 głosów
odpowiedź 16 stycznia 2023 przez rafal.budzis Szeryf (85,260 p.)
wybrane 17 stycznia 2023 przez Czang Kai Shrek
 
Najlepsza
Z światłem jest taka sprawa że nie każdy materiał reaguje z światłem ;) Najlepiej używać standardu PBR a do tego mamy dwa rodzaje materiałów MeshStandardMaterial oraz MeshPhysicalMaterial one zawsze reagują z światłem ;)

Podobne pytania

0 głosów
1 odpowiedź 762 wizyt
pytanie zadane 8 kwietnia 2021 w JavaScript przez Kubs Mądrala (5,190 p.)
+1 głos
2 odpowiedzi 816 wizyt
pytanie zadane 1 kwietnia 2021 w JavaScript przez Kubs Mądrala (5,190 p.)
0 głosów
0 odpowiedzi 202 wizyt
pytanie zadane 5 sierpnia 2020 w JavaScript przez Bakkit Dyskutant (7,600 p.)

92,454 zapytań

141,262 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...