Three.js keeps displaying the same geometry

Question

I have a simple Three.js code that works properly in Three.js v68 but it displays 2 cubes instead of a cube and a sphere in Three.js v71. If I draw the sphere first it will draw two spheres.

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

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

        var CubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
        var CubeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( CubeGeometry, CubeMaterial );
        scene.add( cube );

        var spheregeometry = new THREE.SphereGeometry(1, 16, 16);
        var spherematerial = new THREE.MeshBasicMaterial({ color: 0x00ff00});
        var sphere = new THREE.Mesh(spheregeometry, spherematerial);
        sphere.position.set(-2.0, 0, 0);
        scene.add(sphere);

        renderer.render(scene, camera);