How to remove blur around outside of texture

Questions
,
1

I’m trying to center an image as a Three.js texture.

Knowing the dimensions of the image, I’ve been able do that using some math and .repeat.

Any idea what this streaking is on the outside of the image? And how I might tell Three.js not to render it? I’d like to it just show nothing, so all I have is my image, centered on my geometry face.

In other words, I’d like the above image to look like this, with no streaking on the geometry:

2

From the docs:

If repeat is set greater than 1 in either direction, the corresponding Wrap parameter should also be set to THREE.RepeatWrapping or THREE.MirroredRepeatWrapping to achieve the desired tiling effect.

What you currently have is THREE.ClampToEdgeWrapping, which is causing the streaks.

1 Like
3

Right, but if I change it to “RepeatWrapping”, won’t it be repeated on each tile? I don’t want it to be repeated, I want it to look like this (See updated question).

4

There is no such thing as noWrapping mode unfortunately.
There are a few ways of doing what you want though, probably the easiest is setting repeat to 1 and using your second image as the texture.

1 Like