How to avoid the cutoff of a Sprite when overlapping in a terrain?

Question

I have a scene where I have a terrain as a PlaneGeometry. And I'm trying to locate a building on it as Sprite. But I'm not able to put that building/sprite centered on the terrain without getting a cutoff.

Make sense because the terrain is cutting the half. But I'm just wondering if there is a technique to solve this problem.

I tried to rotate the sprite as a 3D object. But does not have this property. Also tried using a PlaneGeometry with a MeshBasicMaterial, but the result of the Image looks blurry and without transparency.

Answer 1

You can force the sprite to render always on top by disabling the depth testing in the sprite's material.

material = new game.THREE.SpriteMaterial({
  depthTest: false
});

Answer 2

The best solution I found is adding two scenes, one for the terrain and one for the sprites.

Is important to add two lines after each render()

renderer.render(sceneTerrain, camera)
renderer.clearDepth()
renderer.autoClear = false

renderer.render(sceneSprites, camera)
renderer.clearDepth()
renderer.autoClear = false

...