How to join lines to get a shape

let viewGeometry = new THREE.Geometry();
viewGeometry.vertices.push(position)
let viewMaterial = new THREE.PointsMaterial({size: 10});
let view = new THREE.Points(viewGeometry, viewMaterial);

agree the point size remain same but it is something to do with the ray casting is it possible if the mouse is near to the vertex and we can grab it some how means i will click even near to the point it grab that nearer point , here it only work if we now how to point the control points means we have to click so many times when the camera is at distance i need smoothness in selection

Good question! I think to be able to “snap” to the nearest point, you will need a custom intersection test where you intersect a THREE.Plane and check distances to all the control points.

you mean first get the point and than cube position than d b/w them and smallest distance is the answer but i think if a polygon have 100 vertices so its a long approach if my questions are good and if this point is correct so i think we are hitting more concepts right :slight_smile: and @prisoner849 if you understand the discussion so please share views

@Yash_Joshi
If you want an example of how to move points, then take a look at this post Line segment coordinates and its last jsfiddle with the grid and points. It’s not the ultimate solution for you, it’s just a concept.

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.

1 Like

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

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

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.

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

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.

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

1 Like

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

cool got it , its really a nice help @prisoner849

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/

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

1 Like

ok sir give me moment

@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

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.

1 Like

Master @prisoner849 and @EliasHasle like this

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.

it is a mesh here your boxes