How to draw spline in threejs?

Questions
, , , ,
1

I'm new in three.js and need someone to how how to draw spline using mouse event

2

Generally, you need the following steps:

  • capture the mouse event (e.g. click, mousedown, pointerdown or whatever you want)
  • get event coordinates (clientX and clientY) and translate them to Three.js coordinates
  • collect all clicked points in an array of THREE.Vector2
  • build a SplineCurve using this array
  • build a Line that visualizes that curve

Here is an example – click on the canvas to draw a point and a spline through all points. Most likely it will not be what you need, but you can get the idea and develop it further.

https://codepen.io/boytchev/full/YzOjyRN

image