render pharse in three.js javascript file doesn't work

this phrase in three.js javascript file in my code doesn't work:

            renderer = new THREE.WebGLRenderer( { antialias: true } );

            renderer.setClearColor( 0xf0f0f0 );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.shadowMap.enabled = true;

            container.appendChild( renderer.domElement );

I have codes like this :

        function init() {


            container = document.getElementById( 'container' );

            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.set( 0, 250, 1000 );
            scene.add( camera );

            scene.add( new THREE.AmbientLight( 0xf0f0f0 ) );
            var light = new THREE.SpotLight( 0xffffff, 1.5 );
            light.position.set( 0, 1500, 200 );
            light.castShadow = true;
            light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 70, 1, 200, 2000 ) );
            light.shadow.bias = -0.000222;
            light.shadow.mapSize.width = 1024;
            light.shadow.mapSize.height = 1024;
            scene.add( light );
            spotlight = light;

            // scene.add( new THREE.CameraHelper( light.shadow.camera ) );
            //-------------------------------------------------------------
            //scene.add( new THREE.CameraHelper( light.shadow.camera ) );

            var planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );
            planeGeometry.rotateX( - Math.PI / 2 );
            var planeMaterial = new THREE.ShadowMaterial();
            planeMaterial.opacity = 0.2;

            var plane = new THREE.Mesh( planeGeometry, planeMaterial );
            plane.position.y = -200;
            plane.receiveShadow = true;
            scene.add( plane );

            var helper = new THREE.GridHelper( 2000, 100 );
            helper.position.y = - 199;
            helper.material.opacity = 0.25;
            helper.material.transparent = true;
            scene.add( helper );

            var axis = new THREE.AxisHelper();
            axis.position.set( -500, -500, -500 );
            scene.add( axis );


            renderer = new THREE.WebGLRenderer( { antialias: true } );

            renderer.setClearColor( 0xf0f0f0 );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.shadowMap.enabled = true;

            container.appendChild( renderer.domElement );

            stats = new Stats();
            container.appendChild( stats.dom );

            var gui = new dat.GUI();
            gui.add( params, 'uniform' );
            gui.add( params, 'tension', 0, 1 ).step( 0.01 ).onChange( function( value ) {
                splines.uniform.tension = value;
                updateSplineOutline();
            });
            gui.add( params, 'centripetal' );
            gui.add( params, 'chordal' );
            gui.add( params, 'addPoint' );
            gui.add( params, 'removePoint' );
            gui.add( params, 'exportSpline' );
            gui.open();

            // Controls
            controls = new THREE.OrbitControls( camera, renderer.domElement );
            //controls = new OrbitControls( camera, renderer.domElement );
            controls.damping = 0.2;
            controls.addEventListener( 'change', render );

            transformControl = new THREE.TransformControls( camera, renderer.domElement );
            //transformControl = new TransformControls( camera, renderer.domElement );
            transformControl.addEventListener( 'change', render );

            scene.add( transformControl );

and so far etc...

via hasanbaghal