After creating a custom curve applied to TubeGeometry, I noticed an interesting behavior. The curve's vertices on the X axis change based on mouse movement, while the Z axis follows a simple sin curve affected by time. The code snippet below demonstrates this:
CustomSinCurve = THREE.Curve.create(
function ( scale ) {
},
function ( t ) {
var coef = 3 * mousePctX;
var tx = coef * ( Math.sin(( t ) * self.amplitude ));
ty = t * self.neckLength,
tz = Math.sin((t + time) * self.amplitude);
var vertex = new THREE.Vector3(tx, ty, tz).multiplyScalar(self.scale);
return vertex;
}
);
Everything functions as intended, except when the mouse is moved closer to the center. At that point, the tube appears to "flip" 90 degrees on the Y axis. Ideally, the red line should always face up. In the example provided below, you can see that as the curve straightens on the X axis, the green line faces up more frequently. Any insights into why this "flipping" phenomenon occurs?
It's worth mentioning that setting "tx" to "0" in the CustomSinCurve function causes the green line to face up instead of the expected behavior of the red line facing up.
For a working demonstration, visit:
To access the complete code, click here: