How to draw a transparent sphere with a map？

[Qiumeng12]

I want to use this map to draw a transparent sphere. How should I use the material?

If I directly map the material’s map, the sphere becomes like this

let textureSphere = new THREE.TextureLoader().load("css_globe_halo.png");
let spherematerial = new THREE.MeshPhongMaterial({ map: textureSphere })
let mesh = new THREE.Mesh(sphere, spherematerial);

I want my ball to be like this. What should I do

[Mugen87]

Have you already tried to use the texture with a sprite? It would be a flat plane but it should render nicely.

[Qiumeng12]

let group = new THREE.Group()
scene.add(group)

let textureSprite = new THREE.TextureLoader().load("css_globe_halo.png")
let spriteMaterial = new THREE.SpriteMaterial({
        map: textureSprite,
        transparent: true,
})
let sprite = new THREE.Sprite(spriteMaterial);
let p = 270 / 730
sprite.scale.set(p * 715, 270, 1);
group.add(sprite)

let sphere = new THREE.SphereGeometry(100, 100, 100)
let textureSphere = new THREE.TextureLoader().load("css_globe_diffuse.jpg")
let spherematerial = new THREE.MeshPhongMaterial({ map: textureSphere })
let mesh = new THREE.Mesh(sphere, spherematerial)
group.add(mesh)

The effect of using the above code is not ideal.

I want to achieve the effect of this mask to ensure that sphere and spirit are one, like this