CODEWITHSUNDEEP
javascriptthree.jsgeometry
MarkokraM
MarkokraM

Reputation: 990

Modifiable triangle shape with three.js

I just found the three.js library. I would like to start using it by defining a 2d triangle shape that has hand holds on vertices so that I can modify the shape of the triangle in realtime. How can this be done with three.js?

Upvotes: 1

Views: 229

Answers (1)

Eerik Kivistik
Eerik Kivistik

Reputation: 176

There is a nice example in the Three.js collection: https://threejs.org/examples/webgl_interactive_raycasting_points.html

With raycasting, you can get the information about what vertices are intersected at any given time, simply replace the example geometry with a triangle.

When a user clicks and intersects with a vertex, you can start tracking the mouse position and move the vertex accordingly. If you have a simple 2D view you can use canvas coordinates, if not, you could have an invisible plane on the background to find the 3D vector as demoed here (DragControls.js): https://threejs.org/examples/webgl_interactive_draggablecubes.html

Upvotes: 2

Related Questions