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
2 Likes
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);
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 UseTHREE.ExtrudeBufferGeometry() - Add functionality for scaling
So far it seems youâre trying to do all the things at once.
1 Like
- 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.
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
3 Likes
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. 
1 Like
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.
2 Likes
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.