How to get my scene background to be transparent?

Questions
1

I have tried to add the following:

renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor(0xffffff, 0);

But still, the scene is covering up my star background image texture. How do i make the stars show up over the white scene?

My current code, minus some extra stuff that isn’t related:

    (function ($) {
        $(document).ready(function () {

            /* Update/Add site values here, and they will display on earth view */
            var sites = [];
             
            //THREE JS setup variables
            var camera, scene, renderer, labelRenderer;

            var group;

            init();
            animate();

            function init() {

                const EARTH_RADIUS = 225;
                const EARTH_SEGMENTS = 75;
                const EARTH_RINGS = 75;

                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
                camera.position.set(-70, 375, 450);
                scene = new THREE.Scene();

                var light = new THREE.PointLight(0xffffff, 1, Infinity);
                camera.add(light);

                scene.add(camera);

                //Starfield
                var starGeometry = new THREE.SphereGeometry(1000, 50, 50);
                var starMaterial = new THREE.MeshPhongMaterial({
                    map: new THREE.ImageUtils.loadTexture(basePath + 'Content/images/galaxy_starfield.png'),
                    side: THREE.DoubleSide,
                    shininess: 0
                });
                var starField = new THREE.Mesh(starGeometry, starMaterial);
                scene.add(starField);

                //Create group to hold sphere and texture
                group = new THREE.Group();
                scene.add(group);

                //Create sphere and texture, and mesh together using texture loader
                var loader = new THREE.TextureLoader();

                loader.load(basePath + 'Content/images/earth_no_clouds_16k.jpg', function (texture) {

                    // Create the sphere
                    var sphere = new THREE.SphereGeometry(EARTH_RADIUS, EARTH_SEGMENTS, EARTH_RINGS);

                    // Map the texture to the material. 
                    var material = new THREE.MeshBasicMaterial({
                        map: texture
                        //overdraw: 0.5,
                        //transparent: true,
                        //opacity: 0.9
                    });
                    // Create a new mesh with sphere geometry.
                    var mesh = new THREE.Mesh(sphere, material);

                    // Add mesh to globe
                    group.add(mesh);
                });

                scene.add(group);

                renderer = new THREE.WebGLRenderer({ alpha: true });
                renderer.setClearColor(0xffffff, 0);
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(window.innerWidth, window.innerHeight);
                $('#earth_container').append(renderer.domElement);

                labelRenderer = new THREE.CSS2DRenderer();
                labelRenderer.setSize(window.innerWidth, window.innerHeight);
                labelRenderer.domElement.style.position = 'absolute';
                labelRenderer.domElement.style.top = 0;
                document.body.appendChild(labelRenderer.domElement);

                //For rotation and mouse controls
                var controls = new THREE.OrbitControls(camera, labelRenderer.domElement);
            }

            function animate() {
                //group.rotation.y -= .0004;
                requestAnimationFrame(animate);
                renderer.render(scene, camera);
                labelRenderer.render(scene, camera);
                //requestAnimationFrame(render);
            }

            /* Referenced from answer found here:
             https://stackoverflow.com/questions/28365948/javascript-latitude-longitude-to-xyz-position-on-earth-threejs
             */
            function calcPosFromLatLonRad(lat, lon, radius) {

                var phi = (90 - lat) * (Math.PI / 180)
                var theta = (lon + 180) * (Math.PI / 180)

                x = -((radius) * Math.sin(phi) * Math.cos(theta))
                z = ((radius) * Math.sin(phi) * Math.sin(theta))
                y = ((radius) * Math.cos(phi))

                return [x, y, z];
            }

            function handleSiteClick(e) {
                var siteClicked = e.target;
                alert(siteClicked.textContent);
            }

        }); /* END DOCUMENT READY */

    }(jQuery));
2

It seems your view frustum is too small. Try it with a higher far plane value:

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
3

Wow thank you! That works.