How to join lines to get a shape

[EliasHasle]

I don’t understand your description. But checking distance to 100 vertices on every "mousedown" event is not a big cost. If you had 100 000 vertices, I would recommend you to do some spatial indexing to avoid checking all of them every time, but not for only 100.

[Yash_Joshi]

share your views about the fiddle in this discussion Line segment coordinates i want to achieve same thing i our fiddle on which i am working

[Yash_Joshi]

Hey i follow your approach can you please let me know whats the problem here
https://jsfiddle.net/jqzsuowf/13/

[prisoner849]

In addPoint() function, use this:

raycaster.ray.intersectPlane(planeTest, pointOfIntersection);

planeTest instead of plane

And in the onMouseMove() add this:

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

in the beginning of the function.

[Yash_Joshi]

here
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
raycaster.ray.intersectPlane(planeTest, pointOfIntersection);
first two line is for converting 2d mouse points into 3d

raycaster.ray.intersectPlane(planeTest, pointOfIntersection); this i think giving us the point where we click
raycaster.setFromCamera( mouse, camera ); whats the use of this ?
can you share your experience on this

[prisoner849]

@Yash_Joshi

i think giving us the point where we click

It give us the point of intersection of the raycaster’s ray, that we casted from the camera, and the plane. It’s not clear where you use this part of code, for mouse move or for mouse down.

@Yash_Joshi

whats the use of this ?

Is there any chance that you read documentation?
https://threejs.org/docs/#api/en/core/Raycaster.setFromCamera

[Yash_Joshi]

Haa haa i read that part but the doc is really optimized

[Yash_Joshi]

cool got it , its really a nice help @prisoner849

[Yash_Joshi]

Hey @EliasHasle i resolved the vertices selection but unable to shift the point please can you check whats the problem here
const onMouseDownForScaling = (event,selection,controls,camera, mouse, raycaster,scene) => {
let vertices = selection[selection.length - 1].parent.children[2].children
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
raycaster.ray.intersectPlane(plane, pointOfIntersection);
let distance = null
vertices.forEach((ver,index) =>{
if(index === 0){
distance = ver.position.distanceTo(pointOfIntersection)
vertex = ver
}else{
if(distance > ver.position.distanceTo(pointOfIntersection)){
distance = ver.position.distanceTo(pointOfIntersection)
vertex = ver
}
}
})
if (vertex){
vertex.material.color.setHex( 0xff0000 );
controls.enableRotate = false;
dragObject = vertex;
plane.setFromNormalAndCoplanarPoint(planeNormal, pointOfIntersection);
shift.subVectors(vertex.position, pointOfIntersection);
dragging = true;
}
}

const onMouseUpForScaling = (event,controls) => {
if(vertex){
vertex.material.color.setHex( 0xffffff );
}
controls.enableRotate = true;
dragObject = null;
dragging = false;
}

const onMouseMoveForScaling = (event,scene, mouse, raycaster) => {
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
console.log(“heree”,dragObject)
if (vertex || !dragging) return;
console.log(“heree”,dragObject)
raycaster.setFromCamera( mouse, camera );
raycaster.ray.intersectPlane(plane, pointOfIntersection);
dragObject.position.copy(pointOfIntersection).add(shift);
curveLine.geometry.dispose();
curveLine.geometry = createCurveGeometry();
extrudeMesh(scene);
}

and can you please clear this line of code
plane.setFromNormalAndCoplanarPoint(planeNormal, pointOfIntersection);
shift.subVectors(vertex.position, pointOfIntersection);

and also while making points on the scene they are not under the mouse pointer they are a little away any solution for that @prisoner849

@prisoner849 can you give me the understanding of these two line
plane.setFromNormalAndCoplanarPoint(planeNormal, pointOfIntersection);
shift.subVectors(vertex.position, pointOfIntersection) and do you have the idea whats wrong here if we compare it with this https://jsfiddle.net/7rgh4jb9/2/

[EliasHasle]

I cannot read unformatted code. Try putting the formatted code in a block with three ` signs before and three after.

[Yash_Joshi]

ok sir give me moment

[Yash_Joshi]

@EliasHasle
please sir check this

==== Before ======
function onMouseDown(event){
intersects = raycaster.intersectObjects(controlPoints);
if (intersects.length > 0){
controls.enableRotate = false;
dragObject = intersects[0].object;
console.log(intersects[0].point, dragObject.position)
plane.setFromNormalAndCoplanarPoint(planeNormal, intersects[0].point);
shift.subVectors(dragObject.position, intersects[0].point);
dragging = true;
}
}

    function onMouseUp(event){
      controls.enableRotate = true;
      dragObject = null;
      dragging = false;
    }

    function onMouseMove(event){
      mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
      mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
      if (intersects.length == 0 || !dragging) return;
      raycaster.ray.intersectPlane(plane, pointOfIntersection);
      dragObject.position.copy(pointOfIntersection).add(shift);
      curveLine.geometry.dispose();
      curveLine.geometry = createCurveGeometry();
      extrudeMesh();
    }

==== Before ======

====== After =======
const onMouseDownForScaling = (event,selection,controls,camera, mouse, raycaster,scene) => {
    let vertices = selection[selection.length - 1].parent.children[2].children 
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse, camera );
    raycaster.ray.intersectPlane(plane, pointOfIntersection);
    let distance = null
    vertices.forEach((ver,index) =>{
        if(index === 0){
            distance = ver.position.distanceTo(pointOfIntersection)
            if(distance < 3){
                vertex = ver
            }
        }else{
            if(distance > ver.position.distanceTo(pointOfIntersection)){
                distance = ver.position.distanceTo(pointOfIntersection)
                console.log(distance)
                if(distance < 3){
                    vertex = ver
                }
            }
        }
    })
    if (vertex){
        vertex.material.color.setHex( 0xff0000 );
        controls.enableRotate = false;
        // dragObject = vertex;
        // plane.setFromNormalAndCoplanarPoint(planeNormal, pointOfIntersection);
        shift.subVectors(vertex.position, pointOfIntersection);
        dragging = true;
    }
}

const  onMouseUpForScaling = (event,controls) => {
    if(vertex){
        vertex.material.color.setHex( 0xffffff );   
    }
    controls.enableRotate = true;
    vertex = null;
    dragging = false;
  }
  
const  onMouseMoveForScaling = (event,scene, mouse, raycaster) => {
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    console.log("heree",vertex)
    if (vertex || !dragging) return;
    raycaster.setFromCamera( mouse, camera );
    raycaster.ray.intersectPlane(plane, pointOfIntersection);
    vertex.position.copy(pointOfIntersection).add(shift)
    console.log("heree",vertex.position)
    curveLine.geometry.dispose();
    curveLine.geometry = createCurveGeometry();
    extrudeMesh(scene);
}

====== After ============

along with that i need a solid understanding of this line of code
plane.setFromNormalAndCoplanarPoint(planeNormal, pointOfIntersection); shift.subVectors(vertex.position, pointOfIntersection);
Any way possible to dive deeper into ray casting becasue the doc of three is not sufficient
please share suggestions

[prisoner849]

@Yash_Joshi

Any way possible to dive deeper into ray casting

Yes, take a look at the source code of THREE.Raycaster() and .raycast() method of different objects (mesh, line(s), points).

And once again: please, use formatting for blocks of code.

[Yash_Joshi]

Master @prisoner849 and @EliasHasle like this

[EliasHasle]

Why not do like this:

    let minDistance = Infinity;
    let nearestVertex = null;
    vertices.forEach((ver,index) =>{
        const distance = ver.position.distanceTo(pointOfIntersection);
        if ( distance < minDistance ) {
            minDistance = distance;
            nearestVertex = ver;
        }
    })

?

BTW, are you sure about ver.position? Because normally, a vertex is a vector, not an Object3D.

[Yash_Joshi]

it is a mesh here your boxes

[Yash_Joshi]

@EliasHasle

let minDistance = Infinity; let nearestVertex = null; vertices.forEach((ver,index) =>{ const distance = ver.position.distanceTo(pointOfIntersection); if ( distance < minDistance ) { minDistance = distance; nearestVertex = ver; } })

Yes Master i take it but optimization is not my goal my goal is movement in vertices and along with that whenever i create a point with the mouse down that point is not underneath the mouse cursor a little away any idea

[prisoner849]

@Yash_Joshi

point is not underneath the mouse cursor a little away any idea

An idea was in this post:

How to join lines to get a shape

@prisoner849 @Yash_Joshi I think a problem of both your versions is that the mouse coordinate is calculated from event.clientX and window.innerWidth, which are not in general compatible. On the other hand, container.clientWidth is in the same coordinate system as event.clientX, if you put the click listener on renderer.domElement and container is the parent element to renderer.domElement (and likewise with height). In this case, another problem (that triggers the issues with conflicting coordin…

[TheHappyKoala]

OMG, this thread is quickly morphing into the three.js community’s answer to Tolstoy’s War & Peace!

[TheHappyKoala]

Most unhelpful comment of the century, but I couldn’t stop myself, so apologies in advance