Transparency texture display incorrectly

issue
i create a mesh with transparency texture over the ground. but when i move the mesh , the transparent part of the texture changed to background color of the scene in some where. how to solve this problem? am i missing some configuration here?
code of render:
this.renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
logarithmicDepthBuffer: true,
});
code of texture:
let material = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide,
color: 0xFFFFFF,
map: new THREE.TextureLoader().load(_background),
transparent: true,
opacity: 1,
});

Hi!
The less you use transparency, the less headache you get :thinking:
As an option, use uv coordinates of intersection to draw a circle right on a plane
Example: Edit fiddle - JSFiddle - Code Playground
Picture:

2 Likes

you are right. but i still want to know how this happen. it’s really weird. i got this issue in other situation as well. that’s why i have to figgure it out.