8

I think my issue is similar to: Orient object's rotation to a spline point tangent in THREE.JS but I can't access the jsfiddle's properly and I struggled with the second part of the explanation.

Basically, I have created this jsfiddle: http://jsfiddle.net/jayfield1979/qGPTT/2/ which demonstrates a simple cube following the path created by a spline using SplineCurve3. Use standard TrackBall mouse interaction to navigate.

Positioning the cube along the path is simple. However I have two questions.

First, I am using the spline.getTanget( t ) where t is the position along the path in order to have the cube rotate (Y axis as UP only). I think I am missing something because even if I extract the .y property of the resulting tangent provided, the rotations still seem off. Is there some nomalizing that needs doing?

Second, the speed is very varied along the path, obviously a lot more points stacked in creating the tighter curves, but I was wondering is there a way to refactor the path to more evenly distribute the spaces between points? I came across the reparametrizeByArcLength function but struggled to find an explanation how to use it.

Any help or explanation for a bit of a maths dummy, would be gratefully received.

Community
  • 1
  • 1
jayfield1979
  • 355
  • 1
  • 5
  • 16

1 Answers1

16

To maintain a constant speed, you use .getPointAt( t ) instead of .getPoint( t ).

To get the box to remain tangent to the curve, you follow the same logic as explained in the answer to Orient object's rotation to a spline point tangent in THREE.JS.

box.position.copy( spline.getPointAt( counter ) );

tangent = spline.getTangentAt( counter ).normalize();

axis.crossVectors( up, tangent ).normalize();

var radians = Math.acos( up.dot( tangent ) );

box.quaternion.setFromAxisAngle( axis, radians );

three.js r.144

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • Fantastic. I appreciate the fiddle as it allows me to see this in action and learn that way. Thank you so much. – jayfield1979 Aug 23 '13 at 21:14
  • Thanks for this answer and the fiddle, I found it very easy to follow, if you pardon the pun ;-) . Can't wait to apply this to my kids game idea, this will work well for either train tracks or a roller-coaster. Thanks again. – Big Rich Dec 03 '13 at 13:47
  • @WestLangley Following up from this excellent answer, I have successfully implemented this to my project (after a long break) but I have an issue with it: http://jsfiddle.net/jayfield1979/T2t59/ When the boxes get to the second straight, they flip! Is there a way of resolving this? – jayfield1979 Jan 05 '14 at 13:16
  • Sorry. You will just have to step through the code and debug it. Warning: cross product is not well-defined if the two vectors are parallel. – WestLangley Jan 05 '14 at 16:26
  • Ahh I see, so are you saying that I have manually correct the rotation when there are parallel vectors? Because that appears to be where the problem is present. Parallel vectors will happen frequently in my application because of an arbitrary stepping of 22.5 degree angles. Any tips? – jayfield1979 Jan 05 '14 at 19:02
  • @WestLangley hmmm I've messed about and the only way to make this work is to offset the back straight vectors by 1 degree. This makes creating a perfect loop impossible (or very inelegant). Is this a bug, an improvement or just impossible? Surely this can't be impossible as following a spline is a pretty standard function of a 3D engine? – jayfield1979 Jan 06 '14 at 11:42
  • 1
    http://jsfiddle.net/T2t59/1/ Your train track is in the X-Y plane. Make sure you understand why my changes work. – WestLangley Jan 06 '14 at 14:54
  • Thank you so much. I originally changed this (from your first fiddle) because I am working with collada imported models which are on a different plane to native 3d objects. I have just rotated them upon import and this seems to work :) – jayfield1979 Jan 06 '14 at 15:48
  • @WestLangley ahh, although on the third straight (recently added) http://jsfiddle.net/jayfield1979/T2t59/2/ – jayfield1979 Jan 06 '14 at 19:34
  • @WestLangley I've waited for a few more releases of THREE.js (while taking a break from this project) but I am still having issues with an object following a spline flipping when it travels along a parallel vector: http://jsfiddle.net/jayfield1979/T2t59/6/ Is this going to be impossible to implement as it's quite essential for the this project or maybe you have a suggestion for an alternative method of implementing this kind of movement? – jayfield1979 Jul 28 '14 at 10:34
  • Try this Fiddle as for some reason, in r68, you can not update on objects position using the `spline.getPointAt()` function? http://jsfiddle.net/jayfield1979/T2t59/7/ – jayfield1979 Jul 28 '14 at 10:36
  • Please make a new post and ask a specific question. – WestLangley Jul 28 '14 at 13:49
  • Done: http://stackoverflow.com/questions/24997066/three-js-why-is-my-object-flipping-whilst-travelling-along-a-spline :) – jayfield1979 Jul 28 '14 at 14:06