envMap doesn't work

Questions
,
1 
	const light = new THREE.PointLight( 0xffffff, 2, 1000 );
			light.position.set( 20, 0, 262 );
			scene.add( light );
			const maptexture = new THREE.TextureLoader().load( './img/texture4.png' );
				

			const spheregeometry = new THREE.SphereGeometry( 2, 32, 16 );
			const spherematerial = new THREE.MeshLambertMaterial( {color: 0xffffff, envMap: maptexture, reflectivity: 0.3} );
			const Sphere = new THREE.Mesh( spheregeometry, spherematerial );
		
			scene.add( Sphere );
			spherematerial.needsUpdate = true;
			render();

I see the light reflected by the sphere, but it doesn’t have anything on it (no env texture).
If applied this texture as “map”, it would work just fine.

2

Please show what you do with a live example: https://jsfiddle.net/5j89uzer/

3

Don’t do anything fancy. :DDD

https://jsfiddle.net/ns9fkwb0/5/

You see, if you remove the envMap it works like charm, idk what’s wrong.

The cube is there though, if you change the background to white, it’s fairly visible, it’s just it’s not getting any envMap :((

4

The problem is that your texture is not a real environment map. Env maps have to be in a certain format like equirectangular or cube map. I’ve updated the fiddle with an equirectangular texture from the official repository.

https://jsfiddle.net/ankr41qh/

1 Like
5

Thanks for the reply.
What if I want to apply them to a planeGeometry? Do I still need to make it equirectangular?

6

Yes, the geometry does not matter.