How to place object on sphere surface using three js

Question

I am trying to make an 3d sphere, which holds some object on surface. I am new to using three js.

Any help, Below is my code for creating sphere.

       var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    


    var renderer = new THREE.WebGLRenderer();
    
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    //controls = new THREE.OrbitControls( camera, renderer.domElement );


    const sphere = new THREE.SphereBufferGeometry();
    var geometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
    var material = new THREE.MeshBasicMaterial( {color: '#7bb2ed', wireframe:true} );
    var earthmesh = new THREE.Mesh(geometry, material);



  // scene.add(earthmesh);
    camera.position.z = 10;

    const animate = function () {
            requestAnimationFrame( animate );

            renderer.render( scene, camera );
        };

        animate();

Answer 1

For your use case, I would start from the (awesome) demo here --from mrdoob-- and the corresponding code on GitHub here. Note the "SPHERE" button at the bottom of the demo.