1

Hi, it’s seems there may be a bug on the envMap implementation of MeshPhongMaterial.
I built a simple scene with a Sphere and a MeshPhongMaterial with an envMap texture, (top half is white and bottom half is black).

As you can see, a vertical 1px line appears in the reflection, that should not be there.

Did anyone has this problem? Is there any workaround?

I tried setting the repeat parameter to 0.99. The texture has power of 2 dimensions

Here is my code:

var mat1= new THREE.MeshPhongMaterial({
color:0x999999,
specular:0xFFFFFF,
reflectivity:1,

});

var loader = new THREE.TextureLoader();
loader.load('test1.png',function ( texture ) {

   texture.wrapS = THREE.RepeatWrapping;
   texture.wrapT = THREE.RepeatWrapping;
   texture.mapping = THREE.EquirectangularReflectionMapping;
   texture.repeat.set( 1 , 1 ); 

   mat1.envMap=texture;
   mat1.needsUpdate=true;
});


var mesh = new THREE.Mesh(new THREE.SphereGeometry( 35, 32, 32 ), 
                          mat1 );      
scene.add(mesh);
2

Could you upload that image as well?

3

Could you possibly link the editor, or a jsfiddle?

4

That’s a limitation of EquirectangularReflectionMapping.

You can use CubeCamera to convert a equirectangular texture into a CubeTexture. Take a look at this example:

https://threejs.org/examples/#webgl_materials_cubemap_dynamic2

2 Likes
5

Thanks, I’ll try that alternative

6

Sorry, only one image was allowed in the post

7

You can link multiple images and a small snapshot will be showed. That is allowed (and preferred)! :slight_smile: :wink: