How to add markers as sprite bitmap Panorama viewer in three.js

We have developed a panorama viewer in three.js. A texture bitmap is added to Sphere and camera position is moved inside. We want to add markers into this as sprites.

When we add the sprite to the scene it is not getting rendered. Why doesn’t the sprite get rendered?

Answer

Here is the solution:

    function onDocumentMouseDown(event) {
        var interSects = castScreenToSphere(event);
            if (interSects.length > 0)
                MarkAnotation(interSects[0].point);
    }

    function castScreenToSphere(event) {
        var mouse3D = new THREE.Vector3();
        mouse3D.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse3D.y = -(event.clientY / window.innerHeight) * 2 + 1;
        mouse3D.z = 0.5;
        projector.unprojectVector(mouse3D, camera);
        var ray = new THREE.Raycaster(camera.position, mouse3D.sub(camera.position).normalize());
        var res = ray.intersectObject(mesh);
        return res;
    }
    function MarkAnotation(anot) {
       
        var ballTexture = THREE.ImageUtils.loadTexture('/map_sprite.png');

        var ballMaterial = new THREE.SpriteMaterial({ map: ballTexture });
        var ballSprite = new THREE.Sprite(ballMaterial);
        ballSprite.scale.set(16, 16, 0.5);
        ballSprite.position.set(anot.x, anot.y, anot.z);
        //ballSprite.position.multiplyScalar(0.9);
        scene.add(ballSprite);
    }