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

# How to join lines to get a shape

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

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).

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);

dragObject.position.copy(pointOfIntersection).add(shift);

curveLine.geometry.dispose();

curveLine.geometry = createCurveGeometry();

extrudeMesh(scene);

}

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.

@Yash_Joshi

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:

- Set points of a polygon

1.1 Make them moveable. - Extrude the polygon

2.1 Create a shape

2.2 Use`THREE.ExtrudeBufferGeometry()`

- Add functionality for scaling

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

- 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 https://jsfiddle.net/wilt/a21ey9y6/

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.

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.dispose();

polygon.getObjectByName(âregionâ).geometry = shapeGeometry;

i think thats the sol to recreate it but is there any better way

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.

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

@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`

âŚ except that he has rotated the geometry to be `-z`

up, so he will in that case have to scale z instead.