How to join lines to get a shape

This way it works: index.html (4.9 KB)

while moving it create Cannot read property ‘distanceToSquared’ of undefined error why ?

@prisoner849 fixed thanks for atleast supporting


@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 coordinate systems) is that renderer.domElement is attached directly to the body element, rather than to a container (a container is defined, but never used).

1 Like

const onMouseMoveForScaling = (event,scene, mouse, raycaster) => {
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);
curveLine.geometry = createCurveGeometry();

here you are recreating the curve line and extrud geo again and again right it allows me to enlarge the object but not make it small any idea and this approach make the project slow are it calculate the geo again and again any better suggestion @EliasHasle

Moving the vertices is outside the original scope of your question. Moving vertices before extrusion is easier than after, because then you only need to move one point at a time. Moving them after is possible, but then you have to find out where all the corresponding vertices are in the new geometry and move all of them. To find out that, you will probably need to study the source code of ExtrudeBufferGeometry. The alternative is basically to recreate the whole geometry, which will be slow with a large geometry.

With the information you’ve provided, I thought that you need a tool to create polygons of ten(s) points, created of straight lines.
Now, for a certain reason, you try to use a solution with curves, that involves the using of hundreds vertices and seems far from what you were asking in the beginning.
Could you summarize your goal in a respoinsible list of the things you plan to achieve?

Kind of:

  1. Set points of a polygon
    1.1 Make them moveable.
  2. Extrude the polygon
    2.1 Create a shape
    2.2 Use THREE.ExtrudeBufferGeometry()
  3. Add functionality for scaling

So far it seems you’re trying to do all the things at once.

1 Like


  1. I need a way to create a polygon with the mouse with the dynamic line

so far we achieve the polygon i make it straight curve.getPoints(controlPoints.length); and the same logic of points that you had in your fiddle i am applying and creating the polygon by using @EliasHasle his logic but i want in initial i need lines in his logic he have the way to create the line curve some how if we make it with the mouse it really help rest is completed as if now

Using of a curve for making a line is something beyond good and evil.

You already have an example of what you want to achieve here
The difference is you need to use THREE.Raycaster()'s .ray and THREE.Plane() to find the point of intersection, instead of using mouse.unproject(camera);.
Use this method of .ray to find the point.

1 Like

@prisoner849 can you please update the fiddle to work with plane so i can learn something from you

Nope, but I can hint how to set the things (a concept):

var planeNormal = new THREE.Vector3(0, 1, 0); // the normal looks up (y) so the plane is on xz
// if you need the plane to be on xy, then use new THREE.Vector3(0, 0, 1);
var plane = new THREE.Plane(planeNormal, 0);

// then you need to set a raycaster
var raycaster = new THREE.Raycaster();
// how to set `mouse` see in the docs of Raycaster
raycaster.setFromCamera( mouse, camera );

//and now all you need is to find the point of intersection
var pointOfIntersection = new THREE.Vector3();
raycaster.ray.intersectPlane(plane, pointOfIntersection);
// that's all


how to update the amount i am changing it but does not affect
mesh.geometry.parameters.options.amount += 1
geometry size is remain same

The docs say:

.parameters : Object

An object with a property for each of the constructor parameters. Any modification after instantiation does not change the geometry.

how i can scale it than ?
curveLine.geometry.vertices.forEach((vertex, index)=>{
polygon.userData[‘points’][index].set(vertex.x, vertex.z); // re-use the array
shape = new THREE.Shape(polygon.userData[‘points’]);
shapeGeometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
shapeGeometry.rotateX(Math.PI * .5);
polygon.getObjectByName(‘region’).geometry = shapeGeometry;
i think thats the sol to recreate it but is there any better way

@prisoner849, @EliasHasle

Scaling can in many cases be done after geometry creation by applying a scaling transform to the object, which in practice involves modifying the object’s scale vector. Rotation is also usually better to do with the transform, rather than on the geometry itself.

If your solution to recreate the geometry works, why would you want a better one? Where is the problem? In my view, it is a fundamental problem to rely on regenerating the whole geometry every time a detail is changed, but if it works on the scale and update frequency you need, then I don’t judge. :wink:

1 Like

generally mesh.scale.y = 10 work i want something like mesh.geometry.parameters.amount = 10 should work but it is not :unamused:

@prisoner849 explained that above, referring to the docs. I really hope you are reading our answers as carefully as we are writing them.


thats what i am asking so only recreation is a solution because in your fiddle i want to scale the polygon on mouse click or on some event so it have some height , height is the main concern

Set the initial height of a mesh to 1 and then use mesh.scale.y = value_of_desired_height

1 Like

… except that he has rotated the geometry to be -z up, so he will in that case have to scale z instead.