• 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

Object Storage Arubacloud
+2 głosów
190 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,350 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ź 1,049 wizyt
pytanie zadane 8 kwietnia 2021 w JavaScript przez Kubs Mądrala (5,190 p.)
+1 głos
2 odpowiedzi 1,018 wizyt
pytanie zadane 1 kwietnia 2021 w JavaScript przez Kubs Mądrala (5,190 p.)
0 głosów
0 odpowiedzi 212 wizyt
pytanie zadane 5 sierpnia 2020 w JavaScript przez Bakkit Dyskutant (7,600 p.)

92,761 zapytań

141,685 odpowiedzi

320,485 komentarzy

62,105 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

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!

...