Plane geometry Texture for Floor

Hi, I am using following code for creating a ground Mesh.

`
var groundTexture = new THREE.TextureLoader().load( “models/texture/floor.png” );
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set( 10000, 10000 );
groundTexture.anisotropy = 16;
groundTexture.encoding = THREE.sRGBEncoding;

			var groundMaterial = new THREE.MeshStandardMaterial( { map: groundTexture } );

			var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 10000, 10000 ), groundMaterial );
			mesh.position.y = 0.0;
			mesh.rotation.x = - Math.PI / 2;
			mesh.receiveShadow = true;
			scene.add( mesh );
			`

and the following is the image for the texture map

But the result is as below

What is the reason for this yellowish color. I have tried with some other images also. Still it is being like this.

Do you mind sharing your light configuration?

Thanks for asking @Mugen87 . My light configuration is below

        var light = new THREE.DirectionalLight( 0xffffff, 10.0,5000 );
		scene.add( light );
		light.position.set(0,10,0);
		light.castShadow=true;
		light.shadow.camera.near = 1;
		light.shadow.camera.far = 5;
		light.shadow.camera.right = 1;
		light.shadow.camera.left = - 1;
		light.shadow.camera.top	= 1;
		light.shadow.camera.bottom = -0;
		light.shadow.mapSize.width = 500;
		light.shadow.mapSize.height = 509;

DirectionalLight has only two parameters. color and intensity. An intensity value of 10 is usually way too high. Try it with 1 instead.

@Mugen87 yes, it changed little bit. But not exactly. And I am having an gltf object. Now the texture of that object is being dull.

Can you please share a live link to your app? It’s hard to say more without debugging the entire code.

sure @Mugen87

Hi @Mugen87 , the html file and the image and glb file is attached here. Please check
animation_testing.html (5.6 KB)


Sorry, I tried to upload the gltf also, It shows an error while uploading that. So I shared the link for the file

Your ambient light configuration was not correct. The intensity value was again way too hight. Try it with:

var ambientLight = new THREE.AmbientLight( 0xffffff, 0.6 );
scene.add( ambientLight );

Besides, you should also configure the renderer to output sRGB for proper colors:

renderer.outputEncoding = THREE.sRGBEncoding;

It looks then like so:

wow. Thanks @Mugen87 . And Now I have added the following lines within animate function for move the ground mesh to make an animation like moving.

var time = - performance.now() / 1000; mesh.position.z = ( time ) % 5;

During this animation. There is a shaking in that ground mesh.
Please try this and rotate that . you will feel the shaking on the diagonal. Please help me to handle this lagging and to make an animation in movement of ground without lagging. and why the shadow is not visible?

Any update on this @Mugen87