Forum Pasja Informatyki - Najnowsze z tagiem obj

Webgl three js - światło punktowe

Thu, 12 Jan 2023 21:43:30 +0000

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>

Problem z wyświetleniem obrazu OBJ w Three.js

Thu, 08 Apr 2021 17:56:15 +0000

Witajcie,

rzeźbie sobie i rzeźbie, ale może tym razem się uda.

Próbuje wczytać image.obj w Three.js, ale wyrzuca dwa błędy:

three.js:6215 THREE.Object3D.add: object not an instance of THREE.Object3D. OBJLoader

image.obj:1 Failed to load resource: net::ERR_CACHE_READ_FAILURE

main.js

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera (64, window.innerWidth/window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({antialias: true});

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

const colorYellow = new THREE.Color("hsl(40, 100%, 60%)");
const colorPink = new THREE.Color("hsl(306, 100%, 60%)");


const loader = new THREE.OBJLoader();
loader.load('image.obj');


const light = new THREE.PointLight(colorPink, 2);
const light2 = new THREE.PointLight(colorYellow, .5);


 light.position.z = 20;
 light.position.y = -20;
 light.position.x = -40;

 light2.position.z = 10;
 light2.position.y = 20;
 light2.position.x = 40;


scene.add(light);
scene.add(light2);
scene.add(loader);

camera.position.z = 55;

renderer.render (scene, camera);

oraz index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.js"></script>
    <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/OBJLoader.js"></script>
    <script src="main.js"></script>
</body>
</html>

Jak załadować plik obj do THREE.js ?

Thu, 01 Apr 2021 12:30:07 +0000

Witajcie,

mam już trochę kodu (kamera, światło, itp.) i wszystko działa. Gdy chcę wyświetlić obj pojawia się błąd 'Uncaught TypeError: THREE.OBJLoader is not a constructor'

const loader = new THREE.OBJLoader();
loader.load('image.obj');

scene.add(loader);

Jak dodać konstruktor by obraz obj pojawił się na ekranie?

Pomoc w zrozumieniu pliku obj

Thu, 18 Aug 2016 15:38:53 +0000

Cześć. Chciałbym się dowiedzieć jak działają pliki obj, w sensie co dana linijka w nich oznacza. Co oznaczają liczby po danych literach, w jakiej kolejności ustawione są wierzchołki oraz czym są tajemnicze normalne?