OpenLayers3 and Javascript - vectors not displaying

Question

I'm having some issues with OpenLayers3 and trying to display a vector layer. I'm gathering the geometries from SQL Server in C# and passing them to Javascript. From there, this code is supposed to draw it on a map (the code is adapted from http://www.c-sharpcorner.com/article/getting-started-with-openlayers-3-and-spatial-data/ ).

<script type="text/javascript">
        //services for our shapes
        var GeoArray = <%=JavaScript.Serialize(this.CGeo) %>;
        var wktReader = new ol.format.WKT();
        var featureCollection = [];
        //start getting, styling and drawing shapes
        for (var i = 0; i < GeoArray.length; i++)
        {
            var feature = wktReader.readFeature(GeoArray[i]);
            feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
            feature.setStyle(new ol.style.Style(
            {
                stroke: new ol.style.Stroke(
                {
                    color: 'red',
                    width: 3
                }),
                fill: new ol.style.Fill(
                {
                    color: 'rgba(255, 0, 0, 1)'
                })
            }));
            featureCollection.push(feature);
        }
        //create our vector source and layer
        var Vsource = new ol.source.Vector({features: featureCollection});
        var vectorLayer = new ol.layer.Vector({source: Vsource});
        //define our map and basemap layer
        var osmLayer = new ol.layer.Tile(
        {
            source: new ol.source.OSM()
        });
        var map = new ol.Map(
        {
            layers: [osmLayer, vectorLayer],
            target: 'map',
            view: new ol.View(
            {
                center: [0, 0],
                zoom: 2
            })
        });
    </script>

We do pick up the shapes from the C# (they are all polygons, and I've done some alert(GeoArray.length) and alert(featureCollection.length) calls, which have all come back with the returned amount) but they're not getting drawn.

As an aside, we're using the coordinate system EPSG:3111 but when I use that (as opposed to EPSG:3857) it won't work at all (unable to get property). But even if I specify that it's 3857 (which it isn't) it should still draw, just be improperly aligned (even removed the translation line and nothing happens).

Answer 1

Okay, I was trying to use old OpenLayers code with OpenLayers3. New answer, for anyone interested (at the moment this just loads one feature):

<script>
        //services for our shapes
        var GeoArray = <%=JavaScript.Serialize(this.CGeo) %>;
        var format = new ol.format.WKT();
        var featureCollection=[];
        var feature=format.readFeature(GeoArray[1],
        {
            dataProjection: 'EPSG:3111',
            featureProjection: 'EPSG:3857'
        });
        var VLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [feature]
            })
        });
        //define our map and basemap layer
        var osmLayer = new ol.layer.Tile(
        {
            source: new ol.source.OSM()
        });
        var map = new ol.Map(
        {
            layers: [osmLayer, VLayer],
            target: 'map',
            view: new ol.View(
            {
                center: [0, 0],
                zoom: 2
            })
        });
    </script>