CODEWITHSUNDEEP
javascriptthree.js
Johnny Slack
Johnny Slack

Reputation: 28

Threejs TubeGeometry: Applying custom curve causes unexpected twisting

I have created a custom curve that is applied to TubeGeometry. The curve's vertices on the X axis are affected by mouse movement, while the Z axis is a simple sin curve affected by a time increment:

    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;
        }
    );

This is working as expected, except when the mouse is moved closer to the center, the tube seems to "flip" 90 degrees on the Y axis. The expected result is that the red line will always face up. As you can see in the working example below, the green line faces up more frequently as the curve straightens on the X axis. Any thoughts on why this "flipping" is happening?

It's also worth noting that in the CustomSinCurve function above, if "tx" is set to "0", the green line faces up, while I'd expect the red line to face up.

This is the working example: http://dev.cartelle.nl/tubeExample/

And the full code here: http://dev.cartelle.nl/tubeExample/js/TubeExample.js

Upvotes: 1

Views: 442

Answers (1)

Johnny Slack
Johnny Slack

Reputation: 28

Inside TubeGeometry.js 

    //if ( tx <= smallest ) {
        //smallest = tx;
        //normal.set( 1, 0, 0 );
    //}

    //if ( ty <= smallest ) {
        //smallest = ty;
        //normal.set( 0, 1, 0 );
    //}

    //if ( tz <= smallest ) {
        normal.set( 0, 0, 1 );
    //}

Upvotes: 1

Related Questions