0

This question derives from Orient object's rotation to a spline point tangent in THREE.JS, but instead of orienting a mesh along a path, I have trouble orienting the camera.

The complete sources are in this repo but I've used the sources to set a up a jsfiddle. In my opinion the problem lies in the function setCameraOnSplinePath. I made the spline visible as a purple line to make debugging easier.

The goal would be to move the camera like a car driving over the surface of the mesh, if that makes any sense.

If I just copy the camera rotation like the camera position, the camera rolls around in seemingly random directions:

camera.position.x = camPos.x;
camera.position.y = camPos.y;
camera.position.z = camPos.z;

camera.rotation.x = camRot.x;
camera.rotation.y = camRot.y;
camera.rotation.z = camRot.z;

I've now fixed the camera to be fixed along the y and z axis and to tilt slightly on the x axis:

if(camera.position.z <= 150) {
    camera.rotation.x = 0.7;
} else if(camera.position.z >= 180) {
    camera.rotation.x = 0;
} else {
    var r = ((180 - camera.position.z) / 30) * 0.7;
    camera.rotation.x = r;
}
camera.rotation.y = 0;
camera.rotation.z = 0;

I've tried several rotations on the y axis, but nothing seems to work. The solution from the mentioned answer above comes pretty close, but the path is parallel to the mesh instead of perpendicular.

const targetRotation = mobiusrune.degToRad(80); //0.7;
if(camera.position.z <= 120) {
    camera.lookAt(routeSpline.getPoint((camPosIndex+1) / fragmentSize));
    //camera.rotation.x = targetRotation;
    // camera.rotation.y = 0; //mobiusrune.degToRad(camPosIndex);
    // camera.rotation.z = 0; //mobiusrune.degToRad(-30);
} else if(camera.position.z >= 150) {
    camera.rotation.x = 0;
} else {
    var r = ((150 - camera.position.z) / 30) * targetRotation;
    camera.rotation.x = r;
}
Community
  • 1
  • 1
mdworld
  • 73
  • 1
  • 1
  • 9
  • Maybe [this three.js example](http://threejs.org/examples/webvr_rollercoaster.html) is helpful. Or [this one](https://threejs.org/examples/webgl_geometry_extrude_splines.html). – WestLangley Jan 31 '17 at 02:30
  • @WestLangley those do look good, thanks! I'll look into it. – mdworld Jan 31 '17 at 07:37
  • Quite interesting examples, unfortunately, the camera code is very complex. I've added replaced `camera.lookAt(routeSpline.getPoint((camPosIndex+1) / fragmentSize));` with parts from https://github.com/takahirox/takahirox.github.io/blob/master/three.js.mmdeditor/examples/webvr_rollercoaster.html and this is indeed a lot more stable, but I don't really no where to start to rotate the camera 90 degrees to be perpendicular to the "rail" it's driving on. – mdworld Feb 05 '17 at 15:16
  • @mdworld Hey did you ever find a solution to having the camera rotated 90 degrees perpendicular to the rail or path? I am trying to do the same thing – JJ Gerrish Apr 25 '18 at 09:28
  • I am afraid not, I reverted to a much simpler animation that does not use following a path. – mdworld May 28 '18 at 13:50

0 Answers0