Dynamic create fence

Questions
,
1

I want to create a fence based on map data. Users should be able to draw lines (eg. around their house) on a map and preview the fence in 3D. I am new to threejs. Any suggestions or examples I should start with? Or libraries you would suggest?

Data:
Viewer coordinates and view direction. Coordinate for each fence post.

What i need to do:
Translate coordinates and draw a fence.

What I did so far:
I used some examples and created a basic setup.

<html>

<head>
    <meta charset=utf-8>

    <style>
        body {
        margin: 0;
        background-color: #fff;
    }

    canvas {
        width: 100%;
        height: 100%
    }
</style>
</head>

<body>
<script src="js/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/controls/TransformControls.js"></script>

<script>
    var camera, scene, renderer, control, orbit;
    var objects = {};
    var planesContainer;
    init();

    function init() {
        window.addEventListener('resize', onWindowResize, false);
        window.addEventListener('keydown', function (event) {
            switch (event.keyCode) {
                case 81: // Q
                    control.setSpace(control.space === "local" ? "world" : "local");
                    break;
                case 17: // Ctrl
                    control.setTranslationSnap(100);
                    control.setRotationSnap(THREE.Math.degToRad(15));
                    break;
                case 87: // W
                    control.setMode("translate");
                    break;
                case 69: // E
                    control.setMode("rotate");
                    break;
                case 82: // R
                    control.setMode("scale");
                    break;
                case 187:
                case 107: // +, =, num+
                    control.setSize(control.size + 0.1);
                    break;
                case 189:
                case 109: // -, _, num-
                    control.setSize(Math.max(control.size - 0.1, 0.1));
                    break;
                case 88: // X
                    control.showX = !control.showX;
                    break;
                case 89: // Y
                    control.showY = !control.showY;
                    break;
                case 90: // Z
                    control.showZ = !control.showZ;
                    break;
                case 32: // Spacebar
                    control.enabled = !control.enabled;
                    break;
            }
        });
        window.addEventListener('keyup', function (event) {
            switch (event.keyCode) {
                case 17: // Ctrl
                    control.setTranslationSnap(null);
                    control.setRotationSnap(null);
                    break;
            }
        });

        var scene = initScene();

        objects.normal = initView(scene)


    }

    function initView(scene) {
        camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 10, 4000);
        camera.position.set(0, 400, 1000);
        // camera.lookAt(100, 1000, 0);

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

        orbit = new THREE.OrbitControls(camera, renderer.domElement);
        orbit.update();
        orbit.addEventListener('change', render);

        control = new THREE.TransformControls(camera, renderer.domElement);
        control.addEventListener('change', render);
        control.addEventListener('dragging-changed', function (event) {
            orbit.enabled = !event.value;
        });

        scene.add(control);
        planesContainer = new THREE.Object3D();


        planesContainer.add(getFencePart(0, 0, 0))
        planesContainer.add(getFencePart(20, 570, -350))

        scene.add(planesContainer);
        control.attach(planesContainer);

        return { orbit: orbit, control: control, renderer: renderer, scene: scene, camera: camera };
    }

    function initScene() {


        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);

        scene.add(new THREE.GridHelper(1000, 30));

        var light = new THREE.DirectionalLight(0xccccdd, 2);
        light.position.set(1, 1, 1);
        scene.add(light);



        return scene
    }

    function getFencePart(distanceX, distanceY, distanceZ) {

       // var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
       var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
        var geometry = new THREE.BoxBufferGeometry((553 / 2) * 3, 150, 2, 10, 10, 10);
        var mesh = new THREE.Mesh(geometry, material);

        if (distanceX > 0) {
            mesh.rotation.y = 20;
            mesh.position.x = 570
            mesh.position.z = -350
        }


        return mesh
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
        render();
    }
    function render() {
        renderer.render(scene, camera);

    }

    render();
</script>