Draw polyline in realtime and exit on condition

Questions
, ,
1

Hello :slight_smile:

maybe this is a little bit more JavaScript related, but I really got stuck on that one.

I have a function drawLine() that adds points on click-events and then visualizes the line in real time.
Now, I want to stop that when a maximal amount of points is reached or when the line is closed (selected point == first point).

The example return statement at the beginning did not fix that for me, and I can’t exit the function properly.

Maybe someone kows what I’m missing?

The code:

drawLine() {

            if(buildingPts.length == 5)
            {
                console.log("Max pts reached")
                return
            }
            var line; 

            //Raycaster for drawing tool
            const raycaster = new THREE.Raycaster()
            var plane = new THREE.Plane( new THREE.Vector3( 0, 0, 1), 0 );
            const clickMouse = new THREE.Vector2()
            //Geometry
            var geometry = new THREE.BufferGeometry();
            var MAX_POINTS = 500;
            var positions = new Float32Array(MAX_POINTS * 3);
            geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
            //Material
            var material = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 2 });
            //Line
            line = new THREE.Line(geometry, material);
            scene.add(line);

            window.addEventListener("mousemove", onMouseMove, false);
            window.addEventListener('mousedown', onMouseDown, false);

            
            function updateLine() {
                positions[count * 3 - 3] = pos.x;
                positions[count * 3 - 2] = pos.y;
                positions[count * 3 - 1] = pos.z;
                line.geometry.attributes.position.needsUpdate = true;
            }

            //Mouse move handler
            function onMouseMove(event) {
                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
                mouse.z = 0;
                raycaster.setFromCamera( mouse, camera );
                var intersects = new THREE.Vector3();
                let planeIntersect = raycaster.ray.intersectPlane( plane, intersects );
                pos = new THREE.Vector3( Math.round(planeIntersect.x), Math.round(planeIntersect.y), 0);
                mouse.unproject(camera);
                if( count !== 0 ){
                    updateLine();
                }
            }
            
            //Add point
            function addPoint(event){
                console.log("point nr " + count + ": " + pos.x + " " + pos.y + " " + pos.z);
                positions[count * 3 + 0] = pos.x;
                positions[count * 3 + 1] = pos.y;
                positions[count * 3 + 2] = pos.z;
                buildingPts.push(pos)
                count++;
                line.geometry.setDrawRange(0, count);
                updateLine();
            }

            //Mouse down handler
            function onMouseDown(evt) {
                // on first click add an extra point
                if( count === 0 ){
                    addPoint();
                }
                addPoint();
            }
        },```
2

chances are high that you placed this statement/condition in the wrong function

drawLine() looks like something that runs only once, before you have any points

1 Like
3

Yes drawLine() gets called when a button is clicked and that should the enable the user to draw

4

I don’t know if this is good practice but I now put this return statement at the beginning of both event listener functions onMouseMove() and onMouseDown().

if(buildingPts[buildingPts.length - 1].x == buildingPts[0].x && buildingPts[buildingPts.length - 1].y == buildingPts[0].y)
{
    window.removeEventListener("mousemove", onMouseMove)
    return
}

At least it exits the function now.