1

What I want to achieve is a modifiable mesh that users can manipulate with a slider to set the number of faces. Here is an example of what I want: enter image description here

but the problem is that when I change the number of faces, the remaining vertices from previous geometry remains! for example, in the image below, you can see that the sides has been reduced to 4 from 5, but some vertices from previous geometry remained! enter image description here

Hesamoy
  • 301
  • 1
  • 20

2 Answers2

2

To draw a shape like that you need to collect the points in the correct order in counterclockwise direction. The problem in your case is that you also are drawing a hole in your mesh. This makes it much more difficult and I don't know exactly how to do this correctly using THREE.Geometry only.

But I would suggest to take a look at the THREE.Shape class. It allows you to draw a shape with holes and then the shape can be converted to a geometry (THREE.ShapeGeometry) using the makeGeometry() method.

var shape = new THREE.Shape();

shape.moveTo( 10,10 )
shape.lineTo( 20, 10 );
shape.lineTo( 20, 20 );
shape.lineTo( 10, 20 );
shape.lineTo( 10, 10 );

geometry = shape.makeGeometry();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

The THREE.Shape api allows also for holes and other more complicated curves. I think it will be useful in your case.

Wilt
  • 41,477
  • 12
  • 152
  • 203
  • Thank you for the answer. I think your code may become useful at some point through the code, but the main point of my question is the modifiable mesh or dynamic mesh. How can I change the geometry faces dynamically? something similar to this (http://stackoverflow.com/questions/31399856/drawing-a-line-with-three-js-dynamically), but not for line, for mesh. – Hesamoy Jan 26 '16 at 10:12
2

As mentioned in the similar question's answer, I needed to add geometry.setDrawRange(index,number of vertices) to clear/hide/update vertices during the manipulation.

Community
  • 1
  • 1
Hesamoy
  • 301
  • 1
  • 20